外掛標籤
開發者團隊
② 後台搜尋「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
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.
