Help Center

How to Add Sale and Best Seller Badges to WooCommerce Products

How to Add Sale and Best Seller Badges to WooCommerce Products

This tutorial details how to add badges with texts to WooCommerce Product listings and apply the Dynamic Visibility conditions for their displaying refer to product options. It uses the dynamic tags of the JetEngine tools to get WooCommerce data.

Before you start check tutorial requirements:

  • Elementor (Free version)

  • WooCommerce plugin installed and activated

  • JetEngine plugin installed and activated with WooCommerce Products Listings with the Dynamic Tags created. If you have not done it yet, please, read the tutorial

Adding the Heading Widget

Navigate to the JetEngine > Listings tab and open the listing template with applied dynamic tags (here, Products_listing_items). Open the listing template and drag and drop the Heading widget where needed to place a badge. 

If you want to put it at the top of the item, add the Inner Section widget previously.

adding heading widget

Creating the Sale Badge

Add the text to the badge (here, Sale!) to the Title field and select the span option as an HTML tag of the badge.

heading widget settings

Navigate to the Advanced settings of the widget.

Unroll the Dynamic Visibility settings and move the Enable toggle.

Select the Show element if condition met option from the Visibility condition type drop-down menu. 

Select the Exist option from the Conditions drop-down menu.

Press the Dynamic Tag and select the WooCommerce Product Field option from the Field drop-down menu. Thus the Setting field turns on: select the Plain Sale Price option from the drop-down menu.

dynamic visibility settings of heading widget

Apply the custom style settings to the badge.

style settings of heading widget

Press the “Update” button to save changes.

Update the page with the applied Listing Grid widget.

frontend of badges applied

Adding the Best Seller Badge

To add another badge (i.e., the Best Seller), duplicate the Heading widget: click the right button of your mouse on the widget and select the Duplicate option.

duplication of widgets

Edit the following settings to the duplicated Heading widget.

  • type the text you need into the Title field (here, Best Seller);
  • apply the stylish options to the widget appearance;
  • unroll the Dynamic Visibility settings of the Advanced setting tab and type the condition for classifying the WooCommerce product as a bestseller. Select the Greater than option from the Condition settings for the best seller badge and type the number of sales in the Value field (here, five).
greater than condition settings

Press the “Update” button to save changes. Update the page with the applied Listing Grid widget. The page on the front end looks as follows:

front end of woocommerce badges

That’s all about adding badges to WooCommerce products.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.