Select one or more tags, then press “Search Plugins”

Find Plugin with any / all of the selected criteria
Search Plugin

TPure Variation Swatches For WooCommerce Wordpress Plugin - Rating, Reviews, Demo & Download

TPure Variation Swatches For WooCommerce Preview Wordpress Plugin - Rating, Reviews, Demo & Download
No ratings yet
Free
Follow for free plugins, new theme releases and theme news

Plugin Description

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

  1. Color swatch preview on product page

    Color swatch preview on product page

  2. Image swatch preview on product page

    Image swatch preview on product page

  3. Label/button swatch preview on product page

    Label/button swatch preview on product page

  4. Shop page swatches

    Shop page swatches

  5. Plugin settings panel

    Plugin settings panel

Similar Plugins:

Swatchly – WooCommerce Variation Swatches For Products (product Attributes: Image Swatch, Color Swatches, Label Swatches) WooCommerce Variation Master – Variation Dropdown, Variable Products, Variation Swatches/Attributes. Rating Widget: Post Rating, 5 Star Rating, Reviews, Thumbs Up & Down, Reaction

Reviews & Comments