Remove WooCommerce CSS Styles and Scripts From Pages That Don’t Need It
WooCommerce loads three core CSS style sheets on every page and post when installed on a WordPress site. You can save a bit of page load time here by removing the styles and scripts from pages and content that do not need it .
It also loads a bunch of other javascripts and CSS styles from the libraries it uses for its functionality.
Here is how you can load these files a bit differently so they appear only on the pages you need, speeding up page load time for non-Woocommerce content.
- woocommerce-layout.css
- woocommerce-smallscreen.css
- woocommerce.css
These are loaded from /wp-content/plugins/woocommerce/assets/css/
Woo have made a filter available to remove all 3 or remove individual ones.
You can do this and just add your own CSS style
This is great but it still loads on every page, if you keep your WooCommerce on the default pages you can conditionally load the CSS file.
Another great way to load only the CSS styles and Javascripts only on the WooCommerce product and shop pages is to dequeue them on all the other pages.
Here all the Woo styles and scripts are removed by hooking into ‘template_redirect’ the last hook before the page loads and removing the initial Woo add_action of all styles and scripts.