WordPress.org

नेपाली

वर्डप्रेस प्राप्त गर्नुहोस्
WordPress.org

Plugin Directory

TPure Variation Swatches for WooCommerce

TPure Variation Swatches for WooCommerce

Themepure द्वारा
डाउनलोड गर्नुहोस्

विवरण

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.

स्क्रिनसटहरू

  • 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

स्थापना

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.

प्रश्नोत्तर

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.

समीक्षाहरू

यस प्लगिनको लागि कुनै समीक्षाहरू छैनन्।

योगदानकर्ता र डेभलपरहरू

“TPure Variation Swatches for WooCommerce” खुला स्रोत सफ्टवेयर हो। निम्न व्यक्तिहरूले यो प्लगिनमा योगदान गरेका छन्।

योगदानकर्ताहरू

“TPure Variation Swatches for WooCommerce” लाई आफ्नो भाषामा अनुवाद गर्नुहोस्

विकासमा रुचि छ?

आरएसएस द्वारा कोड ब्राउज गर्नुहोस्, एसभीएन रिपजिटरी हेर्नुहोस्, वा विकास लग को सदस्यता लिनुहोस्।

चेन्जलग

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.

मेटा

रेटिङ्गहरू

अहिलेसम्म कुनै समीक्षा पेस गरिएको छैन।

Your review

See all reviews

योगदानकर्ताहरू

सहायता

केही भन्नु छ? सहयोग चाहियो?

सहायता फोरम हेर्नुहोस्