CSS for non-square thumbnails on Woo product page/renew

[mrboats]

Hi,

Trying to take non-square thumbnails into use for my products with WC 3.5 but there is a small issue with CSS (which is not as visible when square thumbnails are used. See screen capture

The CSS controlling the location seems to be this (from renew.css)

.woocommerce div.product .images figure [data-thumb]:nth-child(4n+1) {
margin-right: 0;
}
.woocommerce div.product .images figure [data-thumb]:nth-child(n+2) {
display: block;
float: left;
width: 22%;
margin: 4% 4% 0 0;
}

Can this be modified to remove the vertical alingment issue. Currently using 150px wide thumbnails, thumbnail width can be adjusted as part of the solution (within reason).

[basanta]

Hi There,

Thanks for writing in!

That can be overwritten by custom CSS. Removing from this may be an issue for the theme update.

you can change the same CSS to what you want and add them to X-> theme option -> global CSS it will overwrite the existing css.
If you will provide us the page URL we can suggest you the CSS better.

Thanks

[mrboats]

I get a bit strange behavior. I added this css to override default renew behavior:

woocommerce div.product .images figure [data-thumb]:nth-child(4n+2) {
margin-right: 0;
}
.woocommerce div.product .images figure [data-thumb]:nth-child(4n+1) {
margin-right: 4%;
}
and it flushed the right edge, but now the 1st and 2nd images on the row touch?

[ruenel]

Hello There,

Thanks for updating in! Please remove your css. You may use this code instead:

.woocommerce div.product .images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    width: 22% !important;
    overflow: hidden;
    margin-right: 4% !important;
}

.woocommerce div.product .images .woocommerce-product-gallery__wrapper,
.woocommerce div.product .images .woocommerce-product-gallery__wrapper .container-image-and-badge .woocommerce-product-gallery__image,
.woocommerce div.product .images .woocommerce-product-gallery__wrapper .container-image-and-badge .woocommerce-product-gallery__image .wp-post-image,
.woocommerce div.product .images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
    width: 100% !important;
    position: relative;
    overflow: hidden;
}

.woocommerce div.product .images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img:not(.wp-post-image) {
    max-height: 90px;
    height: 90px;
} 

.woocommerce div.product .images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(4n+1) {
    margin-right: 0 !important;
}

We would loved to know if this has work for you. Thank you.

[mrboats]

It looks good on a wide screen but on narrow screen, the thumbnails gets “squashed” as in the image below (mobile and tablet)

After I took the screenshot, I removed the “height” setting which improved thins a bit. I have some thumbs for which the crop has failed so need to check those still. Any improvements you could suggest so that thumb with a different form factor would still fit on the same “height” but keep their form factor?

Btw, for mobile screens, I think it would be nice of the thumbs were in rows of two, they get quite small on mobile screen when they are 4 wide.

[paul.r]

Hi,

To make it two columns n mobile, you can add the code below in Theme Options > CSS

@media(max-width:767px) {
.woocommerce div.product .images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    width: 46% !important;
    overflow: hidden;
    margin-right: 4% !important;    
}
.woocommerce div.product .images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img:not(.wp-post-image) {
     max-height: 100%; 
}
}

Hope that helps.

[mrboats]

OK, thanks. Found the setting for hard crop so now image galleries look good!

[nabeel]

Glad all is good now.

Cheers!