The free shipping bar color lives in Woodmart's theme customizer
The free shipping bar in Woodmart theme — the banner that appears at the top of your store to show customers how much more they need to spend for free shipping — gets its color from the theme's built-in customizer, not from editing code. You reach it through your WordPress dashboard under Appearance > Customize, then navigate to the section labeled "Free Shipping Bar" or sometimes "Shop" depending on your Woodmart version.
The color you set here controls both the background of the bar and sometimes the text color, depending on which setting you adjust. Most stores change the background to match their brand colors or to make the bar stand out more against the page background.
Key Takeaways
- Open the WordPress customizer by going to Appearance > Customize in your dashboard, then search for "Free Shipping Bar" or look under the Shop section.
- The background color and text color are usually separate settings, so you can adjust them independently to match your brand.
- 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 you cannot find the Free Shipping Bar section, your Woodmart version may be older — check the theme documentation or update to the latest version.
Finding the free shipping bar settings in the customizer
Log into your WordPress dashboard and click Appearance in the left menu, then click Customize. This opens the theme customizer in a split-screen view where you can see your site on the right and settings on the left.
In the left panel, look for a section called "Free Shipping Bar" or "Shop Settings." If you do not see it when ready, use the search box at the top of the settings panel and type "free shipping." The customizer will highlight the matching section and take you directly to it. Once you are in that section, you should see color picker fields for the bar background and text.
Changing the background color of the bar
Click on the color field next to "Free Shipping Bar Background Color" or similar wording. A color picker will open, showing either a color wheel or a palette of preset colors depending on your WordPress version. You can click any color in the palette, or click the text field at the bottom and type a hex color code (like #FF5733) if you know the exact color you want.
As soon as you select a color, the bar on your live site preview updates when ready. This lets you see whether the new color works with your site design before you save. If the color is too dark or too light, try again — there is no penalty for changing it multiple times while you are still in the customizer.
Adjusting the text color for readability
The text inside the free shipping bar — the words telling customers how much more they need to spend — also needs a color. Look for a setting called "Free Shipping Bar Text Color" or "Free Shipping Bar Font Color." Click that color field and choose a color that contrasts well with your background color.
If your background is dark, use white or a very light color for text. If your background is light, use black or a dark color. The goal is to make sure customers can read the message easily. Test this on your live preview before saving, especially on a mobile phone screen where the bar may be narrower.
Saving your changes and checking them live
Once you are happy with both the background and text colors, click the "Publish" button at the top of the customizer panel. This saves your changes to your live site. The button usually turns blue or shows a checkmark when the save is complete.
After publishing, close the customizer and visit your store's homepage or product pages to see the free shipping bar in its normal state. The colors should match what you saw in the preview. If they do not, go back into the customizer and adjust again — changes are never permanent until you publish.
What to do if the free shipping bar section does not appear
Some older versions of Woodmart do not have a dedicated Free Shipping Bar section in the customizer. If you cannot find it after searching, check whether your theme is up to date. Go to Appearance > Themes, find Woodmart, and look for an "Update" button. If one appears, click it to update to the latest version, which may include the free shipping bar customizer section.
If updating does not add the section, the free shipping bar color may be controlled through a plugin instead of the theme itself. Check your Plugins menu to see whether you have a free shipping plugin installed, and look for its settings. Some stores use WooCommerce's built-in free shipping feature, which does not always have a visible bar — in that case, you may need to install a separate free shipping bar plugin to get the banner at all.
Using hex color codes for exact brand colors
If your brand has a specific color — for example, your logo uses a particular shade of blue — you can match it exactly by using the hex code. Most design tools and brand guidelines include the hex code for brand colors. It looks like a # symbol followed by six letters or numbers, such as #2E86AB.
In the color picker, look for a text field (usually at the bottom) where you can paste or type the hex code directly. This is faster and more accurate than trying to match the color by eye using the color wheel. After you paste the code, press Enter or click outside the field, and the color picker updates to show your exact color.
Frequently Asked Questions
Can I make the free shipping bar a different color on mobile than on desktop?
The Woodmart customizer does not have separate mobile and desktop color settings for the free shipping bar. The color you set applies to all screen sizes. If you need different colors for different devices, you would need to add custom CSS code through a child theme or custom CSS plugin, which requires coding knowledge.
What if the text color does not change when I adjust it?
Some Woodmart versions use the text color from your site's general font settings instead of a separate bar text color. Try changing your site's body text color in Customizer > Colors or Typography, then check whether the bar text updates. If it does not, the bar may be using a fixed color that requires custom CSS to override.
Does changing the free shipping bar color affect anything else on my site?
No. The free shipping bar color settings only control that specific bar. Other elements like buttons, links, or headers use their own separate color settings in the customizer, so adjusting the bar will not change them.
How do I know if my text color has enough contrast?
A straightforward test is to look at your site on a phone in bright sunlight. If you can read the text easily, the contrast is probably good. For a technical check, use a free contrast checker tool online — search "WCAG contrast checker" — and paste your background and text hex codes. It will tell you whether the contrast meets accessibility standards.
Can I add a border or shadow to the free shipping bar?
The basic customizer settings only control color. Adding borders or shadows requires custom CSS. You can add this through Appearance > Customize > Additional CSS, or by using a custom CSS plugin. The exact code depends on how Woodmart structures the bar in HTML, so check the Woodmart documentation or support forum for the correct CSS selectors.