WordPress Tricks

Make Woocommerce single product page image round shape with border

woocommerce single product page image round shape with border


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;


14 thoughts on “Make Woocommerce single product page image round shape with border”

  1. 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?


      1. 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.


  2. 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?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s