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;
}
All About Basic 
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
Can you please provide the modified code so that all images including shop page or home page can be rounded. Much obliged.
LikeLike
Hi
would you mind to share me your site url to check please?
Regards
Om
LikeLike
This is a product url, which already has your code where in I have rounded the corners. https://www.nu-moto.com/product/turtle-wax-hybrid-solutions-ceramic-spray-coating/
However if you go to the catalog pages, or any other image in the product page (except main product gallery), rest are in default style.
Much obliged.
LikeLike
for category page like
https://www.nu-moto.com/product-category/products/car-care/polish/
please try this code and check if that helps
.product-thumbnail img {
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
border-bottom-left-radius: 1% 1% !important;
}
LikeLike
Oh it worked fantastic! Thanks a ton.
Seems only few images are not getting the css – Frequently bought together images in the product page, and possibly the “recently seen images” at the bottom of the product page.
LikeLike
Hi
can you share me the urls please?
Regards
Om
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