Elementor is a popular page builder plugin for WordPress that allows users to create and customize their website layouts using a drag-and-drop interface. One common issue that users may encounter is when the CSS changes made in Elementor are not updating on the front-end of the website. This can be frustrating, but there are a few steps you can take to troubleshoot and resolve this issue.
First, make sure that you have cleared any caching plugins or services that you may be using. Caching can sometimes cause CSS changes to not appear immediately on the front-end. If you are using a caching plugin like WP Super Cache or W3 Total Cache, go to the plugin settings and clear the cache.
If clearing the cache doesn’t solve the issue, you can try disabling any minification or optimization features that may be enabled in your caching plugin. These features can sometimes interfere with the loading of updated CSS files.
If the issue still persists, it’s possible that the problem lies with the theme or a plugin conflict. To check for conflicts, you can temporarily switch to a default WordPress theme like Twenty Twenty and see if the CSS changes are reflected. If they are, then the issue is likely with your theme. In that case, you may need to reach out to the theme developer for further assistance.
If the CSS changes still don’t appear even with a default theme, you can try disabling other plugins one by one to see if any of them are causing the conflict. Start with any caching or optimization plugins, as mentioned earlier, and then move on to other plugins that may affect the CSS output.
If none of the above steps resolve the issue, you can try manually enqueueing the CSS file in your theme’s functions.php file. This ensures that the CSS file is loaded properly and any changes made to it will be reflected on the front-end. Here’s an example of how you can enqueue a CSS file using the wp_enqueue_style function:
function wpsnippets_enqueue_elementor_css() {
wp_enqueue_style( 'elementor-custom-css', get_stylesheet_directory_uri() . '/path/to/your/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_elementor_css' );
In the code snippet above, replace path/to/your/custom.css with the actual path to your custom CSS file. This code should be added to your theme’s functions.php file.
By following these steps and troubleshooting methods, you should be able to resolve the issue of Elementor CSS not updating on your WordPress website.
Examples
Example 1: Enqueueing CSS file with a version parameter
This use case demonstrates how to enqueue a CSS file in WordPress using the wp_enqueue_style() function with a version parameter. This ensures that the CSS file is updated and not cached by the browser when changes are made.
function wpsnippets_enqueue_custom_css() {
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css' );
In this example, we define a custom function wpsnippets_enqueue_custom_css() that uses wp_enqueue_style() to enqueue a CSS file named custom.css. The version parameter '1.0.0' can be updated whenever changes are made to the CSS file, ensuring that the updated CSS is loaded by the browser.
Example 2: Disabling CSS caching for development purposes
This use case demonstrates how to disable CSS caching in WordPress during development, which can help in troubleshooting issues with Elementor CSS not updating.
function wpsnippets_disable_css_caching() {
if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
add_filter( 'style_loader_src', 'wpsnippets_disable_css_cache', 10, 2 );
}
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_disable_css_caching' );
function wpsnippets_disable_css_cache( $src, $handle ) {
if ( strpos( $src, 'custom.css' ) !== false ) {
$src = add_query_arg( 'ver', time(), $src );
}
return $src;
}
In this example, we define a function wpsnippets_disable_css_caching() that checks if WordPress is in debug mode (WP_DEBUG) and adds a filter to disable CSS caching. The wpsnippets_disable_css_cache() function appends a timestamp as a query parameter to the CSS file URL, forcing the browser to fetch the updated CSS file on each request.
Example 3: Clearing CSS cache using a custom query parameter
This use case demonstrates how to clear the CSS cache by adding a custom query parameter to the CSS file URL. This can be useful when Elementor CSS is not updating due to caching issues.
function wpsnippets_clear_css_cache( $src, $handle ) {
if ( strpos( $src, 'custom.css' ) !== false && isset( $_GET['clear_css_cache'] ) ) {
$src = add_query_arg( 'ver', time(), $src );
}
return $src;
}
add_filter( 'style_loader_src', 'wpsnippets_clear_css_cache', 10, 2 );
In this example, we define a filter wpsnippets_clear_css_cache() that checks if the CSS file URL contains 'custom.css' and if the clear_css_cache query parameter is set. If both conditions are met, a timestamp is added as a query parameter to the CSS file URL, ensuring that the browser fetches the updated CSS file.