Introduction
Many users face problems with the WoodMart promo banner in Elementor. Sometimes the banner does not display correctly, disappears on mobile, or ignores color and background settings. If your WoodMart promo banner is not working as expected, you are not alone — this issue is quite common.
In this guide, we’ll explain why the promo banner fails in WoodMart + Elementor and provide a simple CSS fix to solve it.
WoodMart Promo Banner Issue
When using WoodMart theme with Elementor, the promo banner widget may show one or more of these problems:
-
WoodMart promo banner not showing at all
-
Promo banner not working on mobile view
-
Background color or text color not updating in Elementor
-
Banner hidden with display: none !important
-
Elementor styling overridden by WoodMart internal CSS
These errors confuse many users because the banner looks fine in Elementor editor but breaks on the live website.
Why Does This Happen?
The problem is caused by internal CSS generated by WoodMart. The theme injects a <style> tag into the page with forced styles such as:
Because of the !important flag, Elementor’s custom styles cannot apply to the WoodMart promo banner.
The Solution of WoodMart Promo Banner Issue
To fix the WoodMart promo banner not working issue, you need to override the theme’s internal CSS with your own custom code.
Add the following CSS snippet:
Where to Add This CSS
You can place the override in:
-
Appearance > Customize > Additional CSS
-
Elementor Site Settings > Custom CSS
-
Your child theme’s style.css file
Alternative Fix (More Specific Selector)
If you only want to target WoodMart promo banner and avoid conflicts with other elements, you can use:
Final Thoughts
The WoodMart promo banner issue is caused by internal CSS that uses !important, blocking Elementor’s styling. By adding a simple override, you can fix the problem instantly.
If your WoodMart promo banner is not showing on mobile or looks broken on desktop, this solution will restore full control of design back to Elementor.
