How to correctly dequeue certain Elementor css files in Wordpress?

Question

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!

Answer 1

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