User documentation: Free shipping notification bar

Basic setting

Enable Free shipping notification

This setting allows you to enable or disable the free shipping notification bar on your WooCommerce store. When enabled, customers will see a notification bar informing them how much more they need to spend to qualify for free shipping.

Example: If enabled, a customer with $30 in their cart and a $50 free shipping threshold will see a message like “Add $20 more to get free shipping!”

Select a default shipping zone

Choose the default shipping zone for which the free shipping notification should be displayed. Only zones with free shipping enabled and a minimum order amount or coupon condition will be listed.

Until user adds a address and get assigned to a zone, user will see the notification bar as per that zone.

Add notification bar using shortcode [free_shipping_notification]

Enable this option to add the notification bar using the shortcode [free_shipping_notification]. This is useful if you want to place the bar in a custom location. Note: Bar position options in the design tab will not work when using the shortcode.

Don’t show notification till Zone is selected

If enabled, the notification bar will not be shown until the customer’s shipping zone is detected or selected. This prevents showing incorrect information before the zone is known.

Example: If a customer’s location cannot be detected, the bar will remain hidden until they select a shipping zone by adding the address.

Disable for mobile

Enable this option to hide the notification bar on mobile devices. Useful if you want to keep the mobile interface clean.

Example: Customers browsing on phones will not see the notification bar if this is enabled.

Mobile breakpoint in PX (pixels)

Set the pixel width at which the notification bar is considered to be on a mobile device. Devices with a screen width less than this value will be treated as mobile.

Example: If set to 768px, devices with a width less than 768px will not show the bar if mobile is disabled.

Show close option

Enable this to display a close button on the notification bar, allowing users to dismiss it.

Example: A small “X” appears on the bar for users to close it.

Bar closing button behaviour

Choose how the close button behaves. “Normal” closes the bar temporarily; “Close completely” prevents it from reopening for that user across the site.

Example: If “Close completely” is selected, once a user closes the bar, it won’t reappear for them.

Show the Free shipping bar continues

Enable this to keep the notification bar visible at all times, rather than hiding it after a few seconds.

Example: The bar stays on the page until the user closes it.

How long to show (unit in seconds)

Set the number of seconds the notification bar should remain visible after the page loads. Only applies if the bar is not set to show continuously.

Example: If set to 6, the bar will disappear 6 seconds after page load.

Shipping icon

Upload an image to be used as the shipping icon in the notification bar message. You can insert it using the shortcode {icon} in your message.

Example: A truck icon appears next to the notification message.

Ignore virtual product from minimum amount for free shipping

Enable this to exclude the cost of virtual products (like downloads) from the minimum amount calculation for free shipping eligibility.

Example: If a customer buys a $20 virtual product and a $30 physical product, only the $30 counts toward free shipping.

When FREE shipping method available

Choose whether to hide other shipping methods when free shipping is available. Options include hiding all methods, showing only local pickup and free shipping, or not hiding any methods.

Example: If “Hide all” is selected, only free shipping is shown when it’s available.

Show circular progress bar at footer

Enable this to display a circular progress bar at the footer when the top notification bar is closed. It visually shows progress toward free shipping.

Example: A circular bar at the bottom of the page fills up as the cart total increases.

Change image inside circular progress image

Upload an image to be displayed inside the circular progress bar at the footer.

Example: A truck icon appears inside the circular progress indicator.

Set the Diameter

Specify the diameter (in pixels) of the circular progress bar shown at the bottom of the page.

Example: If set to 70, the circular bar will be 70px wide.

Show linear progress inside the notification bar

Enable this to show a linear progress bar inside the notification bar, indicating how close the customer is to qualifying for free shipping.

Example: A horizontal bar fills up as the cart total increases.

Progress line color

Set the color of the linear progress bar inside the notification bar.

Example: Change the progress bar to red, green, or any color you prefer.

Progress line background color

Set the background color of the linear progress bar inside the notification bar.

Example: The area behind the progress bar can be set to grey or another color.

Select progress bar thickness

Choose the thickness (in pixels) of the linear progress bar inside the notification bar.

Example: Select “6 px” for a medium-thick progress bar.

Show notification to user of specific role

Select which user roles should see the notification bar. Leave blank to show it to all users, or select specific roles to restrict visibility.

Example: Show the notification only to “Customer” and “Subscriber” roles.

Enable debugging

