In the Design tab, you can configure how the free shipping bar, progress bar display on the front end.
Go to Woo Free Shipping Bar > Design.
1. Small Progress bar: Enable to show progress bar at bottom Cart page, Checkout page, or single product page. The small progress bar will replace the free shipping bar, so when this bar is enabled, on single product/Cart/Checkout page, customer will see it instead of free shipping bar.
a. Position on Cart page: Select position for the bar on Cart page
b. Position on Checkout page: Select position for the bar on Checkout page
c. Show on single product page: Enable to show the bar on single product page below “Add to cart” button
2. Show in Menu cart: Enable to display the progress bar on the menu cart on the front end.
3. Position on mini cart: There are 2 positions you can choose to display the progress bar on the mini cart: at the top or at the bottom.
These settings help you to design the font size, text color…of the shipping bar.
4. Background color: Set the background color of the free shipping bar.
5. Text color: Set the text color of the free shipping bar.
6. Link color: Set the link color of the free shipping bar.
7. Small bar Text Color: Option text color for mini shipping bar.
8. Small bar Link Color: Option link color for mini shipping bar.
9. Font-Family: Set font-family of the free shipping bar.
10. Font-Size: Set font-family of the free shipping bar.
11. Text Align: Select the position of the text messages on the free shipping bar: Center or left.
12. Enable Progress: The progress bar is tied with the shipping bar to reflect the purchasing process to reach free shipping, enable this option if you want to use this feature.
a. Progress Background Color: Select general background color for the progress
b. Current Progress Background Color: Background color that shows the status of how the customer is about to get free shipping
c. Progress Text Color: Text color on the bar (percentage number)
d. Font-Size Progress Bar: Font size of the text above
e. Progress Bar Effect: Select progress bar effect
13. Style: Select a position of the progress bar with 3 styles available
14. Position: Select to display the progress bar on the top or at the bottom.
15. Gift Icon: Use an icon to open the free shipping bar. If “Custom Image” is selected, add your own image in the 15.a below
a. Custom Icon: Add your own image and make it the gift icon
16. Custom CSS: Design how the progress bar and shipping bar display on the front end.