Hello,
Thank you for reaching out with your query regarding Elementor style load order. I understand your concern about maintaining clean CSS and avoiding the use of “!important” whenever possible.
Generally, the styles in WordPress are loaded in the order they are enqueued. The challenge here is that Elementor’s styles are typically loaded after the theme’s styles, which is why you might be finding it necessary to use “!important” to override them.
One potential solution to this issue could be to manually adjust the order in which the stylesheets are loaded. You can do this by deregistering the stylesheets and then enqueuing them back in the order you need. This would involve using WordPress’s wp_enqueue_scripts action and the wp_dequeue_style and wp_enqueue_style functions.
However, please note that this kind of customization involves writing custom code and modifying core theme and plugin files, which can have unintended side effects if not done correctly. It also requires a good understanding of WordPress and PHP.
Here’s a basic idea of how it might be done:
function adjust_styles_load_order() {
wp_dequeue_style('elementor-frontend');
wp_enqueue_style('elementor-frontend');
}
add_action('wp_enqueue_scripts', 'adjust_styles_load_order', 999);
In this example, ‘elementor-frontend’ is the handle for Elementor’s frontend styles, and the number 999 is the priority – the higher the number, the later the function is run. You would need to replace ‘elementor-frontend’ with the correct handle for your specific situation.
Please be aware that this is a very simplified example and may not work for your specific situation. Also, these modifications should be made in a child theme to prevent them from being overwritten when the theme or plugin is updated.
Although I’d love to assist you with this directly, providing custom code solutions falls outside of the scope of support we can provide at Elementor. We highly recommend collaborating with a knowledgeable developer if you’re not comfortable with coding.
Thank you!