Enable this to log debug information in WooCommerce > Stats > Logs. Useful for troubleshooting plugin issues.

Example: If you encounter problems, enable debugging and check the logs for details.

Cart & Checkout

Show free shipping notification in cart subtotal area

This setting enables or disables the display of the free shipping notification bar within the cart subtotal section. When activated, customers will see a progress bar indicating how much more they need to purchase to qualify for free shipping, directly in the cart area.

Example: If enabled, a bar appears below the cart subtotal saying “Spend $20 more to get free shipping.”

Position on the cart page

This option lets you choose where the free shipping notification bar appears on the cart page. You can select to show it before or after the shipping block. Note: If your cart page uses WooCommerce blocks, the bar will always appear below the shipping method, and this position setting will not apply.

Example: Select “Before shipping block” to show the notification above the shipping options.

Show free shipping notification in checkout subtotal area

This setting enables or disables the free shipping notification bar in the checkout subtotal section. When enabled, customers will see their progress toward free shipping during checkout.

Example: If enabled, a bar appears in the checkout summary saying “Add $10 more for free shipping.”

Position on the checkout page

This option allows you to choose where the notification bar appears on the checkout page—either before or after the shipping block. For block-based checkout pages, the bar will always be shown below the shipping method, regardless of this setting.

Example: Select “After shipping block” to show the notification below the shipping options.

Text shown inside the progress bar

This setting lets you customize the text displayed inside the progress bar. You can use the shortcode {percent} to dynamically show the percentage of the free shipping threshold that the customer has reached.

Example: Set the text to “You are {percent}% closer to free shipping!”

Progress bar background color

This setting allows you to choose the background color of the progress bar, helping you match it to your site’s design or highlight it for better visibility.

Example: Set the color to “#ff0000” for a red progress bar.

Message

When the user has not done any purchase till now

This setting allows you to customize the message shown to users when their cart is empty and they have not made any purchases yet. The message can include dynamic variables such as the minimum order amount required for free shipping and the remaining amount needed.

Example: “Free shipping for order above $50”

When the user has not reached the target amount needed for free shipping (0% to 50%) completion

This setting lets you define the notification message for users whose cart total is between 0% and 50% of the minimum amount required for free shipping. You can use variables like cart total, minimum order, and missing amount to make the message informative.

Example: “You have purchased $20 of $50, Buy $30 worth products more to get the free shipping”

When the user crossed 50% the target amount needed for free shipping (50% to 100%) completion

Use this setting to set the message for users who have crossed 50% of the required amount for free shipping but haven’t reached 100%. This motivates users to complete their purchase to qualify for free shipping.

Example: “You are almost there, Buy $10 worth products more to get the free shipping”

When the user has purchased the required amount

This setting allows you to specify the message shown when the user’s cart total meets or exceeds the minimum amount required for free shipping. You can include a link to the checkout page and use dynamic variables.

Example: “You are now qualified for the Free shipping, go to Checkout“

Message for Free shipping for all without purchase restriction

Set the message displayed when free shipping is available to all users without any minimum purchase requirement. This is a simple notification indicating free shipping is active for everyone.

Example: “Free Shipping”

Don’t show notification bar till coupon is added

This switch controls whether the free shipping notification bar is hidden until the customer adds a free shipping coupon and free shipping is available based on both minimum amount and coupon. Enable this to avoid showing the bar prematurely.

Example: If enabled, the notification bar will only appear after the user enters a valid coupon code.

When the user has not done any purchase till now (minimum amount and coupon)

Customize the message for users with an empty cart when free shipping requires both a minimum order amount and a coupon code. You can use the minimum order variable in your message.

Example: “Free shipping for order above $50 with a coupon code”

When the user has not reached the target amount needed for free shipping (0% to 50%) completion (minimum amount and coupon)

Set the notification for users whose cart total is between 0% and 50% of the required amount, and free shipping requires both a minimum amount and a coupon code. Use variables for cart total, minimum order, and missing amount.

Example: “You have purchased $20 of $50, Buy $30 worth products more and add the coupon code to get the free shipping”

When the user has not reached 50% the target amount needed for free shipping (50% to 100%) completion (minimum amount and coupon)

Define the message for users who have crossed 50% of the required amount for free shipping, but still need to add a coupon code. Use dynamic variables to encourage completion.

Example: “You are almost there, Buy $10 worth products more and add the coupon code to get the free shipping”

