Show variations as single product on shop, product category and search result page.
Smart Variation Swatches for WooCommerce – Color & Image Attribute Swatches
Hospedagem WordPress com plugin Smart WooCommerce Swatches, Photos And Filter by Attribute
Onde devo hospedar o plugin Smart WooCommerce Swatches, Photos And Filter by Attribute?
Este plugin pode ser hospedado em qualquer hospedagem que possua WordPress instalado. Recomendamos optar por uma empresa de hospedagem confiável, com servidores especializados para WordPress, como o serviço de hospedagem de sites da MCO2.
Hospedando o plugin Smart WooCommerce Swatches, Photos And Filter by Attribute em uma empresa de hospedagem confiável
A MCO2, além de instalar o WordPress na versão mais atualizada para seus clientes, oferece o plugin WP SafePress, um mecanismo exclusivo que assegura e aumenta a performance do seu site ao mesmo tempo.
Por que a Hospedagem WordPress funciona melhor na MCO2?
A Hospedagem WordPress funciona melhor pois a MCO2 possui servidores otimizados para WordPress. A instalação de WordPress é diferente de uma instalação trivial, pois habilita imediatamente recursos como otimização de imagens e fotos, proteção da página de login, bloqueio de atividades maliciosas diretamente no firewall, cache avançado e HTTPS ativado por padrão. São recursos que potencializam seu WordPress para a máxima segurança e o máximo desempenho.
Variation swatches for WooCommerce replace plain attribute dropdowns with clear, clickable WooCommerce swatches. Shoppers can pick colors and images at a glance instead of reading long select lists—better UX and fewer abandoned carts.
This free WooCommerce swatches plugin focuses on the attributes stores use most: WooCommerce color attribute swatches and image attribute swatches, plus text button/label options for sizes and materials.
Why use variation swatches for WooCommerce?
Standard variable products force customers to open a dropdown for every option. With variation swatches for WooCommerce, each option becomes a visual chip:
- Color – Hex-based circles or squares for a true WooCommerce color attribute
- Image – Thumbnails for patterns, fabrics, or styles (image attribute)
- Button / Label – Short text chips for size, material, or pack type
- Select – Native dropdown when a list is still the best fit
Whether you sell apparel, cosmetics, furniture, or electronics, WooCommerce swatches make variable products easier to understand and faster to buy.
WooCommerce color attribute
Set any global attribute type to Color under Products Attributes. Then assign a color to each term (e.g. Red, Navy, Olive). On the product page, the WooCommerce color attribute appears as color swatches instead of a dropdown. Global settings apply store-wide so you configure once and reuse everywhere.
Image attribute
For prints, finishes, or product photos, use the image attribute type. Upload a small image per term; customers see visual WooCommerce swatches that match the real product. Ideal for wallpapers, fabrics, phone cases, and similar catalogs.
Free features at a glance
- Variation swatches for WooCommerce – Color, Image, Button/Label, Select
- Global attribute types for WooCommerce color attribute and image attribute
- Modern admin: Dashboard, guided Settings, Help
- Style controls: shape, size, gap, borders, button colors
- Tooltips, out-of-stock display styles, hide original dropdown
- Shop / archive swatches (basic)
- Custom Swatches product tab with global-first logic
- Filter widget (classic and block widget editor)
- Compatible with latest WordPress and WooCommerce, including HPOS and Cart/Checkout Blocks
How to get started
- Install and activate Smart Variation Swatches for WooCommerce.
- Open Variation Swatches Dashboard for a quick overview.
- Go to Products Attributes and set Type to Color, Image, or Button/Label.
- Edit terms and set colors or upload images for your WooCommerce color attribute / image attribute.
- Add the attribute to variable products and create variations.
- Optionally fine-tune Style and Tooltip under Variation Swatches Settings.
Documentation: Smart Variation Swatches docs
Who is this for?
Store owners who want variation swatches for WooCommerce without complexity: fashion and apparel (color + size), home and décor (image attribute for patterns), beauty (shade WooCommerce color attribute), and any shop with variable products that benefit from visual WooCommerce swatches.
Pro highlights
- Radio & Checkbox attribute types – Form-style choices when chips are not ideal.
- Advanced archive options – Fuller control of where and how WooCommerce swatches appear on shop and category pages.
- Enhanced filter widget – Filter the catalog by color, image, and other attributes with richer swatch UI in sidebars and widget areas.
- Priority support – Faster help when you need it.
- Single attribute swatches and multi-attribute setups with Pro-level overrides and flexibility.
Upgrade: Smart Variation Swatches for WooCommerce Pro
Video Documentation:
How to create Variation Swatches For Custom Attribute :
Theme Compatibility
Smart Variation Swatches for WooCommerce works with most WooCommerce-ready themes, including Hello Elementor, OceanWP, Hestia, Joyas Shop, Storefront, XStore, eMart, Shoper, Kadence, Avada, The9 Store, Prime Shopping Cart and Divi. Because some themes use custom variation templates, light CSS or template tweaks may be needed for a perfect match. In typical setups, color, image, and label swatches display correctly without extra work.
Capturas de tela

Frontend variation swatches for WooCommerce (color and label)

Products → Attributes – set Color or Image type

Term color picker for WooCommerce color attribute

Image attribute term upload

Style and tooltip settings

