WooCommerce is the most popular WordPress plugin for setting up online store. Since it is from the same developer of WordPress, it works seamlessly to support small to large scale business needs. However, the problem comes in different way that WooCommerce will considerably reduce the page loading speed of your site. The best option is to disable WooCommerce styles and scripts on WordPress posts that you do not need them. In this way, you can leverage the power of WooCommerce as well as have fast loading posts.
Scenario for Improvement
WooCommerce plugin is meant for having a physical business that supports shipping, taxing, etc. So, if you have full-fledged ecommerce store there are not many improvements you can do as each product page on your site needs the plugin. Probably you have to use WooCommerce optimized hosting companies to speed up the loading of your product pages. You can check out our article on how to fix slow page loading speed with WooCommerce plugin.
However, in this article we will discuss the different scenario that bloggers face. Many bloggers use commercial themes optimized for WooCommerce plugin. Therefore, they will quickly tend to use the plugin for selling simple digital products like eBooks without knowing the intended purpose of the plugin. For example, it does not make sense to use WooCommerce when you have 10 product pages and 1000 regular posts. What happens in this case is that all 1000 posts will load CSS and JS files of the WooCommerce plugin thus reducing the overall site’s speed.
This is due to the fact that WooCommerce plugin does not offer a way to disable resources loaded on the pages where you do intend to sell any products. The reason is also obvious that many sites have the cart button on the top navigation bar thus needing the plugin’s resources to dynamically update the order details. We have explained in our earlier article about cart AJAX calls and the speed impact of this. If you really wanted to use WooCommerce but wanted to get rid of the plugin’s CSS and JS on regular posts/pages then follow one of the below options.
In addition, Google PageSpeed Insights will warn you to remove unused CSS and JS on the page thus plummeting the speed score.
WooCommerce Styles and Scripts
Let’s first check the resources loaded by the plugin. You can simply disable any caching plugin on your site and check the live page’s source code. You can select the post or page where there are no cart, WooCommerce blocks or products. It should look something like below on Chrome.
The plugin loads CSS/JS files from /wp-content/plugins/WooCommerce/assets/ and block styles from /wp-content/plugins/WooCommerce/packages/WooCommerce-blocks/build. Since the page does not have any product or cart intending to sell a product, all the below resources are simply useless.
| WooCommerce Resources | Type |
| /wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=5.7.1 | CSS |
| /wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=5.7.1 | CSS |
| /wp-content/plugins/woocommerce/assets/css/twenty-twenty-one.css?ver=5.7.1 | CSS |
| /wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=5.7.1 | JS |
| /wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=5.7.1 | JS |
| /wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4-wc.5.7.1 | JS |
| /wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/wc-blocks-style.css?ver=5.7.2 | JS |
| /wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/wc-blocks-vendors-style.css?ver=5.7.2 | JS |
Note: The above files are on version 5.7.2 on the twenty-twenty-one theme. You may see the plugin’s version installed on your site and different CSS files depending on your theme’s WooCommerce setup. In addition, you may also see fonts like woocommerce.woff loaded by the plugin.
Disable WooCommerce Styles and Scripts
We will explain the following options to disable WooCommerce styles and scripts in WordPress posts that do not have product related stuffs.
- Using a premium plugin
- Using a free plugin
- Manually disable the unused WooCommerce resources
The good part is that WordPress has plugins to disable unused CSS and JS on your site.
Option #1 – Using Perfmatters Premium Plugin
Perfmatters is a premium only plugin that can help you to optimize WooCommerce plugin. The reason we mention Perfmatters as a first option is that you can disable WooCommerce styles and scripts on entire site’s posts/pages with few clicks. This is highly recommended for beginners who do not want to edit the code or spend too much of time with free plugins. In addition, you can also use the Script Manager option in Perfmatters to disable unused CSS and JS files per post/page basis.
The plugin will cost you $24.95 with one year free updates and support. After installing the plugin activate the license to receive the updates.
- Go to “Settings > Perfmatters” menu and navigate to “Options > General” section.
- Scroll down to the bottom and check under “WooCommerce” section that says, “Disable specific elements of WooCommerce”.
- Turn on “Disable Scripts” option to disable WooCommerce scripts on entire site except product pages, cart and checkout pages.
- If required, you can also turn on other options for disabling cart fragmentation, meta boxes and widgets.
- Click “Save Changes” buttons to disable all WooCommerce scripts from your site’s posts/pages.
Now, check any of your post’s source code. As you can see in the below screenshot, all styles and scripts are disabled and only the WooCommerce font is loaded.
The plugin also offer Script Manager which is useful when you wanted to remove the styles/scripts per post basis. First, you have to enable “Script Manager” under “Options > Assets” section.
When editing a post, click on the “Script Manager” from the top admin bar and disable the unnecessary styles and scripts.
Disable all WooCommerce styles/scripts and select the “Locations” as “Everywhere”. You can provide the exceptions as products, product categories and product tags so that these styles/scripts will load on product pages if needed. Otherwise, you can completely disable WooCommerce resources on entire site. Save your settings and close the Script Manager by clicking on the option from the admin bar.
Now, you can check the source to confirm all WooCommerce styles and scripts including the block styles are removed except the font. If required, you can preload the font file under “Options > Preloading” section to avoid preloading key requests issue in Google PageSpeed Insights. Remember, though you do not Script Manager for disabling WooCommerce, it is needed when you want to disable resources from other plugins like Contact Form 7.
Option #2. Using Free Asset CleanUp Plugin
If you do not want to go for a premium plugin, then you can try Asset CleanUp: Page Speed Booster plugin. This is partially free plugin that offers a similar feature like Perfmatters Script Manager.
- After installing and activating the plugin, edit any of your post.
- The plugin will show you all WooCommerce styles and resources loaded on the post in a meta box.
- Scroll down and click “Check All” option for WooCommerce plugin.
- Wherever available, select “Unload on All Pages of “post” post type” option.
- Click “Update” button to disable all WooCommerce styles and scripts for posts. If needed, you can do the same for pages to disable the resources.
- Now, open one of your posts and check the developer console. All WooCommerce styles and scripts must have been removed.
Anytime, you can remove the settings by navigating to Asset Cleanup > Bulk Changes” section under “Posts, Pages & Custom Post Types” tab.
Option #3. Manual Method
The last option is o manually editing theme’s file to disable WooCommerce styles and scripts. Since editing theme’s files is not recommended, you can choose to use child theme.
- When you are WordPress admin panel, go to “Appearance > Theme Editor”.
- Select your active theme (or child theme) and then select functions.php file.
- Paste the below code that contains two parts. One part is for disabling all default styles/scripts and other is to disable WooCommerce blocks in the frontend.
/** Disable WooCommerce Styles and Scripts*/
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' );
}
}
}
/** Disable WooCommerce Block Styles */
function disable_woocommerce_block_styles() {
wp_dequeue_style( 'wc-blocks-style' );
}
add_action( 'wp_enqueue_scripts', 'disable_woocommerce_block_styles' );
- It should look like below on the theme editor and click on “Update File” button to save your changes.
Check your post’s source code to confirm all WooCommerce styles and scripts are disabled. You will only see the font file is loaded by the plugin.
Final Words
As you can see there are multiple ways to disable WooCommerce styles and scripts. Though using the premium Perfmatters plugin is easy, it separately loads the woocommerce.woff font file. The free plugin and manual options will help you to completely get rid of the WooCommerce bloats on pages where you do not need them. For all the options, you may need to check the settings / code carefully and review periodically as WooCommerce consistently changes the setup.
Leave a Reply
Your email is safe with us.