Unable to change the image size in the catalog

[aliencymbal]

The images in the catalog, in my installation, are hugh when shown in a computer or tablet screen (not in a phone, they render well).

If I try to use the Customizer > Woocommerce > Product Images to change the thumbnail width (300 px) I don't get any result.

The problem seems to be related to the class 'card-img-top', used in the image tag despite being inside a list, not in a card. If I disable, using the browser inspector, the class I can see the image correctly.

I'm using Bootscore last version.

Thanks in advance.

[crftwrk]

Hello,

converted this issue into a discussion, because this is no issue.

The images in the catalog, in my installation, are hugh when shown in a computer or tablet screen (not in a phone, they render well).

Impossible to check what you mean without having a link to your site to inspect and debug. We will always ask for a link as described in the guidelines. If you are on your local computer, transfer a copy to a live server first and share the url to reproduce and understand your issue, thank you!

If I try to use the Customizer > Woocommerce > Product Images to change the thumbnail width (300 px) I don't get any result.

Bootscore has no Customizer functions and WooCommerce loop is overridden in the theme. No Customizer setting will have any impact on your site, use code.

The problem seems to be related to the class 'card-img-top', used in the image tag despite being inside a list, not in a card. If I disable, using the browser inspector, the class I can see the image correctly.

The Bootstrap card-img-top class uses width: 100%;:

.card-img, .card-img-top, .card-img-bottom {
  width: 100%;
}

You can change the WooCommerce loop images class with simple filters in your child-theme's functions.php:

/**
 * Change product loop image class
 */
add_filter('bootscore/class/woocommerce/product/loop/img', 'change_product_image_class');
function change_product_image_class($classes) {
  return 'my-custom-class';
}

/**
 * Change category loop image class
 */
add_filter('bootscore/class/woocommerce/category/loop/img', 'change_category_image_class');
function change_category_image_class($classes) {
  return 'my-custom-class';
}

Just replace my-custom-class with your own one, card-img-top is removed.

Solved?

[aliencymbal]

I finally reinstalled the theme, and the child theme, and everything seems to be working now. When I update Woocommerce I often see warnings in woocommerce > state complaining about not updated versions of certain files. To get ride of the warnings I copy the files from Woocommerce folder to bootscore-child/woocommerce. Maybe that was the origin of the issue.

By the way I have many other questions, I'll use this section to post them. Greetings.

[crftwrk]

When I update Woocommerce I often see warnings in woocommerce > state complaining about not updated versions of certain files

Woo templates are always up-to-date, use latest theme version. If there is a warning about outdated Woo templates you are using an earlier Bootscore version or have stored own outdated templates in your child.

By the way I have many other questions, I'll use this section to post them.

Please open for each question a new discussion. This will keep things sorted and helps other users to find specific answers if they have the same question.

[antforager]

@crftwrk said:

Bootscore has no Customizer functions and WooCommerce loop is overridden in the theme. No Customizer setting will have any impact on your site, use code.

I thought wordpress used the thumbnail width setting while it's cropping the images after you upload them from the media page. Is there another place where this value is stored?

[crftwrk]

Of course, you can change the img size in the Customizer, but this was not the problem in this discussion. As far as I remember it was a missing class in the loop and the col was stretched to the entire container width. So the image seems "big" but was not. So, what is your use case?