Back to Community
Home / Community / Plugin → Variation swatches for woocommerce

How to Conditionally Load Variation Swatches for WooCommerce Scripts and Styles

14 threads Sep 16, 2025 Plugin → Variation swatches for woocommerce

Content

Many users of the 'Variation Swatches for WooCommerce' plugin have reported a common performance issue: the plugin's JavaScript and CSS files load on every page of a WordPress site, not just on the product pages where they are needed. This can lead to slower page load times, lower Google PageSpeed Insights scores, and unnecessary resource usage.

Why This Happens

Based on community discussions, the 'Variation Swatches for WooCommerce' team has stated that the plugin loads globally by default to ensure compatibility with page builders and shortcodes that might display products on non-standard pages. While this ensures functionality, it comes at the cost of performance for users who only need the swatches on standard WooCommerce product pages.

Common Solutions

There are two primary methods to conditionally load the plugin's assets. The most effective solution uses a specific filter hook provided by the plugin.

Solution 1: Using the Official Filter Hook (Recommended)

The plugin provides a disable_wvs_enqueue_scripts filter. By returning true from this filter, you prevent the plugin's scripts and styles from loading. The key is to return true on the pages where you do NOT want the assets to load.

To load only on single product pages:

add_filter( 'disable_wvs_enqueue_scripts', function(){
    return ! is_product();
} );

To load on single product and shop archive pages:

add_filter( 'disable_wvs_enqueue_scripts', function(){
    return ! ( is_product() || is_shop() );
} );

Important Note: Some users have found that the correct logic is to return ! is_product() (meaning "disable on everything that is NOT a product page"). If one variation does not work, try the other. Test this code on a staging site first.

Solution 2: Dequeuing Scripts and Styles Manually

If the filter does not work for your setup, you can manually dequeue the assets using standard WordPress functions. This code must be added with a late priority (e.g., 99) to ensure it runs after the plugin has enqueued its files.

add_action( 'wp_enqueue_scripts', 'custom_swatches_script_conditional_loading', 99 );

function custom_swatches_script_conditional_loading(){
    if ( ! is_product() ) {  
        wp_dequeue_style( 'woo-variation-swatches' );
        wp_dequeue_style( 'woo-variation-swatches-theme-override' );
        wp_dequeue_style( 'woo-variation-swatches-tooltip' );
        wp_dequeue_script( 'woo-variation-swatches' );
    }
}

How to Add This Code

You should never edit your theme's functions.php file directly, especially if it's a parent theme. Instead, use one of these methods:

  1. Code Snippets Plugin: Install and activate the free Code Snippets plugin. This is the safest and easiest method, as it manages your custom code separately from your theme.
  2. Child Theme: If you are already using a child theme, you can add the code to its functions.php file.

Important Considerations

  • Test Thoroughly: If you use a page builder or shortcodes to display products on pages like your homepage, these solutions might break the swatches on those pages. Adjust the conditional tags (e.g., add is_front_page()) to include any such pages.
  • Body Classes: These solutions prevent the loading of CSS and JS files. They do not remove the additional body classes added by the plugin, which is a separate issue mentioned in the community threads.
  • Plugin Updates: The code provided is based on the plugin's structure at the time of writing. A future update could change the script handles or how the filter works, so it's good practice to verify functionality after updating the plugin.

By implementing these changes, you can significantly improve your site's front-end performance by ensuring these assets are only loaded where they are absolutely necessary.

Related Support Threads Support