Showing a Free Shipping Notice in the Progress Bar

Shipping costs are one of the top reasons for cart abandonment in e-commerce. This tutorial shows how to create a dynamic progress bar that motivates customers to reach the free shipping threshold. Instead of paying for shipping, users are encouraged to add more to their cart to qualify.

Here, we’ll uncover how to create a dynamic free shipping progress bar for your WooCommerce site using JetWooBuilder templates and JetEngine functionality.

Create a JetEngine SQL Query

Go to WordPress Dashboard > JetEngine > Query Builder and press the “Add New” button.

Type the query Name and select the “SQL/AI Query” Query Type in the General Settings section.

Then, scroll down to the Custom SQL Query section and set the “postmeta” option in the From table dropdown.

Next, push the “Add new” button under the Where (query clauses) text to add a repeater item, where such options should be set:

• Column — here, select the “meta_key” option;
• Compare — choose the “Equal (=)” option from this dropdown;
• Value — enter the “_price” value into this field;
• Type — keep this field empty.

Press the  “Add new” button one more time and set such options in the next repeater item:

• Column — here, select the “post_id” option;
• Compare — choose the “In the list” option from this dropdown;
• Value — press the “database” icon near this field and pick the “WC Products in Cart” macro;
• Type — keep this field empty.

Together, these query clauses collect the prices of products currently in the cart.

After all modifications, click the “Add/Update Query” button.

Add the Progress Bar Widget

Open any page or template where you want to display a progress bar for the free shipping. In our case, it will be the Cart Page Template created in the Elementor editor. Preliminary, we add a product to the cart.

Drag-n-drop the Progress Bar widget to the page from the JetElements plugin.

Here, we adjust such settings:

• Type — here, we keep the “Inside the bar” option;
• Title — we change it to “Free Shipping”;
• Progress Values Type — we choose the “Absolute” option from this dropdown;
• Current Value — we press the “Dynamic Tags” button and select the “Dynamic Function” tag from the JetEngine section;
• Max Value — we change it to “50”;
• Value Prefix — here, we enter the “$” sign;
• Value Prefix — we leave this field empty.

You can customize the widget settings according to your needs, except for the Current Value, where the chosen dynamic tag is required.

If you click the “Dynamic Function” tag, a pop-up appears with such options:

• Function — select the “SQL query results” option from this dropdown;
• Query Column — here, choose “meta_value”;
• Additional Function — here, select “Sum”.

Additionally, you can alter the style settings for this widget.

As an example, we also use the JetEngine Dynamic Visibility feature to customize certain elements related to the progress bar.

We add the Heading widget with the “Congrats! You have earned free shipping to the US!” text, open the Advanced settings tab, and unroll the Dynamic Visibility tab.

Here, we activate the Enable toggle and select “Show element if condition met” in the Visibility condition type dropdown.

We pick the “Greater or Equal” Condition, press the “Dynamic Tags” button near the Field, select the “Dynamic Function” tag (the settings for it are the same as for the Progress Bar widget), and type “50” into the Value textarea.

In this way, the custom text will be displayed after a buyer adds more than $50 worth of products to the cart.

The Progress Bar widget can be hidden after the needed amount is reached by setting a similar condition for it.

After all modifications, press the “Publish” button.

Set the Free Shipping

To solve this, you can proceed to the How to add WooCommerce Free Shipping Over Amount video or the WooCommerce Free Shipping documentation.

We unroll the WordPress Dashboard > WooCommerce > Settings > Shipping tab, where we added the “Flat rate” shipping method with a Cost of “$5”.

Here, we press the “Add shipping method” button, select the “Free shipping” option from the pop-up, and hit the “Continue” button.

In the second pop-up step, we choose the “A minimum order amount” option from the Free shipping requires dropdown and set the Minimum order amount to “$50”. The same sum is set in the Max Value field of the Progress Bar widget.

Then, we press the “Create and save” button.

Check the Results

We open the Cart page on the front end, where one product is added, costing $20. For now, only the “Flat rate” shipping method is available, which adds $5 to the total price. Also, the progress bar shows “$20/50”.

Then we add several more products to the cart, so the total price is over $50. The free shipping progress bar is achieved, and the confirmation message is displayed. Also, the “Free shipping” option appeared in the Order Details section.

That’s all. Now you know how to create a dynamic free shipping progress bar for your WooCommerce site using JetWooBuilder templates and JetEngine functionality.