Border radius of the WooCommerce product images

Comments

• 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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• vcgmotion

  June 2022

  Great, thank you!