Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How to correctly dequeue certain Elementor css files in WordPress?

I use Elementor to build my website and there are a lot of functionalities that I’m not using but are none the less loaded on every page of my website. So I decided to dequeue the css files I’m not using in my child theme’s functions.php and dequeue the css files which I’m only partially using, replacing them with a ‘cleaned-up’ version of the file.

This is how I wanted to start doing it:

function adg_dequeue_unnecessary_files() {
    wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
        wp_deregister_style( 'elementor-frontend' );

    wp_register_style( 'new-elementor-frontend-css', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
        wp_enqueue_style( 'new-elementor-frontend-css' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );

But while the second part of my function adds my new custom css file nicely, the first part removes almost 10 other Elementor’s css files along with the one I actually wanted to dequeue.

This is the list of files being dequeued:

  • custom-frontend.min.css
  • post-1501.css (this is the css file of the page I was looking at while making these changes)
  • frontend-legacy.min.css
  • post-1396.css (some global Elementor’s css)
  • post-3556.css (this one and the 5 below are templates from a plugin I’m using across my website)
  • post-4473.css
  • post-5653.css
  • post-3489.css
  • post-3464.css
  • post-3458.css

I’m guessing it has something to do with the handler ‘elementor-frontend’ not being correct. The custom-frontend.min.css file had the ‘elementor-frontend-css’ ID in the link tag of the HTML code, so I was guessing the handler from there.

Does anyone know how I can dequeue only the custom-frontend.min.css file?

After that I wanted to dequeue these files as well:

  • animations.min.css
  • elementor-icons.min.css
  • global.css
  • frontend-legacy.min.css
  • swiper.min.js

I’ve been browsing this for a few days and I’m starting to feel lost, so any help will be much appreciated!

Tags:

3

Answers


  1. 0

    You can dequeue the Elementor CSS file with the use of wp_deregister_style and wp_dequeue_style. For this, you need to pass the CSS file handle name. You can use the below code to dequeue the Elementor plugin global.css file.

    function dequeue_elementor_global__css() {
  wp_dequeue_style('elementor-global');
  wp_deregister_style('elementor-global');
}
add_action('wp_print_styles', 'dequeue_elementor_global__css', 9999);

    Here elementor-global is the handle name of the global.css file. You can get any file handle name by stylesheet id.
    For example:
    If any stylesheet id is the elementor-global-css then this file handle will be elementor-global

    Login or Signup to reply.
  2. 0

    My understanding is that all Elementor frontend styles, e.g. your post-1234.css files, are children of ‘elementor-frontend’, which means if you unload it, none of them will load.

    If you load your new, optimised frontend.min.css files with the same name, then it should work.

    e.g.

    function adg_dequeue_unnecessary_files() {
    wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
        wp_deregister_style( 'elementor-frontend' );

    wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
        wp_enqueue_style( 'elementor-frontend' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );

    Also. Can you not just add your custom-frontend.min.css to the relevant location in your Child Theme and it will overwrite the Parent theme version by default?

    Login or Signup to reply.
  3. 0

    This seems to work. Tested on a few pages and posts:

    add_action( 'elementor/frontend/after_enqueue_styles', function() { 
    wp_deregister_style( 'elementor-frontend' );
    wp_dequeue_style( 'elementor-frontend' );
    wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
   wp_enqueue_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
} );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search