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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.onsale { | |
background-color: #FFFFFF; | |
border-color: #FF0000 !important; | |
color: #FF0000 !important; | |
} |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ul.products li.product .onsale { | |
position: absolute; | |
top: 200px; | |
right: 85px; | |
} |
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!
Leave a Reply