Border radius of the WooCommerce product images

vcgmotion · June 2022

Hello, can I use CSS to increase the border radius of the product images in one of the pre-made Single Product presets?

Thanks!

Phil · June 2022

Hi,

Can you send me a screenshot showing what you are referring to, please?

If you are using a template, you can change the border radius in the Style tab of the Product Images element.

Thanks

vcgmotion · June 2022

Hey, thanks for the response!

I am referring to this preset:

Phil · June 2022

For that, please, use the following CSS code:

.single-product .product_image_wrapper .wp-post-image{
   border-radius: 40px!important;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

vcgmotion · June 2022

Thank you!

Could you also write a code for changing the border radius of the Shop images? I should have asked that together with the original request, sorry.

Phil · June 2022

No problem. Do you mean the thumbnails below the main image?

If yes, please, use this code:

.single-product .product_image_wrapper .mfn-flex-control-thumbs-wrapper .swiper-slide img{
   border-radius: 20px!important;
}

Thanks

vcgmotion · June 2022

No, I mean the featured product images at the Shop pages: https://vcgmotion.com/store/

Phil · June 2022

For that, you need to use this code:

.woocommerce.archive .products .image_wrapper img{
   border-radius: 30px!important;
}

Thanks

vcgmotion · June 2022

Great, thank you!

Comments