Descripció
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
- Install and activate the plugin.
- Go to Products > Attributes and create or edit attributes.
- Select the attribute type: Color, Image, or Select (Label).
- Configure terms for each attribute with the corresponding color, image, or label value.
- 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:
- Navigate to the plugin directory.
- Install dependencies:
npm install - Build for production:
npm run build
The build tool used is @wordpress/scripts (webpack-based). The compiled assets are output to the build/ directory.
Captures
Color swatch preview on product page 
Image swatch preview on product page 
Label/button swatch preview on product page 
Shop page swatches 
Plugin settings panel
Instal·lació
Automatic Install From WordPress Dashboard
- Log in to your WordPress admin panel.
- Navigate to Plugins > Add New.
- Search for TPure Variation Swatches for WooCommerce.
- Click Install Now and then Activate.
Manual Install
- Download the plugin ZIP file.
- Go to Plugins > Add New > Upload Plugin.
- Choose the file and click Install Now.
- Activate the plugin.
FTP Install
- Download and unzip the plugin.
- Upload the
tpure-variation-swatchesfolder to/wp-content/plugins/. - Activate the plugin from the Plugins screen.
PMF
-
How do I configure attributes?
-
- Navigate to Products > Attributes in your WordPress dashboard.
- Create a new attribute or edit an existing one.
- Change the Type to Color, Image, or Select (Label).
- Click Save / Update.
- Add terms to the attribute and assign a color value, image, or label for each term.
-
Is it compatible with my theme?
-
Yes. The plugin is compatible with most WooCommerce themes including Astra, Flatsome, Storefront, OceanWP, Divi, and more. Minor CSS adjustments may be needed in some cases.
-
Does it work with Quick View?
-
Yes, the plugin supports product quick view in themes that offer this feature.
-
Does it work on Multisite?
-
Yes.
-
Where do I manage plugin settings?
-
After activation, go to WooCommerce > Variation Swatches in your admin sidebar.
Ressenyes
No hi ha ressenyes per a aquesta extensió.
Col·laboradors i desenvolupadors
«TPure Variation Swatches for WooCommerce» és programari de codi obert. La següent gent ha col·laborat en aquesta extensió.
Col·laboradors
Traduïu «TPure Variation Swatches for WooCommerce» a la vostra llengua.
Interessats en el desenvolupament?
Navegueu pel codi, baixeu-vos el repositori SVN, o subscriviu-vos al registre de desenvolupament per fisl de subscripció RSS.
Registre de canvis
1.0.0
- Initial release for WordPress.org
- Color, image, and label variation swatches
- Shop page swatch support with ajax add to cart
- Tooltip customization
- Import/export settings
- Astra theme compatibility
1.0.1
- Fix: Import/Export now includes WooCommerce attributes, terms, and swatch term meta (color, image, label) so a full configuration round-trips between sites.
- Fix: Attribute type (Color / Image / Select) is correctly persisted on import — previously it could revert to Select on the target site.
- Fix: Newly created attributes during import register their taxonomy inline so terms are restored in the same request.
- Improvement: Import accepts both legacy (flat) and new (wrapped) JSON payloads — older export files continue to import.
- Change: Exported settings file renamed from
pwvs-settings.jsontotpwvs-settings.jsonfor consistency with the plugin prefix. - Improvement: Import success message now reports the count of attributes and terms created or updated.
1.0.2
- Add: «Go to Home» action link on the Plugins screen that opens the plugin’s admin page.
- Add: Animated progress bar with stage labels (Preparing, Uploading, Restoring attributes, Restoring terms, Finalizing) shown during import for clearer user feedback.
- Improvement: Admin UI automatically refreshes after a successful import so newly imported attributes, terms, and swatch values appear immediately.
- Improvement: Import controls (file picker, textarea, buttons) are disabled while an import is in progress to prevent duplicate submissions.
- Accessibility: Progress status uses
role="status"witharia-live="polite"for screen readers.