Nicola Mustone

Happiness Lead @ Automattic



Customize the Sale badge in Storefront

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:


.onsale {
background-color: #FFFFFF;
border-color: #FF0000 !important;
color: #FF0000 !important;
}

view raw

style.css

hosted with ❤ by GitHub

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:


ul.products li.product .onsale {
position: absolute;
top: 200px;
right: 85px;
}

view raw

style.css

hosted with ❤ by GitHub

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:

storefront-sale-badge

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

Advertisements

Subscribe to This Blog

Receive new articles from this blog directly in your inbox! No spam guaranteed!

Join 651 other subscribers

Contribute to Improving This Blog

Did you enjoy this article? Was it helpful? Contribute to help me write more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

€5.00
€15.00
€100.00
€5.00
€15.00
€100.00
€5.00
€15.00
€100.00

Or enter a custom amount


Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly
Advertisements

More Posts That You Might Like…


2 responses to “Customize the Sale badge in Storefront”

  1. Thanks for site. Very good
    Whats next post?

  2. Thank you for this!

Leave a Reply

Advertisements

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

About The Author

Hi, I’m Nico! Support Lead at Automattic, championing WordPress.com & WooCommerce. Off-duty, I’m at Elemental Beacon, leading epic D&D adventures. Let’s connect, whether it’s about WordPress or a quest!

Advertisements

Don't Miss a Thing!

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

Continue Reading

%d bloggers like this: