W3 Total Cache Removes Elementor Features

Hello Peter-

Sorry to hear about the errors using W3 Total Cache with Elementor, we’ll be happy to try to help.

Without knowing precisely which features aren’t working on your home page, it’s difficult to speculate an exact fix for you. Are you seeing any errors in your browser console or WordPress error log when the plugin is active?

If you’re certain that the features are all Elementor elements, you may be able to resolve this by excluding the Elementor Javascript and CSS assets from your minify. Navigate to Performance > Minify and add the following lines to Never minify the following JS files:

wp-content/plugins/elementor-pro/assets/js/frontend.min.js
wp-content/plugins/elementor/assets/js/frontend.min.js
wp-content/plugins/elementor/assets/js/frontend-modules.min.js

And then add the following lines to Never minify the following CSS files:

wp-content/plugins/elementor-pro/assets/css/frontend.min.css
wp-content/plugins/elementor/assets/css/frontend.min.css
wp-content/plugins/elementor/assets/css/frontend-legacy.min.css

Hi Peter-

We can try a little modification to ensure that none of the Elementor assets get minified.

First, at the very bottom of the Advanced section in the Performance > Minify menu, check the option to Use Regular Expressions for file name matching.

Then, change your Never minify the following JS files to this:

wp-content/plugins/elementor-pro/assets/js/*
wp-content/plugins/elementor-pro/assets/lib/*
wp-content/plugin/elementor/assets/js/*
wp-content/plugin/elementor/assets/lib/*

and your Never minify the following CSS files to this:

wp-content/plugins/elementor-pro/assets/css/*
wp-content/plugins/elementor-pro/assets/lib/*
wp-content/plugin/elementor/assets/css/*
wp-content/plugin/elementor/assets/lib/*

Hi Peter-

Unless I’m mistaken, either replacing or adding the lines should have worked. Here are all of the libraries from Elementor and Elementor Pro that I can see on your front page:

JavaScript

wp-content/plugins/elementor-pro/assets/js/frontend.min.js
wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js
wp-content/plugins/elementor/assets/js/frontend-modules.min.js
wp-content/plugins/elementor/assets/js/frontend.min.js
wp-content/plugins/elementor/assets/lib/dialog/dialog.min.js
wp-content/plugins/elementor/assets/lib/share-link/share-link.min.js
wp-content/plugins/elementor/assets/lib/swiper/swiper.min.js
wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js

CSS

wp-content/plugins/elementor-pro/assets/css/frontend.min.css
wp-content/plugins/elementor/assets/css/frontend-legacy.min.css
wp-content/plugins/elementor/assets/css/frontend.min.css
wp-content/plugins/elementor/assets/lib/animations/animations.min.css
wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css
wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css
wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css

If you take everything from before out, and paste in these two lists of files, that should ensure that W3 Total Cache’s minify isn’t re-minifying any of Elementor’s assets.

It’s difficult to say for sure, of course, since your live site isn’t showing the errors that you’re describing. Are you testing out the new settings on a staging site that we could check out and see the issues?

Additionally, is there another page other than the home page that you’re experiencing the issues on? It’s possible that some elements on other pages are using more of Elementor’s assets that I don’t see on the front page.

Hi Peter-

It sounds like you might have another layer of Cache that’s not flushing. I noticed your site is also using CloudFlare’s edge caching service. Are you also using the CloudFlare extension for W3 Total Cache?

You can enable it in Performance > Extensions. Once you have it enabled and configured with your CloudFlare API key, you’ll also be able to clear your CDN Cache from within your dashboard in the Performance > CDN section.

Hi Peter-

Looking at the front page, I do see some additional scripts there that Elementor is using since the last time we checked this out. Here’s how I find them so you can easily check this out in the future. Using Chrome, right-click anywhere on your page and click Inspect (in Firefox, it’s the same except the option is called Inspect Element). Then, navigate to the Sources tab where you’ll be able to see all the scripts the page is using:

Generally speaking, you want to avoid minifying any scripts that have already been minified (the ones with .min. in the filename). Once you’re there, you can right-click any of the files and choose to Copy URL so you can easily paste them into your settings.

You might want to check a few different pages on the site and follow this process, because some features might be used that aren’t there on your homepage.