This is a simple css trick to make your woocommerce single product page to be round shape with a border. Use the code below in your custom css portion.
If you face any issue feel free to take help in the comments section.
.woocommerce-product-gallery__image img {
border-bottom-left-radius: 50% 50% !important;
border-top-left-radius: 50% 50% !important;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50% !important;
height:382px !IMPORTANT;
border: 5px solid #f5f5f5 !important;
}
.woocommerce-product-gallery__image {
width: 382px !IMPORTANT;
}
.woocommerce div.product div.images li img {
border: none !important;
transition: opacity .5s ease;
border-radius: none !important;
height: auto !important;
}
The code seems to work, however I think the images need to be totally square for it to work. 🙂
LikeLike
thanks
LikeLike
Hi. As you mentioned, this only works in single product pages not in archives or shop page. I use the following shortcode to show my products in a page:
[products columns=”4″ category=”appetizers” orderby=”rand”]
Your CSS trick doesn’t apply to this and all images are shown squared (default). Do you have any idea how to solve this?
LikeLike
share me the page url to check
LikeLike
is it possible for the shop page??
LikeLike
you may need to modify the code
LikeLike
Hey, this worked like a charm for me! But do you know how I can do to only get the main hero image in a circle and keep the thumbnails inside squares?
thanks!
LikeLike
would you mind to share me the url and clarify me some more?
sorry didnt get your point
Regards
Om
LikeLike