How Do You Style a Sales Badge in WooCommerce?

When you’re setting up a new WooCommerce store, one of the first things you’ll need to do is add a sales badge to your products. This will let your customers know at a glance which items are on sale, and how much they’re saving.

There are a few different ways to style a sales badge in WooCommerce. You can use the default WooCommerce styles, or you can customize the CSS to match your store’s look and feel. Let’s take a look at both options.

Option 1: Use the Default WooCommerce Styles

WooCommerce comes with a few default styles for sales badges. To use these styles, all you need to do is add the following code to your theme’s CSS file:

.onsale {
    background-color: #ff9c00;
    color: #fff;
}

This will give your sales badges a yellow background with white text. If you want to change the color of the badge, simply change the hex code for the background-color property.

Option 2: Customize the CSS

If you want more control over how your sales badges look, you can always write your own CSS. For example, let’s say you want to give your badges a black background with white text. You would use the following code:

.onsale {
    background-color: #000; /* Black */
    color: #fff; /* White */

    /* Add your own styles here */

 }  

You can also add additional CSS properties to further customize the appearance of your sales badges. For example, you could add a border or change the font size.

Conclusion:

As you can see, there are a few different ways to style a sales badge in WooCommerce. Which method you choose will depend on your needs and preferences.
If you want something quick and easy, go with option 1 and use the default WooCommerce styles. If you want more control over how your badges look, go with option 2 and write your own CSS.