TPure Variation Swatches for WooCommerce

TPure Variation Swatches for WooCommerce replaces the default product attribute dropdown selects with visually appealing color swatches, image swatches, and label/button swatches. It works on both single product pages and shop/archive pages.

Key Features

• Color Swatches – Display product color variations as clickable color circles or squares.
• Image Swatches – Show variation images directly on the product page for quick visual selection.
• Label/Button Swatches – Convert text-based attributes (like sizes) into styled buttons.
• Shop Page Swatches – Enable swatches on archive and shop pages with configurable positioning.
• Ajax Add to Cart – Add variable products to the cart directly from the shop page.
• Tooltip Support – Customizable tooltips with configurable colors and positioning.
• Rounded and Squared Shapes – Choose between rounded or squared swatch shapes globally.
• Swatch Size Control – Adjust the size of swatches from the settings panel.
• Archive Page Positioning – Place swatches before or after the add to cart button, after title, after price, etc.
• Swatch Alignment – Control horizontal alignment of swatches on shop pages.
• Import/Export Settings – Easily transfer your settings between sites.
• Theme Compatibility – Works with popular themes including Astra, Flatsome, Storefront, OceanWP, and more.
• Shortcode Support – Use [tpwvs_swatches] inside the shop loop.

How It Works

1. Install and activate the plugin.
2. Go to Products > Attributes and create or edit attributes.
3. Select the attribute type: Color, Image, or Select (Label).
4. Configure terms for each attribute with the corresponding color, image, or label value.
5. Swatches will automatically replace dropdown selects on your product pages.

Shortcode

Use [tpwvs_swatches] inside the WooCommerce shop loop to manually output swatches.

Development

The full uncompiled source code (JavaScript, CSS, and build configuration) is included in the plugin inside the src/ directory. The compiled assets in build/ are generated from these source files.

To build the plugin assets from source:

1. Navigate to the plugin directory.
2. Install dependencies: npm install
3. Build for production: npm run build

The build tool used is @wordpress/scripts (webpack-based). The compiled assets are output to the build/ directory.