How to Adjust the Color of the Free Shipping Bar in WoodMart Theme
The free shipping bar in WoodMart is one of those small UI elements that carries surprising visual weight. It sits at the top of your store, often the first thing a visitor sees — which means its color directly affects how well it blends with (or stands out from) your brand identity. Adjusting it sounds simple, but the actual path depends on which version of WoodMart you're running and how your theme options are structured.
What the Free Shipping Bar Actually Is
WoodMart's free shipping bar is a progress notification strip — typically displayed in the header or as a sticky top bar — that shows customers how much more they need to spend to qualify for free shipping. It's a conversion tool built directly into the theme, not a third-party plugin.
Because it's native to WoodMart, its color settings live inside the theme's own customization layer rather than in WooCommerce settings or a standalone plugin panel. That's important to understand before you go digging in the wrong place.
Where to Find the Color Settings 🎨
WoodMart gives you two primary paths to adjust the shipping bar's color:
1. The WordPress Customizer
Navigate to Appearance → Customize in your WordPress dashboard. Inside the Customizer, look for a section labeled "Header" or "Top Bar." Depending on your WoodMart version, the free shipping bar may sit under:
- Header → Free Shipping Bar
- Top Panel → Free Shipping Progress Bar
Once inside that section, you'll typically find direct color pickers for:
- Background color of the bar
- Text color for the progress message
- Progress fill color (the active portion of the bar that advances as cart value increases)
- Icon or accent color (in some versions)
Changes preview in real time in the Customizer, so you can compare colors against your header and hero section before saving.
2. WoodMart Theme Options Panel
Some WoodMart configurations route visual settings through the WoodMart → Theme Options panel rather than the native Customizer. This is common in setups using the XStore/WoodMart options framework. Here you'd navigate to:
WoodMart → Theme Options → Header → Free Shipping Bar
The controls are functionally the same — color pickers, hex input fields, and sometimes opacity sliders — but the interface looks different from the standard WordPress Customizer.
Variables That Affect How Color Changes Behave
Not every WoodMart installation behaves identically. Several factors determine what you'll actually see and how the colors render:
| Variable | Why It Matters |
|---|---|
| WoodMart version | Older versions (pre-6.x) have different panel structures than newer ones |
| Active child theme | A child theme may override shipping bar styles via style.css |
| Custom CSS already applied | Existing inline or enqueued CSS can override Customizer values |
| Page builder in use | Elementor or WPBakery header templates may bypass theme color settings entirely |
| Caching plugins | Cached stylesheets may prevent color changes from appearing immediately |
If you change a color in the Customizer and don't see the update reflected on the front end, clearing your cache (both server-side and any CDN layers) is typically the first diagnostic step.
Adjusting Colors via Custom CSS
When the built-in controls don't give you fine-grained enough control — or if a child theme or builder template is overriding the defaults — Custom CSS is the reliable fallback.
In the Customizer, go to Additional CSS and target the shipping bar's wrapper element. The relevant classes in WoodMart typically follow patterns like:
.wd-header-free-shipping { background-color: #your-hex-code; color: #your-text-color; } .wd-free-shipping-progress-bar span { background-color: #your-fill-color; } The exact class names can vary slightly between WoodMart releases, so using your browser's Inspect Element tool to identify the live class names on your specific installation is more reliable than relying on any static reference. Right-click the shipping bar on your storefront, select "Inspect," and look at the element's class attributes directly.
When You're Using a Header Builder 🔧
WoodMart includes a Header Builder that lets you construct custom header layouts using drag-and-drop elements. If your free shipping bar is placed as a Header Builder element rather than the default top bar, its color controls may live inside the Header Builder itself — not the Customizer or Theme Options.
In that case:
- Go to WoodMart → Headers
- Edit the active header template
- Click directly on the free shipping bar element within the builder canvas
- Look for style or color settings in the element's right-hand panel
This is a common source of confusion: users search the Customizer but the element is actually controlled inside the Header Builder template.
How Different Store Setups Lead to Different Paths
A store running a default WoodMart header with no page builder involvement will almost always find the color controls exactly where the documentation says — inside Customizer or Theme Options. A store that has been heavily customized with a custom header template, child theme overrides, or Elementor-built headers may find that the standard controls have no visible effect, and CSS-level adjustments become necessary.
The distinction between these two scenarios — standard setup vs. customized stack — is what determines whether a two-minute Customizer tweak will solve the problem or whether you're looking at CSS inspection and override work. Which situation applies to your store comes down to how your specific WoodMart installation was built and maintained over time.