Plugin Directory

Smart WooCommerce Swatches, Photos And Filter by Attribute

Smart WooCommerce Swatches, Photos And Filter by Attribute


__Live Demo __

Smart WooCommerce variation swatches, photos and filter by attribute – convert your normal variable attribute dropdown select to nicely looking color, image, label, text, or dropdown. You can display product colors, sizes, styles, and anything else in the better way which is not supported by default WooCommerce. Display them in round or square mode.

Moreover, the plugins can also be used for direct product filtering by Attributes as widgets. This allows customers to discover goods that align with their specific colour and design preferences quickly.

Video Documentation:

How to create Variation Swatches For Custom Attribute :

Features provided with this variation swatches for WooCommerce plugin:
* A hook base plugin and follow the developer handbook and coding standards.
* Completely integrate with WooCommerce plugin.
* Create attribute color swatches.
* Create attribute image swatches.
* Create attribute label/text swatches.
* Create new attribute swatch in product editing page.
* Even more fine detail with tooltips/hover.
* Clear-Cut display of merchandise variables
* The product will be filterable by variable as a widget. So, customers can filter product groups by prices, stock, image and more for each variation.

PRO Features provided with this plugin:
* Archive / Catalog / Shop / Category / Tag page swatches
* Support Override settings at every single product
* Customize Tooltips/ all Swatches color background border or round/squared shape
* Product filter by swatches widgets
* Product filter by swatches Archive page
* Create attribute color swatches
* Create attribute image swatches
* Create new attribute swatch in product editing page
* and more

Theme Compatibility

This WooCommerce variation swatches plugin tested with Hello Elementor, OceanWP, Hestia, Flatsome, Storefront, XStore, WoodMart, Kadence Avada, Divi and may more ….

Moreover, This variation of swatches extensions may not work out of the box with some themes. This is due to a theme having its own template for variation selection (single-product/add-to-cart/variable.php). Please create a child theme or re-name (yourtheme/single-product/add-to-cart/variable.php)

More amazing features available in Pro version.


  • Variations on frontend
  • Add new attribute
  • Edit Attribute
  • Attribute color
  • Variations Options


Automatic installation

Install Unlimited Background Slider just like any other WordPress plugin.
[Installing Plugins] (https://codex.wordpress.org/Managing_Plugins)


How to use this variation swatches WooCommerce extension?

Go to WooCommerce > settings > Product Swatches. and learn more with [online documentation and user guide] (https://docs.athemeart.com/docs/smart-variation-swatches-plugins-documentation/)

Will this plugin work with my theme?

Yes, it will work with any theme, but may require some styling to make it match nicely.


2021 年 6 月 9 日
Хотел добавить вариации по цветам, но если у всех цветов одинаковая цена, то цена вообще не отображается. А если цена разная, то показывается в 2 местах!
2021 年 5 月 1 日
I installed this theme which worked initially. The prices on the product page suddenly disappeared one day. I contact support and they fixed it on one product and didn’t explain how they fixed it. A few days later this fix broke again. After this initial contact, they didn’t respond to multiple requests so i deleted the plugin and purchased one from code canyon instead. This theme wasted time and effort delaying a project go live.
2020 年 8 月 5 日
Use it all the time. Works with most of other themes. 🙂
2020 年 7 月 24 日
It worked for me, I recommend it.
閱讀全部 13 則使用者評論


以下人員參與了開源軟體〈Smart WooCommerce Swatches, Photos And Filter by Attribute〉的開發相關工作。


〈Smart WooCommerce Swatches, Photos And Filter by Attribute〉外掛目前已有 6 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈Smart WooCommerce Swatches, Photos And Filter by Attribute〉外掛本地化為台灣繁體中文版


任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄



  • Tested up to: 6.2.2


  • Tested up to: 6.1.1


  • Fixed JS error ( Line 104: product_attr = jQuery.parseJSON( $(“.variations_form”).attr(“data-product_variations”) ), )


  • Fixed php error


  • woocommerce variation swatch price changing
  • variation display on archive page


  • Add Color Options
  • Show on product archive page
  • added widgets to display Swatches
  • show the price anywhere of web page


  • Initial release.