Title: TPure Variation Swatches for WooCommerce Author: Themepure Published: 28. April 2026 Last modified: 1. September 2026 --- Plugins suchen ![](https://ps.w.org/tpure-variation-swatches/assets/banner-772x250.png?rev=3675911) ![](https://ps.w.org/tpure-variation-swatches/assets/icon-256x256.gif?rev=3517324) # TPure Variation Swatches for WooCommerce Von [Themepure](https://profiles.wordpress.org/themepure/) [Herunterladen](https://downloads.wordpress.org/plugin/tpure-variation-swatches.1.1.0.zip) * [Details](https://de.wordpress.org/plugins/tpure-variation-swatches/#description) * [Rezensionen](https://de.wordpress.org/plugins/tpure-variation-swatches/#reviews) * [Installation](https://de.wordpress.org/plugins/tpure-variation-swatches/#installation) * [Entwicklung](https://de.wordpress.org/plugins/tpure-variation-swatches/#developers) [Support](https://wordpress.org/support/plugin/tpure-variation-swatches/) ## Beschreibung **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. ## Screenshots [⌊Color swatch preview on product page⌉⌊Color swatch preview on product page⌉[ Color swatch preview on product page [⌊Image swatch preview on product page⌉⌊Image swatch preview on product page⌉[ Image swatch preview on product page [⌊Label/button swatch preview on product page⌉⌊Label/button swatch preview on product page⌉[ Label/button swatch preview on product page [⌊Shop page swatches⌉⌊Shop page swatches⌉[ Shop page swatches [⌊Plugin settings panel⌉⌊Plugin settings panel⌉[ Plugin settings panel ## Installation #### Automatic Install From WordPress Dashboard 1. Log in to your WordPress admin panel. 2. Navigate to **Plugins > Add New**. 3. Search for **TPure Variation Swatches for WooCommerce**. 4. Click **Install Now** and then **Activate**. #### Manual Install 1. Download the plugin ZIP file. 2. Go to **Plugins > Add New > Upload Plugin**. 3. Choose the file and click **Install Now**. 4. Activate the plugin. #### FTP Install 1. Download and unzip the plugin. 2. Upload the `tpure-variation-swatches` folder to `/wp-content/plugins/`. 3. Activate the plugin from the **Plugins** screen. ## FAQ ### How do I configure attributes? 1. Navigate to **Products > Attributes** in your WordPress dashboard. 2. Create a new attribute or edit an existing one. 3. Change the **Type** to Color, Image, or Select (Label). 4. Click **Save** / **Update**. 5. 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. ## Rezensionen Zu diesem Plugin liegen noch keine Rezensionen vor. ## Mitwirkende und Entwickler „TPure Variation Swatches for WooCommerce“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt: Mitwirkende * [ Themepure ](https://profiles.wordpress.org/themepure/) [Übersetze „TPure Variation Swatches for WooCommerce“ in deine Sprache.](https://translate.wordpress.org/projects/wp-plugins/tpure-variation-swatches) ### Interessiert an der Entwicklung? [Durchstöbere den Code](https://plugins.trac.wordpress.org/browser/tpure-variation-swatches/), sieh dir das [SVN-Repository](https://plugins.svn.wordpress.org/tpure-variation-swatches/) an oder abonniere das [Entwicklungsprotokoll](https://plugins.trac.wordpress.org/log/tpure-variation-swatches/) per [RSS](https://plugins.trac.wordpress.org/log/tpure-variation-swatches/?limit=100&mode=stop_on_copy&format=rss). ## Änderungsprotokoll #### 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.json` to `tpwvs-settings. json` for 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"` with `aria-live="polite"` for screen readers. #### 1.0.3 * Compatible with WordPress 7.0 #### 1.1.0 * Compatible with WordPress 7.1 * Redesign: new teal/green admin color palette, banner, and plugin icon. * Redesign: settings, attributes, import/export, and how-to-use screens restyled with a cleaner card-based layout. * Improvement: removed the boxed, nested-scroll admin panel in favor of the page’s natural scroll, with a persistent sidebar. * Improvement: narrower sidebar, wider content area on the admin screens. * Improvement: smoother hover, focus, and page-transition animations throughout the admin UI. * Improvement: admin CSS/JS assets are now cache-busted automatically on every update. ## Meta * Version **1.1.0** * Zuletzt aktualisiert **vor 1 Monat** * Aktive Installationen **100+** * WordPress-Version ** 5.6 oder höher ** * Getestet bis **7.1.3** * PHP-Version ** 7.4 oder höher ** * Sprache * [English (US)](https://wordpress.org/plugins/tpure-variation-swatches/) * Schlagwörter * [color swatch](https://de.wordpress.org/plugins/tags/color-swatch/)[image swatch](https://de.wordpress.org/plugins/tags/image-swatch/) [product attributes](https://de.wordpress.org/plugins/tags/product-attributes/) [variation swatches](https://de.wordpress.org/plugins/tags/variation-swatches/) [woocommerce swatches](https://de.wordpress.org/plugins/tags/woocommerce-swatches/) * [Erweiterte Ansicht](https://de.wordpress.org/plugins/tpure-variation-swatches/advanced/) ## Bewertungen Es wurden noch keine Rezensionen eingereicht. [Deine Rezension](https://wordpress.org/support/plugin/tpure-variation-swatches/reviews/#new-post) [Alle Rezensionen anzeigen](https://wordpress.org/support/plugin/tpure-variation-swatches/reviews/) ## Mitwirkende * [ Themepure ](https://profiles.wordpress.org/themepure/) ## Support Möchtest du etwas mitteilen? Brauchst du Unterstützung? [Support-Forum anzeigen](https://wordpress.org/support/plugin/tpure-variation-swatches/)