The colour of the Woo Commerce ‘Sale’ Badge is by default orange. This isn’t a button so doesn’t take on the accent colour automatically, and it isn’t an editable element in the Theme Customiser.
Fortunately this is an easy fix. All it takes is a tiny bit of code added to the CCS main Divi Style sheet.
This code has the colour reset to a warm red as in the header image above.
/** WOO SALE COLOUR **/
.woocommerce span.onsale, .woocommerce-page span.onsale {
background: #df4002 !important;
}
That’s it. You’re all done : )
Other WooCommerce elements you can custom style with CSS
Once you’ve styled your SALE badge, there are plenty of other WooCommerce elements you can enhance with CSS. Small changes can make your store look more cohesive and professional without adding extra plugins.
You can start by adjusting product titles, prices and add to cart buttons to create a consistent visual flow. Customising hover effects on images or buttons can also make your store feel more interactive. Many site owners like to restyle the out of stock message or the sale price display so they fit better with their overall design.
You can also fine tune product grids, category headings and breadcrumb navigation to improve readability. Styling the checkout and cart pages can make the buying process clearer and more user friendly.
With just a few lines of CSS, you can change colours, spacing, borders and typography. Keep your styles simple and consistent to maintain a fast, polished shopping experience.
We recoloured the Woo Commerce Sale badge on the following sites:
Total Health