Custom sales banner

[miroirstudio]

I’m using woocommerce and pro. How can I customize the sales banner that appear in discounted products in the product page?

[nabeel]

HI @miroirstudio,

Thank you for reaching out to us. Did you mean the sale circle on the top (see screenshot)

If yes then to customize it you can add the following code in the Theme Options > CSS:

.woocommerce .onsale {
    width: 50px;
    height: 50px;
    font-size: 17px;
    letter-spacing: 0;
    line-height: 48px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    color: #fff;
    background-color: #1391ff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.45);
}

You can change the properties in the above code as per your need. Let us know how this goes!