fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Archive Image Size

Brooke Parker

Need help with some CSS to resize my Product Archive Images. I am not use the settings panel in the swatch tool because my images are not completely square and this made my images all scrunched up. So currently I have this CSS applied so that the images do not get warped, but I want to make the Archive Swatch Images Smaller than the ones on the Product Page. Do you have CSS that will target the Archive images.

.woo-variation-swatches .variable-items-wrapper .variable-item img {
width: 100% !important;
height: auto !important;
}

.woo-variation-swatches .variable-item:not(.radio-variable-item) {
width: 80px !important;
height: auto !important;
}

I did provide site access in this ticket if needed.

Tanvirul Haque

Hello Brooke Parker,

Try to use .archive class to apply CSS only on shop and category page like this .archive.woo-variation-swatches .variable-item:not(.radio-variable-item){}

Is there anything else that I can help you with?

Thanks

Brooke Parker

Hi,

Hmm, that did not work. In the Visual Settings Tabs themselves can you set the item height to say 80px and then the width to auto, so that it does not squish the images.  I see only a px  by px option so I doubt it. That is why I am trying to adjust it with CSS. We have over 30,000 variant images uploaded to this site but since they are not perfectly square using the px   by   px setting does not work without distorting the images. Or do you have any other ideas of what CSS I could use to effect the Swatch size on the Archive page?

Tanvirul Haque

Could you please try this CSS and let me know is it working for you or not?

.archive.woo-variation-swatches .variable-item:not(.radio-variable-item) {
width: 40px !important;
}

Thanks