Adding Free Shipping Bar to WooCommerce Stores

The WebToffee eCommerce Marketing Automation app allows you to add a dynamic Free Shipping Bar to your WooCommerce store to encourage higher spending. To set this up, go to Forms & Widgets > Widgets in the web app and select the ‘Free shipping bar’ option. Simply enter your goal amount (e.g., $50), customize the bar’s design using real-time variables like ‘remaining spend,’ and click ‘Publish’ to show a sticky or fixed banner that updates automatically as customers add items to their cart. We’ll go through the detailed steps for adding a shipping bar in this article.

• From the marketing dashboard, navigate to Forms & Widgets > Widgets.
• Click the Free shipping bar widget.

This will open the free shipping bar settings page, where you can configure the bar settings and templates.

• On the left of the screen, you’ll find the Bar Settings.
• Under the Bar Settings section, define how your free shipping bar should behave.
  • Goal amount: Enter the minimum cart total required for customers to qualify for free shipping.
    Example: Enter “50” if you offer free shipping for orders above $50. Make sure the goal amount entered here matches the minimum order value you’ve configured for free shipping in your WooCommerce shipping settings.
  • Position: Choose how the bar appears on your site:
    • Fixed – scrolls along with the page content.
    • Sticky – remains visible at all times (recommended).

• Use Targeting options to decide when and where the banner appears.
• You can target:
  • Audience – Display the bar to all visitors, new visitors, or returning visitors.
  • UTM Parameters – Show the banner only when specific UTM parameters are present in the URL.
  • Page URLs – Include or exclude certain pages from displaying the banner.
  • Product category – Limit the banner to products or categories you specify.

This helps you personalize your promotion strategy for different audiences or campaigns.

• If no targeting conditions are set, then the bar will appear across every page in the store.
• Under the Visibility section, decide which devices should display the banner – all devices, desktop, or mobile.

• Click Edit template to enter the template editor.

• Here, you can:
  • Edit the text that appears on the banner by double-clicking on it.
  • Adjust font size, color, and padding.
  • Personalize banner messages using variables like:
    • {{threshold}} – displays the free shipping goal amount.
    • {{remaining}} – shows how much more the customer needs to spend to unlock free shipping.

• Click on the background color, and in the right panel, adjust the height of the bar , choose a custom color or select a predefined template, adjust the alignment and padding, and also add a dismiss button to the banner.

• You can drag and drop additional blocks, like coupons and buttons, into the banner and then configure its settings from the right panel.

• Click on the dismiss icon to access its settings. Adding a dismiss button improves the browsing experience by giving users an option to close the bar.

• Once all configurations are done, click Finish editing.
• Click Publish to make your free shipping bar live on your store.

Your free shipping bar will now automatically update in real time as customers add items to their cart.

The image below shows how the free shipping bar appears to customers on the front end of the store.