When the user has purchased the required amount (minimum amount and coupon)

Set the message shown when the user qualifies for free shipping by meeting both the minimum amount and adding the coupon code. You can include a link to the checkout page and relevant variables.

Example: “You are now qualified for the Free shipping, go to Checkout and add the free shipping coupon code”

Design

Bar position

This setting allows you to choose where the free shipping notification bar will appear on your site. You can select either the top or bottom of the page. This helps ensure the notification is visible to your customers in the most effective location.

Example: If you select “Top”, the notification bar will be displayed at the top of your website pages.

Position of circular progress wheel

This setting lets you decide the location of the circular progress wheel that visually shows the user’s progress towards qualifying for free shipping. You can choose from bottom-right, bottom-left, top-left, or top-right positions.

Example: Selecting “Bottom Right” will display the circular progress wheel in the bottom right corner of the page.

Background color

This setting allows you to set the background color of the notification bar. You can choose any color that matches your website’s design for better integration and visibility.

Example: Setting the color to “#ee6443” will make the notification bar background orange.

Background color when user qualified for free shipping

This setting changes the background color of the notification bar when the user has reached the minimum order amount for free shipping. It helps visually indicate that the user has qualified for free shipping.

Example: If you set this to “#00ff00”, the bar will turn green when the user qualifies for free shipping.

Font color

This setting controls the general font color of the text inside the notification bar. Choose a color that ensures the message is readable against your chosen background.

Example: Setting this to “#ffffff” will make the text white.

Shortcode font color

This setting specifies the font color for text generated by shortcodes, such as {minimum_order} or {cart_total}, within the notification bar.

Example: Setting this to “#000000” will make shortcode text black.

Link color

This setting determines the color of any links included in the notification message. Use a color that stands out and matches your site’s style.

Example: Setting this to “#ffffff” will make all links in the notification bar white.

Close button color

This setting allows you to set the color of the close button on the notification bar, making it easy for users to dismiss the notification.

Example: Setting this to “#ffffff” will make the close button white.

Normal text font weight

This setting controls the font weight (thickness) of the regular text in the notification bar. Options include Normal, Bold, and Lighter.

Example: Selecting “Bold” will make the notification text appear thicker and more prominent.

Shortcode text font weight

This setting adjusts the font weight for text generated by shortcodes in the notification bar, making important values stand out.

Example: Choosing “Bold” will make the {cart_total} value appear bold.

Link text font weight

This setting sets the font weight for any links in the notification bar, helping them stand out or blend in as needed.

Example: Selecting “Normal” will display links with standard font weight.

Close button font weight

This setting controls the font weight of the close button, allowing you to make it more or less prominent.

Example: Choosing “Bold” will make the close button thicker and easier to see.

Normal text font size

This setting lets you specify the font size (in pixels) for regular text in the notification bar, ensuring readability.

Example: Setting this to “16” will display the text at 16px size.

Shortcode text font size

This setting allows you to set the font size for shortcode-generated text in the notification bar, making key values more visible.

Example: Setting this to “18” will make the {minimum_order} value appear larger.

Link text font size

This setting controls the font size of links in the notification bar, helping them stand out or fit your design.

Example: Setting this to “16” will display links at 16px size.

Close button size

This setting specifies the font size (in pixels) of the close button, making it easier for users to interact with the notification bar.

Example: Setting this to “22” will make the close button larger and more noticeable.

Pop up Setting

Enable Free shipping message in popup

This setting allows you to enable or disable the free shipping notification popup. When enabled, users will see a popup informing them about their progress towards qualifying for free shipping whenever they add a product to the cart or update the cart.

Example: If a user adds an item to their cart, a popup appears saying, “Add $10 more to get free shipping!”

Popup background color

This setting lets you choose the background color of the popup. You can select any color to match your site’s design and branding.

