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.
Hi, thank you very much. I was looking for a removal on the WooCommerce site, but your site is much better and more practical. You said a good solution for removing extra css.
Thankful
I had been working with a different version of the dequeue_styles filters that didn’t do the job, because (as I now see) it didn’t return the filtered variable.
So thanks for the snippet and the learning experience!
Nice;
This is what I used
add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_styles_scripts’, 99 );
function dequeue_woocommerce_styles_scripts() {
if ( function_exists( ‘is_woocommerce’ ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
wp_dequeue_style( ‘woocommerce-general’ );
wp_dequeue_style( ‘woocommerce-layout’ );
wp_dequeue_style( ‘woocommerce-smallscreen’ );
wp_dequeue_style( ‘woocommerce_frontend_styles’ );
wp_dequeue_style( ‘woocommerce_fancybox_styles’ );
wp_dequeue_style( ‘woocommerce_chosen_styles’ );
wp_dequeue_style( ‘woocommerce_prettyPhoto_css’ );
# Scripts
wp_dequeue_script( ‘wc_price_slider’ );
wp_dequeue_script( ‘wc-single-product’ );
wp_dequeue_script( ‘wc-add-to-cart’ );
wp_dequeue_script( ‘wc-cart-fragments’ );
wp_dequeue_script( ‘wc-checkout’ );
wp_dequeue_script( ‘wc-add-to-cart-variation’ );
wp_dequeue_script( ‘wc-single-product’ );
wp_dequeue_script( ‘wc-cart’ );
wp_dequeue_script( ‘wc-chosen’ );
wp_dequeue_script( ‘woocommerce’ );
wp_dequeue_script( ‘prettyPhoto’ );
wp_dequeue_script( ‘prettyPhoto-init’ );
wp_dequeue_script( ‘jquery-blockui’ );
wp_dequeue_script( ‘jquery-placeholder’ );
wp_dequeue_script( ‘fancybox’ );
wp_dequeue_script( ‘jqueryui’ );
}
}
}
Perfect thanks!
Hi, thank you very much. I was looking for a removal on the WooCommerce site, but your site is much better and more practical. You said a good solution for removing extra css.
Thankful
Thank you!
I had been working with a different version of the dequeue_styles filters that didn’t do the job, because (as I now see) it didn’t return the filtered variable.
So thanks for the snippet and the learning experience!
OMG! Thanks I really needed this!!
The last script can be pasted in theme function?