Custom Sale, Free & Free Badges

Introduction

Follow this information to use our badges.

Replace the default WooCommerce sale badges into something that your customers can relate to and that will grab their attention instantly.

First, go to BodyCommerce > Sale/New/Free Badge and enable the option "Enable Improved Sale Badge?".
Choose one of our predefined SVG sale badges (below is a screenshot of the available ones as per the date of this document).
Change the colours of the badge using our settings (primary, secondary and quarternary colours).
Next, choose the position you want the badge in relation to the featured image (right or left-hand side).
Once you have done this you can now fine tune the position by moving it away from the edge and top in relation to where it is. "Distance from Edge" and "Distance from Top".
You can also change the size of the badge so if you want to fit some text on - make it bigger.

Now you have the badge you want, now it is time to change the text that appears inside of it.

Add Percentage? - this setting will allow you to change the badge text from "SALE!" to be the percentage saving for example "40%". NOTE: if you want to only have text but use our custom badges, enable text and add it to the "before" or "after" blocks below.
Absolute or Relative Text - Select absolute if you want to move the text independent of the badge. Select relative if you want the text to move when you move the badge so it is dependent on the position of the badge.
Distance from Edge/Top - these settings will allow you to move the text around inside the badge.
Text Before Percentage - Type the text you want before - for example, you could have "-" to show it is the percentage off. You can add a new line by adding "<br>" after the word, the next word after this will appear on a new line. So if you want the percentage to appear below this text, add "<br>" at the end of our word/s.
Text After Percentage - Type the text you want after - for example, you could have "OFF" to show it is the percentage off. You can add a new line by adding "<br>" after the word, the next word after this will appear on a new line. So if you want the percentage to appear below this text, add "<br>" at the end of our word/s.
After this, there are some settings to change the appearance of the badges such as colour and font size.

Add a badge to your product when it is new.

First, go to BodyCommerce > Sale/New/Free Badge and enable the option "Enable Improved New Badge?".
Choose one of our predefined SVG sale badges (below is a screenshot of the available ones as per the date of this document).
Change the colours of the badge using our settings (primary, secondary and quarternary colours).
Next, choose the position you want the badge in relation to the featured image (right or left-hand side).
Once you have done this you can now fine-tune the position by moving it away from the edge and top in relation to where it is. "Distance from Edge" and "Distance from Top".
You can also change the size of the badge so if you want to fit some text on - make it bigger.

Now you have the badge you want, now it is time to change the text that appears inside of it.

Text On Badge - Add the text you want to be shown - for example, it could be "New".
After this, there are some settings to change the appearance of the badges such as colour and font size.

Add a badge to your product when the price is set to 0.

First, go to BodyCommerce > Sale/New/Free Badge and enable the option "Enable Improved Free Badge?".
Choose one of our predefined SVG sale badges (below is a screenshot of the available ones as per the date of this document).
Change the colours of the badge using our settings (primary, secondary and quarternary colours).
Next, choose the position you want the badge in relation to the featured image (right or left-hand side).
Once you have done this you can now fine-tune the position by moving it away from the edge and top in relation to where it is. "Distance from Edge" and "Distance from Top".
You can also change the size of the badge so if you want to fit some text on - make it bigger.

Now you have the badge you want, now it is time to change the text that appears inside of it.

Text On Badge - Add the text you want to be shown - for example , it could be "FREE".
After this, there are some settings to change the appearance of the badges such as colour and font size.

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.