Where to find the free shipping bar color settings
The free shipping bar in Woodmart appears at the top of your store and shows customers how much more they need to spend to may have access to for free shipping. To change its color, you need to access the Woodmart theme customizer, which is built into WordPress. Log in to your WordPress dashboard, then go to Appearance and click Customize.
Once the customizer opens, look for a section called Woodmart Settings or Header depending on your Woodmart version. The free shipping bar color controls are usually grouped with other header and top bar options. If you don't see them immediately, use the search function at the top of the customizer panel and type "shipping bar" to jump directly to the right section.
Key Takeaways
- The free shipping bar color settings are in Appearance > Customize within your WordPress dashboard, under Woodmart Settings or Header sections.
- You can change the bar background color, text color, and progress bar color separately to match your store's design.
- Changes you make in the customizer show up live on your site as you adjust them, so you can see the result before saving.
- If the free shipping bar does not appear on your site, check that the WooCommerce plugin is installed and that you have set a free shipping threshold in your shipping settings.
Changing the background color of the shipping bar
In the customizer, find the option labeled Free Shipping Bar Background Color or Top Bar Background Color. Click on the color field to open the color picker. You can either type a hex color code directly (like #FF5733) or use the color wheel to select your color visually.
As you change the color, you will see the update happen in real time on your site preview on the right side of the screen. This lets you test whether the new color works with your overall design before you commit to it. If you want to go back to the default color, look for a reset button next to the color field.
Adjusting the text color on the shipping bar
The text that appears on the shipping bar (like "Free shipping for orders over $50") needs to be readable against your background color. Find the option for Free Shipping Bar Text Color or Top Bar Text Color and click to open the color picker.
Choose a color with enough contrast so customers can read the message easily. If your background is dark, use a light text color like white or light gray. If your background is light, use dark text. The live preview will show you immediately whether the combination is readable.
Customizing the progress bar color
The progress bar is the visual indicator that fills up as customers add items to their cart and get closer to the free shipping threshold. This element often has its own color setting separate from the background and text. Look for Free Shipping Progress Bar Color or Progress Bar Fill Color in the customizer.
Choose a color that stands out from both the background and the unfilled portion of the bar so customers can see their progress clearly. Many stores use a bright accent color like green or blue to make the progress bar pop. Test your choice in the live preview to make sure it is visible and matches your brand.
Saving your color changes
Once you are happy with how the shipping bar looks, click the Publish button at the top of the customizer panel. This saves all your color changes to your live site. The button will turn gray briefly while WordPress saves, then return to normal.
If you change your mind after publishing, you can go back into Appearance > Customize at any time and adjust the colors again. Your changes take effect immediately on the front end of your store, so customers will see the new colors the next time they visit.
What to do if the shipping bar does not appear
If you do not see a free shipping bar on your site even after adjusting colors, the bar may be disabled or not set up yet. First, check that you have WooCommerce installed and activated. Then go to WooCommerce > Settings > Shipping and make sure you have created at least one shipping method with a free shipping threshold.
In Woodmart settings, there is usually a toggle to turn the free shipping bar on or off. Look in Appearance > Customize under the header or top bar section for an option like Enable Free Shipping Bar or Show Shipping Threshold. Turn this on if it is currently off, and the bar should appear at the top of your store.
Troubleshooting color changes that do not show up
Sometimes color changes do not appear on your live site right away because of browser caching. This means your browser is showing you an old version of the page. Clear your browser cache by pressing Ctrl+Shift+Delete (Windows) or Command+Shift+Delete (Mac), then select the option to clear cached images and files. Reload your store and the new colors should appear.
If you are still not seeing the changes, check that you clicked Publish in the customizer and that the button confirmed the save. You can also try logging out and viewing your store in an incognito or private browser window, which does not use cached files. If the colors appear correctly there, the issue was your browser cache.
Frequently Asked Questions
Can I use different colors for the shipping bar on different pages?
The Woodmart customizer applies the same shipping bar colors across your entire store. If you want different colors on specific pages, you would need to use custom CSS code or a page builder plugin. For most stores, keeping the shipping bar consistent helps with brand recognition.
What hex color codes work best for a shipping bar?
Choose colors with high contrast to the background. Popular choices are bright greens (#00AA00), blues (#0066CC), or oranges (#FF6600) for the progress bar, paired with white or dark gray text on a neutral background. Test your choices in the live preview to see what looks best for your brand.
Does changing the shipping bar color affect how it works on mobile?
No, color changes only affect the appearance. The shipping bar functions the same way on mobile and desktop. However, make sure your colors are readable on smaller screens by testing your store on a phone or tablet after you publish your changes.
Can I hide the shipping bar for certain customer groups?
The standard Woodmart customizer does not have built-in options to hide the bar for specific groups. You would need to use custom code or a conditional display plugin to show or hide the bar based on customer type, location, or other factors.
What if my shipping bar colors look different on my phone than on my computer?
This usually happens because of how different devices display colors or because of browser caching on your phone. Clear your phone's browser cache, close the browser completely, and reload your store. If the colors still look different, the issue may be your phone's display settings rather than your store's code.