[Resolved] Shop Image Size

[metcomllc@aol.com]

All the “shop” images on this site https://www.tryhypnosisnow.com/hypnosis-downloads/view-all-our-downloads/ are the same size. How do I create a standard “shop” image size on this website https://lifechanginghypnosisdownloads.org/shop/

Appearance > Customize > WooCommerce > Product Images > “Thumbnail width” field does NOT work

[Fernando]

Hello there,

Try adding this through Appearance > Customize > Additional CSS:

.woocommerce-shop.woocommerce.woocommerce-page .wc-product-image .inside-wc-product-image img {
    width: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .woocommerce-shop.woocommerce.woocommerce-page .wc-product-image .inside-wc-product-image img {
        height: 300px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .woocommerce-shop.woocommerce.woocommerce-page .wc-product-image .inside-wc-product-image img {
        height: 400px;
    }
}

@media (min-width: 1025px) {
    .woocommerce-shop.woocommerce.woocommerce-page .wc-product-image .inside-wc-product-image img {
        height: 200px;
    }
}

This should make all images uniform on different views.

You can alter the heights set in the code if you want.

[metcomllc@aol.com]

That worked. Thank you.

Can you provide Similar CSS for

related products picture sizes

upsell products picture sizes

cross sell products picture sizes

category image sizes

Product image size

[Fernando]

Can you provide sample links to where I can see these images?

[metcomllc@aol.com]

Product Category https://www.tryhypnosisnow.com/hypnosis-downloads/product-category/fears-phobias/

Product Page – Image at the top- https://www.tryhypnosisnow.com/hypnosis-downloads/product/overcome-a-fear-of-being-alone/

Product Page – Scroll towards the bottom below content – You may also like… https://www.tryhypnosisnow.com/hypnosis-downloads/product/overcome-a-fear-of-being-alone/

Product Page – All the way on the bottom – below “You may also like…” images https://www.tryhypnosisnow.com/hypnosis-downloads/product/overcome-a-fear-of-being-alone/

[Fernando]

Let’s address this last “Product Page – Image at the top”.

Let’s address the other stuff first.

Replace the code I provided with this:

.archive.woocommerce.woocommerce-page .wc-product-image .inside-wc-product-image img {
    width: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .archive.woocommerce.woocommerce-page .wc-product-image .inside-wc-product-image img {
        height: 300px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .archive.woocommerce.woocommerce-page .wc-product-image .inside-wc-product-image img {
        height: 400px;
    }
}

@media (min-width: 1025px) {
    .archive.woocommerce.woocommerce-page .wc-product-image .inside-wc-product-image img {
        height: 200px;
    }
}

.single-product.woocommerce .entry-content section:is(.related, .upsells) img{
    width: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .single-product.woocommerce .entry-content section:is(.related, .upsells) img {
        height: 650px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .single-product.woocommerce .entry-content section:is(.related, .upsells) img {
        height: 400px;
    }
}

@media (min-width: 1025px) {
    .single-product.woocommerce .entry-content section:is(.related, .upsells) img {
        height: 400px;
    }
}

[metcomllc@aol.com]

That did not work

[David]

Hi there,

this:

Appearance > Customize > WooCommerce > Product Images > “Thumbnail width”

Which is a woo option should auto generate the new thumbnail sizes.
But this will only crop an image if the original image is large enough to do so.

Can you confirm that is the case ?

[metcomllc@aol.com]

I believe this is what you want to confirm.

https://postimg.cc/QKg7rWt0

[Fernando]

Does that option not work as well?

Can you try removing the CSS first and see if that setting works?

[metcomllc@aol.com]

That option was active,and not working, before I added the CSS.

[Fernando]

Can you try #1 here to test if anything is causing it not to work?: https://docs.generatepress.com/article/debugging-tips/

[metcomllc@aol.com]

I tried and the issue has not been resolved.

[David]

Is that original product image bigger then the size you have set in the Thumbnail Width ?

[metcomllc@aol.com]

This image https://www.tryhypnosisnow.com/hypnosis-downloads/product/overcome-a-fear-of-being-alone/ is 1280 x 853

https://postimg.cc/xkpkp218

[Author]

Posts