How to Add Border-Radius to WooCommerce Shop Page Products

Want to give your WooCommerce shop page a modern, polished look? Rounding the corners of your product images is a simple yet effective way to enhance the visual appeal and user experience. This guide will walk you through several methods to easily add border-radius to your WooCommerce shop page products, regardless of your technical skill level.

Understanding Border-Radius

Before we dive into the methods, let’s quickly define border-radius. This CSS property controls the roundness of the corners of an element’s border. A value of `0` creates sharp corners, while higher values create progressively rounder corners. You can specify different radii for each corner, or use a single value to round all corners equally.

Methods to Add Border-Radius to WooCommerce Products

There are several ways to achieve this, ranging from simple CSS customization to using plugins. Choose the method that best fits your comfort level and technical skills.

Method 1: Using the Customizer (Easiest Method)

Many WooCommerce themes offer built-in customization options within the WordPress Customizer. This is often the simplest method. Look for settings related to “product image,” “shop page,” or “styling.” Some themes might directly offer a border-radius setting for product images. If so, simply adjust the value to your desired level of roundness.

• Go to Appearance > Customize in your WordPress dashboard.
• Look for sections related to product image settings or shop page styles.

Find a setting to adjust border-radius or a similar option for product image corners.

Save your changes.

Method 2: Adding Custom CSS (Intermediate Method)

If your theme doesn’t offer a direct setting, you can add custom CSS. This requires a basic understanding of CSS and how to add custom code to your WordPress site. This is generally a more robust solution as it gives you full control.

• Add this CSS code to your theme’s `style.css` file or a custom CSS plugin:

.woocommerce ul.products li.product img {
border-radius: 10px; /* Adjust the value (in pixels or percentage) as needed */
}

• The 10px value sets the border radius to 10 pixels. You can adjust this number to control the roundness.

Important: Always back up your theme files before making any direct edits.

Method 3: Using a CSS Plugin (Beginner-Friendly Method)

If you’re not comfortable editing code directly, use a CSS plugin like “Add Custom CSS” or “Simple Custom CSS.” These plugins allow you to add custom CSS without modifying your theme files directly.

• Install and activate your chosen plugin.

Paste the CSS code (from Method 2) into the plugin’s settings.

Save changes.

Method 4: Child Theme (Recommended for Advanced Users)

Creating a child theme is the most robust and recommended method for making theme modifications. It ensures your changes are preserved even after theme updates. This involves creating a new theme based on your current theme, then adding your custom CSS to the child theme’s `style.css` file.

Conclusion

Adding border-radius to your WooCommerce shop page products is a simple way to improve the aesthetic appeal of your online store. Choose the method that best suits your technical abilities. Remember to always back up your website before making any significant changes. Experiment with different border-radius values to find the perfect look for your brand!