If you are using Elementor to build your WordPress website and you encounter issues with custom CSS not working as expected, there are a few troubleshooting steps you can take. One common reason for custom CSS not working in Elementor is due to the CSS being overridden by the theme’s styles. To solve this, you can enqueue your custom CSS using the wp_enqueue_style function and set a high priority for it using the wp_enqueue_scripts action hook. Here’s an example:
function wpsnippets_enqueue_custom_css() {
wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/custom.css', array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css', 9999 );
In the code snippet above, we define a custom function wpsnippets_enqueue_custom_css that uses the wp_enqueue_style function to enqueue our custom CSS file. The file path is set to get_stylesheet_directory_uri() . '/custom.css', but you can change it to the path of your custom CSS file. The 9999 priority ensures that the custom CSS is loaded after the theme’s styles, reducing the chances of it being overridden.
By enqueuing your custom CSS in this way, you ensure that it is loaded properly and has a higher priority than the theme’s styles, allowing it to take effect in Elementor.
Examples
Example 1: Adding Custom CSS to an Elementor Widget
This use case demonstrates how to add custom CSS to an Elementor widget using the elementor/element/print_template_styles action hook.
function wpsnippets_add_custom_css_to_widget() {
echo '<style>
/* Your custom CSS code here */
</style>';
}
add_action( 'elementor/element/print_template_styles', 'wpsnippets_add_custom_css_to_widget' );
In this code example, we define a custom function wpsnippets_add_custom_css_to_widget that echoes the custom CSS code within a <style> tag. We then use the elementor/element/print_template_styles action hook to call this function and add the custom CSS to the widget.
Example 2: Targeting Specific Elementor Widget with Custom CSS
This use case demonstrates how to target a specific Elementor widget with custom CSS by adding a unique CSS class to the widget.
function wpsnippets_add_custom_css_class_to_widget( $widget, $instance ) {
$widget->add_render_attribute( '_wrapper', 'class', 'custom-widget-class' );
}
add_action( 'elementor/widget/before_render_content', 'wpsnippets_add_custom_css_class_to_widget', 10, 2 );
In this code example, we define a custom function wpsnippets_add_custom_css_class_to_widget that adds a CSS class custom-widget-class to the widget using the add_render_attribute method. We then use the elementor/widget/before_render_content action hook to call this function and add the custom CSS class to the widget.
Example 3: Enqueueing Custom CSS File for Elementor
This use case demonstrates how to enqueue a custom CSS file for Elementor using the elementor/frontend/after_enqueue_styles action hook.
function wpsnippets_enqueue_custom_css_file() {
wp_enqueue_style( 'custom-elementor-css', get_stylesheet_directory_uri() . '/custom-elementor.css' );
}
add_action( 'elementor/frontend/after_enqueue_styles', 'wpsnippets_enqueue_custom_css_file' );
In this code example, we define a custom function wpsnippets_enqueue_custom_css_file that uses the wp_enqueue_style function to enqueue a custom CSS file custom-elementor.css. We then use the elementor/frontend/after_enqueue_styles action hook to call this function and enqueue the custom CSS file for Elementor.