How to Display Variation Swatches on Non‑WooCommerce Pages?

By default, the Variation Swatches plugin displays swatches only on the standard WooCommerce Shop, Archive, and Single Product pages. If you add products to a regular WordPress Page (landing page, promo page, content page, etc.), the variation options may not load as swatches.

This documentation shows you how to enable swatches on those other pages using a simple PHP filter.

Before You Begin

Make sure:

• Variation Swatches is installed and active.
• Your variable products use global attributes with swatch settings configured in WooCommerce > Products > Attributes.

Step 1: Insert Products on the Page

Add products to your WordPress Page using WooCommerce product shortcodes. These methods output standard WooCommerce markup that works best with Variation Swatches.

Examples:

[products]
[products ids="123,456,789" columns="3"]

Note: Using third‑party catalog or grid modules may not trigger swatches because they often bypass WooCommerce templates. If swatches do not appear, switch to WooCommerce shortcodes/blocks and retest.

Step 2: Enable Swatches on WordPress Pages (PHP Filter)

Add this snippet in your child theme functions.php file or via the Code Snippets plugin. This tells Variation Swatches to load on WordPress Pages.

add_filter( 'cfvsw_requires_shop_settings', function( $status ){
			if( is_page() ) {
				return true;
			}
			return $status;
		});
is_page can be replaced by the desired condition.

For step-by-step guidance, see our doc: How & Where to Add Custom JS, CSS & PHP Code.

Step 3: Clear Cache & Test

1. Save/activate the PHP snippet.
2. Clear any caching (plugin, server, CDN).
3. View your custom page in a private browser window.
4. Check that variable products now show swatches.