Nicola Mustone

Do you like the sale badge of Storefront? I like it! It’s simple and effective, but I understand some people might not like it, or maybe they want to move it! Here you will find some basic CSS to customize the sale badge and how to move it in the loop of products.

Open you style.css in wp-content/themes/your-child-theme-name/ and add this code at the end of the file:

.onsale {

}

The class .onsale is used both in the loop and in the single product page, so all the code added there will be applied on all sale badges in your site.

In this tutorial, I’ll change only the background, text and border colors, so I can apply to all the badges.

Change the previous code with this:

In this example, the background color will be white (#FFFFFF) and the text and border colors will be red (#FF0000). Feel free to change the colors with your needs obviously. You can find the hexadecimal codes for any color here.

Now it’s time to move the badge. I think a good position is just below the product image for the products loop.

Add this code to the style.css file, just after the previous code:

Note that the top and right position may change based on the size of your product images and the number of columns used for the page.

This will move the badge half hover the image, it will look like this:

Do you want to do more? Read this CSS tutorial and customize further the sale badges on your store!