WooCommerce Category/Shop Images too Big

How do I resize or set a limit to the images in category or shop pages?

Right now the images are too big. Especially when I set the pages to 1 column - the image takes the full width of the site.

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

.woocommerce.archive li.product .entry-featured img {
    max-width: 150px;
    min-width: auto;
    margin: 0 auto;
    display: block;
}

Hope it helps :slight_smile:

This doesn’t work on all pages. Please check the link in my secure note - image is still large

Hi there,

The page in question is not a Woocommerce age that is why I could not find a proper class to attach the CSS to. Would you please kindly give us exactly how you created the page?

I strongly suggest that you backup your website completely and update the theme to version 5.2.5 and the Cornerstone to version 2.1.7.

Then you can read the articles below on how the image sizes are set in the new version regarding the Woocommerce:

https://theme.co/changelog/#theme-x-5-1-1

Thank you.

I simply created a new page within wordpress then inserted a woocommerce shortcode for the category. What is a good way to change these image sizes with the configuration I have?

Hi there,

I see what you mean. I suggest that you go to the page in question and from the options add woocommerce to the body class option:

Then add the CSS code below to X > Launch > Options > CSS:

.woocommerce .entry-featured {
    border: none !important;
    box-shadow: none;
}
.woocommerce .entry-featured .entry-featured .entry-thumb {
    background-color: transparent;
    border: none;
}
.woocommerce .entry-featured .entry-thumb img {
    max-width: 800px;
    min-width: auto;
    margin: 0 auto;
    display: block;
}

Feel free to change the 800px to whatever maximum width you want the image has.

Thank you.

hi. this code still doesnt change the image size

Hello There,

I can see that you are using Jetpack plugin. Please disable Photon module. This is caching your images and it is displaying the cache version of your images. Disabling this module will display the actual image sizes being set in the settings, WooCommerce > Settings > Products > Display.

To know more about Photon module and its Pros and Cons, please check this out:

This is still not working. The products are showing the correct size on my other pages, such as my shop page. I will link to my shop page in a note. I want the category pages to have the same image size as the images on the shop page. The images on the shop page are the correct size set in the product display settings.

here is another page. It should be picking up the image sizing like the domain.com/shop does, but it does not

Hi there,

Please replace the code which we gave you in another thread and add this instead:

.woocommerce.columns-1 .product .entry-product .entry-featured,
article.page .entry-featured {
    max-width: 75px;
    flex: 1 1 100%;
}

.woocommerce.columns-1 .product .entry-product > .entry-wrap,
article.page > .entry-wrap {
    max-width: calc(100% - 75px);
    flex: 1 1 100%;
}

.woocommerce.columns-1 li.product .entry-featured img {
    max-width: 75px;
}

That will force the page in question to have a maximum width of 75px for the images.

Thank you.

This does fix the image sizing but now it shows up far above the text. How do we get it to the left and beside the text?

Regretfully, that would require more custom CSS. For more layout and styling options, please consider using the Essential Grid or The Grid plugin.

Thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.