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