Images on Woocommerce category and product pages too big

[intveld]

Hey @intveld,

WooCommerce 3.0 has some new features and support for the new features was released since X 5.1.1. Also included in the update was the removal of image size restriction. Now you can choose your own Catalog, Single Product, and Product Thumbnails images sizes. To do that, you need to set the image sizes in WooCommerce > Settings > Products > Display then you need to regenerate the thumbnails in your site using Regenerate Thumbnails plugin . Please see this article for more details regarding WC image sizes.

Hope that helps.

[christian]

Hey @intveld,

WooCommerce 3.0 has some new features and support for the new features was released since X 5.1.1. Also included in the update was the removal of image size restriction. Now you can choose your own Catalog, Single Product, and Product Thumbnails images sizes. To do that, you need to set the image sizes in WooCommerce > Settings > Products > Display then you need to regenerate the thumbnails in your site using Regenerate Thumbnails plugin . Please see this article for more details regarding WC image sizes.

Hope that helps.

[intveld]

It seems that you didn’t read my question. First, two of the support staff people send me the same - archive - reply within a time frame of three hours. Second: the problems appeared after the last update of X, not from WooCommerce. After the WooCommerce update I didn’t had this problem.

I tried already what you advised me. I don’t know exactly what the right sizes should be in WooCommerce > Settings > Products > Display. I tried different sizes, but nothing helps. And as I told you already in my first message: I use Regenerate Thumbnails.

I would appreciate if you really had a look at my problem.

[christian]

In that case, please give us access to your WordPress admin and FTP in a Secure Note so we could check your setup.

Thanks.

[ruenel]

Hello There,

Thanks for updating in!

I have checked your site and your WooCommerce image dimension settings. You have this:

It is expected that on in your shop and product archives, you will have 250x275 pixels. When you are in the big screen, most likely the image will blow up to a bigger size because of the default styling. To resolve this and make sure that the image is exactly the same as the size in the settings, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce li.product .entry-featured img {
    min-width: 100px;
    max-width: 100%;
    width: auto;
}

The single product page has the WooCommerce Product Slider and Gallery Zoom. If you want to get rid of this and just display the old and simple product image display, please add the following code in your child theme’s functions.php file

// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
function remove_woo_three_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================

Hope this helps. Please let us know how it goes.

[intveld]

Hi RueNel,

Thanks for looking at the problem.
The second suggestion didn’t work at all. The first suggestion worked fine for all skirts. Except for the one we added recently: the Monroe Fancy Stripe.

None of the two solutions changed anything to the images in the category pages.
In the past I added - together with your support colleagues - a lot to the css to get the images on the category pages exactly as we liked it. So maybe the (other) changes in the css conflict now with the update of x.

[intveld]

I also wonder if the image settings as shown in the print screen are the correct ones to use. The original images are all 920x1380 px.

[christian]

Hey @intveld,

Can you give us a screenshot of how you like the category to look? It would also be best if you can give us the URL of your previous request so we could check the given CSS. I checked your other threads but I could not find the thread with lots of CSS.

Can you also please purge all caches and deactivate the caching plugin so changes take effect immediately?

Thanks.

[intveld]

Hi Christian,

I cannot produce a screenshot anymore, but I can describe the problems with the category pages. The images aren’t shown full size, but cropped on top and bottom. And before the update they were smaller, so that they didn’t cover the name of the skirt and the price as the image does now.

The CSS is a combination of answers on requests of other people and some of myself. They were about the color of the hover and the position of the text and the skirts. But maybe it’s already 1,5 - 2 years ago.

I purged the cache and deactivated WP Fastest Cache.

Thanks again.
Ton

[ruenel]

Hello There,

The css does not interfere or caused any of the issues. In the recent release of the theme, we have turn over the control of the image dimensions to WooCommerce. This is why the product catalog images or the images found in your shop and product category is using the dimension being set in the WooCommerce > Settings > Products > Display which is 250 x 275 and this is the output as of the moment.

If you want to display a bigger image or full original image, you will have to change the setting to at least 1000x1000 without hard crop. After changing the setting, you will have to regenerate the thumbnails and test the site again.

Please let us know how it goes.

[intveld]

Hi RueNel,

Many, many thanks. That’s the solution.

I could not find this thread anymore in MyPosts and not when I searched the Forum. So I was a bit worried that my topic and all the replies from you and your colleagues had disappeared. So I made a new topic to tell you that the thread had disappeared. Then I saw the notification in the Account-badge. Sorry for the misunderstanding.

Ton in 't Veld
www.happyskirtt.com

[jade]

Glad to hear it’s sorted, Ton.

Cheers!