How to Display Variation Swatches on Non‑WooCommerce Pages

Team CartFlows — Tue, 22 Jul 2025 11:04:25 +0000

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 a third-party plugin like Code Snippets. 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

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

Use a Custom Image for the Floating Cart Icon

Team CartFlows — Thu, 17 Jul 2025 10:44:00 +0000

Modern Cart allows you to upload and use a custom image as the floating cart icon, giving you more flexibility in branding your store’s appearance.

You can find this setting under the Floating Cart Icon tab.

Supported file types include .png, .jpg, and .svg.

The recommended image size is 36 × 36 pixels to ensure a clear and consistent display.

See It in Action

Using SVG Files

If you upload an SVG file, please note that WordPress does not allow SVG uploads by default. This is a WordPress restriction, not a limitation from Modern Cart.

You can enable SVG uploads by:

Installing a Plugin

Use a plugin like Safe SVG to allow uploading SVG files safely.

Adding a Code Snippet

You can also enable SVG upload manually with this custom PHP code:

/**
 * Allow SVG uploads for administrators with basic sanitization.
 */

// Allow SVG uploads for administrators only
add_filter('upload_mimes', function($mimes) {
    if (current_user_can('administrator')) {
        $mimes['svg'] = 'image/svg+xml';
    }
    return $mimes;
});

// Basic sanitization: remove

Documentation