In Omniverse, we take the standard WooCommerce variable product—which traditionally uses clunky dropdowns—and transform it into a sleek, interactive experience using Visual Swatches.
1. Enabling Swatches (Text Format) #
By default, Omniverse converts attribute dropdowns into clean text buttons to improve user experience.
- How to enable: Navigate to Dashboard > Products > Attributes.
- Select your attribute (e.g., Size) and click Configure Items.
- Within the individual item settings, toggle Enable Swatch.
2. Color & Image Swatches (Global Settings) #
For a more visual shopping experience, you can define colors or specific icons that remain consistent across all products.
- Color Swatches: In the attribute item settings, use the Color preview for this value picker. This is perfect for standard colors like “Navy Blue” or “Forest Green.”
- Custom Image Swatches: If you want to show a specific pattern (like “Camouflage”) or a texture (like “Oak Wood”), upload a custom thumbnail to the Image preview field.
- Note: Ensure the “Use images from product variations” option is disabled if you want the swatch to stay the same regardless of the specific product.
3. Dynamic Variation Swatches (Auto-Image) #
This is the most advanced feature of the Omniverse engine. It automatically pulls the Variation Featured Image and displays it as the swatch.
To set up Dynamic Swatches:
- Theme Settings: Go to Omniverse > Shop > Attribute Swatches.
- Select Attribute: Set the Grid swatch attribute to display (e.g.,
pa_color). - Sync Images: Enable the Use images from product variations toggle.
- Requirement: Each variation within your product must have its own “Variation Image” uploaded.
Pro Tip: Even when using dynamic variation images, we recommend uploading a fallback color in the global attribute settings. If a variation image is missing, Omniverse will gracefully fall back to the color preview to keep your UI looking sharp.
