{"id":298076,"date":"2026-04-28T05:17:04","date_gmt":"2026-04-28T05:17:04","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/modern-woo-swatches\/"},"modified":"2026-05-11T07:01:30","modified_gmt":"2026-05-11T07:01:30","slug":"tpure-variation-swatches","status":"publish","type":"plugin","link":"https:\/\/am.wordpress.org\/plugins\/tpure-variation-swatches\/","author":16662174,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.2","stable_tag":"1.0.2","tested":"6.9.4","requires":"5.6","requires_php":"7.4","requires_plugins":null,"header_name":"TPure Variation Swatches for WooCommerce","header_author":"ThemePure","header_description":"Beautiful color, image, and label variation swatches for WooCommerce products. Replace boring dropdowns with elegant swatches.","assets_banners_color":"95b7c3","last_updated":"2026-05-11 07:01:30","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/themepure.net\/plugins\/tpure-variation-swatches\/","header_author_uri":"https:\/\/themepure.net","rating":0,"author_block_rating":0,"active_installs":20,"downloads":234,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"themepure","date":"2026-04-28 05:16:30"},"1.0.1":{"tag":"1.0.1","author":"themepure","date":"2026-05-11 06:19:53"},"1.0.2":{"tag":"1.0.2","author":"themepure","date":"2026-05-11 07:01:30"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.gif":{"filename":"icon-128x128.gif","revision":3517324,"resolution":"128x128","location":"assets","locale":"","width":256,"height":256},"icon-256x256.gif":{"filename":"icon-256x256.gif","revision":3517324,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3519144,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3519144,"resolution":"772x250","location":"assets","locale":"","width":1544,"height":500}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.0.2"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3516975,"resolution":"1","location":"assets","locale":"","width":1643,"height":957},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3516975,"resolution":"2","location":"assets","locale":"","width":1642,"height":958},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3516975,"resolution":"3","location":"assets","locale":"","width":1642,"height":958},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3516975,"resolution":"4","location":"assets","locale":"","width":1642,"height":958},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3516975,"resolution":"5","location":"assets","locale":"","width":1642,"height":958}},"screenshots":{"1":"Color swatch preview on product page","2":"Image swatch preview on product page","3":"Label\/button swatch preview on product page","4":"Shop page swatches","5":"Plugin settings panel","6":"Tooltip customization","7":"Attribute type selection"}},"plugin_section":[],"plugin_tags":[139483,139484,66595,130912,142374],"plugin_category":[],"plugin_contributors":[218566],"plugin_business_model":[],"class_list":["post-298076","plugin","type-plugin","status-publish","hentry","plugin_tags-color-swatch","plugin_tags-image-swatch","plugin_tags-product-attributes","plugin_tags-variation-swatches","plugin_tags-woocommerce-swatches","plugin_contributors-themepure","plugin_committers-themepure"],"banners":{"banner":"https:\/\/ps.w.org\/tpure-variation-swatches\/assets\/banner-772x250.png?rev=3519144","banner_2x":"https:\/\/ps.w.org\/tpure-variation-swatches\/assets\/banner-1544x500.png?rev=3519144","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/tpure-variation-swatches\/assets\/icon-128x128.gif?rev=3517324","icon_2x":"https:\/\/ps.w.org\/tpure-variation-swatches\/assets\/icon-256x256.gif?rev=3517324","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/tpure-variation-swatches\/assets\/screenshot-1.png?rev=3516975","caption":"Color swatch preview on product page"},{"src":"https:\/\/ps.w.org\/tpure-variation-swatches\/assets\/screenshot-2.png?rev=3516975","caption":"Image swatch preview on product page"},{"src":"https:\/\/ps.w.org\/tpure-variation-swatches\/assets\/screenshot-3.png?rev=3516975","caption":"Label\/button swatch preview on product page"},{"src":"https:\/\/ps.w.org\/tpure-variation-swatches\/assets\/screenshot-4.png?rev=3516975","caption":"Shop page swatches"},{"src":"https:\/\/ps.w.org\/tpure-variation-swatches\/assets\/screenshot-5.png?rev=3516975","caption":"Plugin settings panel"}],"raw_content":"<!--section=description-->\n<p><strong>TPure Variation Swatches for WooCommerce<\/strong> 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.<\/p>\n\n<h4>Key Features<\/h4>\n\n<ul>\n<li><strong>Color Swatches<\/strong> - Display product color variations as clickable color circles or squares.<\/li>\n<li><strong>Image Swatches<\/strong> - Show variation images directly on the product page for quick visual selection.<\/li>\n<li><strong>Label\/Button Swatches<\/strong> - Convert text-based attributes (like sizes) into styled buttons.<\/li>\n<li><strong>Shop Page Swatches<\/strong> - Enable swatches on archive and shop pages with configurable positioning.<\/li>\n<li><strong>Ajax Add to Cart<\/strong> - Add variable products to the cart directly from the shop page.<\/li>\n<li><strong>Tooltip Support<\/strong> - Customizable tooltips with configurable colors and positioning.<\/li>\n<li><strong>Rounded and Squared Shapes<\/strong> - Choose between rounded or squared swatch shapes globally.<\/li>\n<li><strong>Swatch Size Control<\/strong> - Adjust the size of swatches from the settings panel.<\/li>\n<li><strong>Archive Page Positioning<\/strong> - Place swatches before or after the add to cart button, after title, after price, etc.<\/li>\n<li><strong>Swatch Alignment<\/strong> - Control horizontal alignment of swatches on shop pages.<\/li>\n<li><strong>Import\/Export Settings<\/strong> - Easily transfer your settings between sites.<\/li>\n<li><strong>Theme Compatibility<\/strong> - Works with popular themes including Astra, Flatsome, Storefront, OceanWP, and more.<\/li>\n<li><strong>Shortcode Support<\/strong> - Use <code>[tpwvs_swatches]<\/code> inside the shop loop.<\/li>\n<\/ul>\n\n<h4>How It Works<\/h4>\n\n<ol>\n<li>Install and activate the plugin.<\/li>\n<li>Go to <strong>Products &gt; Attributes<\/strong> and create or edit attributes.<\/li>\n<li>Select the attribute type: Color, Image, or Select (Label).<\/li>\n<li>Configure terms for each attribute with the corresponding color, image, or label value.<\/li>\n<li>Swatches will automatically replace dropdown selects on your product pages.<\/li>\n<\/ol>\n\n<h4>Shortcode<\/h4>\n\n<p>Use <code>[tpwvs_swatches]<\/code> inside the WooCommerce shop loop to manually output swatches.<\/p>\n\n<h3>Development<\/h3>\n\n<p>The full uncompiled source code (JavaScript, CSS, and build configuration) is included in the plugin inside the <code>src\/<\/code> directory. The compiled assets in <code>build\/<\/code> are generated from these source files.<\/p>\n\n<p>To build the plugin assets from source:<\/p>\n\n<ol>\n<li>Navigate to the plugin directory.<\/li>\n<li>Install dependencies: <code>npm install<\/code><\/li>\n<li>Build for production: <code>npm run build<\/code><\/li>\n<\/ol>\n\n<p>The build tool used is <code>@wordpress\/scripts<\/code> (webpack-based). The compiled assets are output to the <code>build\/<\/code> directory.<\/p>\n\n<!--section=installation-->\n<h4>Automatic Install From WordPress Dashboard<\/h4>\n\n<ol>\n<li>Log in to your WordPress admin panel.<\/li>\n<li>Navigate to <strong>Plugins &gt; Add New<\/strong>.<\/li>\n<li>Search for <strong>TPure Variation Swatches for WooCommerce<\/strong>.<\/li>\n<li>Click <strong>Install Now<\/strong> and then <strong>Activate<\/strong>.<\/li>\n<\/ol>\n\n<h4>Manual Install<\/h4>\n\n<ol>\n<li>Download the plugin ZIP file.<\/li>\n<li>Go to <strong>Plugins &gt; Add New &gt; Upload Plugin<\/strong>.<\/li>\n<li>Choose the file and click <strong>Install Now<\/strong>.<\/li>\n<li>Activate the plugin.<\/li>\n<\/ol>\n\n<h4>FTP Install<\/h4>\n\n<ol>\n<li>Download and unzip the plugin.<\/li>\n<li>Upload the <code>tpure-variation-swatches<\/code> folder to <code>\/wp-content\/plugins\/<\/code>.<\/li>\n<li>Activate the plugin from the <strong>Plugins<\/strong> screen.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20do%20i%20configure%20attributes%3F\"><h3>How do I configure attributes?<\/h3><\/dt>\n<dd><ol>\n<li>Navigate to <strong>Products &gt; Attributes<\/strong> in your WordPress dashboard.<\/li>\n<li>Create a new attribute or edit an existing one.<\/li>\n<li>Change the <strong>Type<\/strong> to Color, Image, or Select (Label).<\/li>\n<li>Click <strong>Save<\/strong> \/ <strong>Update<\/strong>.<\/li>\n<li>Add terms to the attribute and assign a color value, image, or label for each term.<\/li>\n<\/ol><\/dd>\n<dt id=\"is%20it%20compatible%20with%20my%20theme%3F\"><h3>Is it compatible with my theme?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20quick%20view%3F\"><h3>Does it work with Quick View?<\/h3><\/dt>\n<dd><p>Yes, the plugin supports product quick view in themes that offer this feature.<\/p><\/dd>\n<dt id=\"does%20it%20work%20on%20multisite%3F\"><h3>Does it work on Multisite?<\/h3><\/dt>\n<dd><p>Yes.<\/p><\/dd>\n<dt id=\"where%20do%20i%20manage%20plugin%20settings%3F\"><h3>Where do I manage plugin settings?<\/h3><\/dt>\n<dd><p>After activation, go to <strong>WooCommerce &gt; Variation Swatches<\/strong> in your admin sidebar.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release for WordPress.org<\/li>\n<li>Color, image, and label variation swatches<\/li>\n<li>Shop page swatch support with ajax add to cart<\/li>\n<li>Tooltip customization<\/li>\n<li>Import\/export settings<\/li>\n<li>Astra theme compatibility<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Fix: Import\/Export now includes WooCommerce attributes, terms, and swatch term meta (color, image, label) so a full configuration round-trips between sites.<\/li>\n<li>Fix: Attribute type (Color \/ Image \/ Select) is correctly persisted on import \u2014 previously it could revert to Select on the target site.<\/li>\n<li>Fix: Newly created attributes during import register their taxonomy inline so terms are restored in the same request.<\/li>\n<li>Improvement: Import accepts both legacy (flat) and new (wrapped) JSON payloads \u2014 older export files continue to import.<\/li>\n<li>Change: Exported settings file renamed from <code>pwvs-settings.json<\/code> to <code>tpwvs-settings.json<\/code> for consistency with the plugin prefix.<\/li>\n<li>Improvement: Import success message now reports the count of attributes and terms created or updated.<\/li>\n<\/ul>\n\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Add: \"Go to Home\" action link on the Plugins screen that opens the plugin's admin page.<\/li>\n<li>Add: Animated progress bar with stage labels (Preparing, Uploading, Restoring attributes, Restoring terms, Finalizing) shown during import for clearer user feedback.<\/li>\n<li>Improvement: Admin UI automatically refreshes after a successful import so newly imported attributes, terms, and swatch values appear immediately.<\/li>\n<li>Improvement: Import controls (file picker, textarea, buttons) are disabled while an import is in progress to prevent duplicate submissions.<\/li>\n<li>Accessibility: Progress status uses <code>role=\"status\"<\/code> with <code>aria-live=\"polite\"<\/code> for screen readers.<\/li>\n<\/ul>","raw_excerpt":"Replace default WooCommerce variation dropdowns with beautiful color, image, and label swatches on product and shop pages.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/298076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=298076"}],"author":[{"embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/themepure"}],"wp:attachment":[{"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=298076"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=298076"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=298076"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=298076"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=298076"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/am.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=298076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}