Example: Set the background color to light blue (#e0f7fa) for a calming effect.

Popup background color when user qualified for free shipping

This setting allows you to specify a different background color for the popup when the user has qualified for free shipping. It helps visually indicate that the goal has been reached.

Example: Change the background to green (#e6f7e6) when the user qualifies for free shipping.

Popup text color

This setting lets you set the color of the text displayed in the popup. Adjust it for readability and to match your site’s color scheme.

Example: Use dark gray (#333333) for clear, readable text.

Popup canvas background color

This setting controls the background color of the area surrounding the popup box, often referred to as the canvas. It helps the popup stand out or blend in with the rest of the page.

Example: Set the canvas background to black (#000000) to make the popup more prominent.

Popup close button color

This setting allows you to choose the color of the popup’s close button, making it easier for users to find and interact with.

Example: Use a neutral gray (#999999) for the close button to keep it subtle.

Popup Border Radius (in px)

This setting lets you adjust the roundness of the popup’s corners by specifying the border radius in pixels. A higher value results in more rounded corners.

Example: Set the border radius to 12px for gently rounded corners.

Popup Border Width (in px)

This setting allows you to define the thickness of the popup’s border in pixels. Adjusting this can make the popup more or less visually prominent.

Example: Set the border width to 3px for a noticeable border.

Popup Border Color

This setting lets you select the color of the popup’s border, helping it stand out or blend in with the background.

Example: Use a light gray (#dddddd) for a subtle border effect.

Popup Width for desktop (in %)

This setting allows you to set the width of the popup as a percentage of the desktop screen. Adjust it to ensure the popup is neither too small nor too large on desktop devices.

Example: Set the width to 40% so the popup covers less than half the screen.

Popup Width for mobile (in %)

This setting lets you define the popup’s width as a percentage of the mobile screen, ensuring it displays correctly on smaller devices.

Example: Set the width to 90% for a nearly full-width popup on mobile.

Popup closing button behaviour

This setting controls how the popup’s close button behaves. You can choose between closing the popup normally (it will reopen when cart content or shipping zone changes) or keeping it closed for the current page until it is refreshed.

Example: Select “close_for_page” so the popup stays closed until the user refreshes the page.

Show popup on page refresh

This setting determines whether the popup should appear again when the page is refreshed, even if the popup content hasn’t changed since the last display.

Example: Enable this option to show the popup every time the user reloads the cart page.

Control Shipping Bar

Show Free shipping notification on all the pages of a website

This setting enables the free shipping notification bar to be displayed on every page of your website, regardless of the page type. When enabled, users will always see how much more they need to spend to qualify for free shipping.

Example: If a customer is browsing a blog post or the homepage, the notification bar will still appear at the top, showing their progress towards free shipping.

Show on front page of the site (is_front_page)

This option allows you to display the free shipping notification bar specifically on the front page of your site. It is useful if you want to encourage users right from the homepage to add more products to their cart for free shipping.

Example: When a visitor lands on your homepage, they will see the notification bar even if they haven’t started shopping yet.

Show on single product page (is_product)

Enable this setting to show the free shipping notification bar on individual product pages. This helps motivate customers to add more items to their cart while viewing a product.

Example: A customer viewing a t-shirt product page will see the notification bar indicating how much more they need to spend for free shipping.

Show on cart page (is_cart)

This setting displays the free shipping notification bar on the cart page. It is especially useful for reminding customers at checkout how close they are to qualifying for free shipping.

Example: On the cart page, if the cart total is $35 and free shipping is at $50, the bar will show “$15 more for free shipping.”

Show on checkout page (is_checkout)

Enable this to show the notification bar on the checkout page. This can encourage last-minute additions to the cart before completing the purchase.

Example: At checkout, the bar will remind the customer if they are just a few dollars away from free shipping.

Show on shop page (is_shop)

This option displays the free shipping notification bar on the main shop page where all products are listed. It helps keep the free shipping goal visible while customers browse your catalog.

Example: While browsing all products, the notification bar will show the current cart progress towards free shipping.

Show on product category page (is_product_category)

Enable this to show the notification bar on product category pages. This is useful for keeping customers informed while they browse specific categories.

Example: On the “Shoes” category page, the bar will display the remaining amount needed for free shipping.

Show on product tag page (is_product_tag)

This setting displays the notification bar on product tag archive pages. It helps maintain visibility of the free shipping goal when customers browse products by tags.

Example: On the “Summer Sale” tag page, the notification bar will show the free shipping progress.

Disable the free shipping bar on virtual product page

This option disables the free shipping notification bar on pages for virtual products (products that do not require shipping). This prevents confusion for customers purchasing digital goods.

Example: If a customer is viewing an eBook product page, the notification bar will not appear.

Disable the free shipping bar on page

Use this setting to specify page IDs where the free shipping notification bar should not be displayed. Enter the IDs separated by commas to exclude multiple pages.

Example: If you enter “23, 33, 44”, the notification bar will not show on pages with those IDs.