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;
}

 

6 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?

    Like

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 )

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s