WPBakery allows designers to add custom CSS to individual rows, columns, and elements, giving fine-grained control over the appearance of specific sections. This feature is powerful for creating unique designs without writing extensive custom stylesheets. However, sometimes the custom CSS appears to work perfectly in the WPBakery editor preview but has absolutely no effect on the live frontend, leaving the website looking different from what was designed.
This problem can be particularly frustrating because the CSS code is clearly correct and works in the editor, but the frontend ignores it completely. The custom CSS may have worked previously and suddenly stopped working after a plugin update, or it may work on some pages but not on others. Understanding why WPBakery custom CSS fails on the frontend is essential for designers who rely on this feature for unique styling.
The most common cause of this problem is that a caching plugin is serving an old version of the CSS file that does not include the custom CSS. Another cause is that the CSS selector specificity is too low, and the theme’s CSS is overriding the custom styles. The custom CSS may also be placed in a location that loads after the theme CSS, causing it to be overwritten by more specific rules.
Why WPBakery custom CSS fails on the frontend
WPBakery stores custom CSS in the database and outputs it in the page head or in a combined CSS file. When a caching plugin is active, it may serve an old version of the page that does not include the newly added custom CSS. The editor preview bypasses the cache, which explains why the CSS works in the editor but not on the frontend. Clearing all caches after adding custom CSS is essential for ensuring it appears on the live website.
Another common cause is that the custom CSS selector does not have enough specificity to override the theme’s default styles. The theme may use very specific selectors with IDs or multiple classes, while the custom CSS may use a simple class selector. When two CSS rules apply to the same element, the one with higher specificity wins. Increasing the specificity of the custom CSS selector (by adding an ID or more classes) usually resolves this issue.
The order in which CSS files load can also affect whether custom CSS is applied. If the theme CSS loads after the WPBakery CSS, the theme styles will override the custom styles regardless of specificity. Ensuring that WPBakery CSS loads after the theme CSS or using the !important flag in the custom CSS can resolve order-related issues, though !important should be used sparingly because it makes future overrides more difficult.
How to check if custom CSS is being output on the frontend
Open the frontend of the website in a web browser and open the developer tools by pressing F12. Navigate to the Elements tab and inspect the element that should have custom CSS applied. Look for the CSS rules that apply to that element in the Styles panel. Search for the custom CSS selector to see if it appears in the list of applied rules. If the custom CSS does not appear at all, the CSS is not being output on the page. If it appears but is crossed out, another rule with higher specificity is overriding it.
Step by step guide to fixing WPBakery custom CSS problems
Follow these steps in order to restore custom CSS functionality in WPBakery. Start with the simplest solutions before moving to more advanced troubleshooting steps.
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Add the !important flag to the custom CSS to override theme styles temporarily
- Increase the specificity of the CSS selector by adding an ID or more classes
- Check that the custom CSS is not being minified or stripped by optimization plugins
- Disable all caching plugins temporarily to test if they cause the problem
- Move the custom CSS to the theme’s custom CSS section instead of WPBakery
- Check that the custom CSS is valid and does not contain syntax errors
- Update WPBakery to the latest version available from the official website
- Use the browser developer tools to identify which CSS rule is overriding the custom style
- Contact WPBakery support with specific examples of custom CSS that is not working
How to increase CSS specificity for WPBakery custom styles
Instead of using a simple class selector like .my-class, use a more specific selector that includes the page or post ID. For example, if the custom CSS is for a specific page, use #page-id .my-class as the selector. You can find the page ID in the URL when editing the page in the WordPress admin. For global styles that should apply across the website, use body .my-class to increase specificity over theme defaults.
WPBakery custom CSS troubleshooting reference table
Here is a reference table for diagnosing custom CSS problems in WPBakery based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution | Custom CSS works in editor but not on frontend | Caching plugin serving old version of the page | Clear all caches and exclude page from caching | Custom CSS appears in source but has no effect | Theme CSS has higher specificity | Increase selector specificity or use !important | Custom CSS works on some pages but not others | Page-specific CSS loading order issues | Check individual pages for theme or plugin CSS overrides | Custom CSS stops working after theme update | Theme CSS changed and now overrides custom styles | Review theme changes and adjust CSS specificity |
|---|
For more information about WPBakery custom CSS, visit the WPBakery page on wpwizzy.com.
Preventing WPBakery custom CSS problems in the future
Clear all caches immediately after adding or modifying custom CSS in WPBakery to ensure the changes appear on the frontend. Use specific CSS selectors that include IDs or unique classes to avoid conflicts with theme styles. Document any custom CSS that uses !important flags for future reference, and regularly review custom CSS after theme or plugin updates to catch specificity conflicts early.
Consider moving extensive custom CSS to the theme’s custom CSS section or a child theme stylesheet for better control over loading order. Use a staging website to test custom CSS changes before applying them to the live production site, and keep WPBakery and all other plugins updated to their latest versions on a regular schedule. Use browser developer tools to inspect CSS specificity conflicts when custom styles are not being applied as expected.