Title: StoreStack Attribute Swatches for WooCommerce Author: StoreStack Published: August 15, 2026 Last modified: August 15, 2026 --- Search plugins ![](https://ps.w.org/storestack-attribute-swatches-for-woocommerce/assets/banner- 772x250.png?rev=3648133) ![](https://ps.w.org/storestack-attribute-swatches-for-woocommerce/assets/icon.svg? rev=3648133) # StoreStack Attribute Swatches for WooCommerce By [StoreStack](https://profiles.wordpress.org/storestack/) [Download](https://downloads.wordpress.org/plugin/storestack-attribute-swatches-for-woocommerce.1.0.0.zip) * [Details](https://wordpress.org/plugins/storestack-attribute-swatches-for-woocommerce/#description) * [Reviews](https://wordpress.org/plugins/storestack-attribute-swatches-for-woocommerce/#reviews) * [Installation](https://wordpress.org/plugins/storestack-attribute-swatches-for-woocommerce/#installation) * [Development](https://wordpress.org/plugins/storestack-attribute-swatches-for-woocommerce/#developers) [Support](https://wordpress.org/support/plugin/storestack-attribute-swatches-for-woocommerce/) ## Description **StoreStack Attribute Swatches for WooCommerce** replaces default, plain WooCommerce variation dropdowns with visual, interactive swatches. Easily display product colors, pattern images, text badges, and radio options to improve user experience and boost conversions on your online store. ### Features * **Multiple Swatch Types**: Convert default attribute dropdowns into **Color**,** Image**, **Text**, or **Radio** swatches. * **Color Swatches**: Integrated HEX Color Picker allows precise color assignments for each attribute option. * **Image Swatches**: Assign custom images or texture swatches directly from the WordPress Admin. * **Interactive Tooltips**: Hovering over image swatches triggers a dynamic thumbnail preview. * **Text / Label Swatches**: Pill-style buttons ideal for sizes (S, M, L, XL), dimensions, and specifications. * **Radio Swatches**: Classic radio list options for clean, structured variation choices. * **Swatch Grouping**: Group related terms into custom categories (e.g. “Primary Colors”, “Metallic Finishes”, “Standard Sizes”) with visual section headers. * **Fully Responsive & Lightweight**: Pure CSS styling and minimal JavaScript overhead ensure fast load times and seamless mobile browsing. * **Developer Friendly**: Built-in filter hooks and CSS selectors for seamless theme integration and customization. ### Integrations Works seamlessly with the following plugins: * **[WooCommerce](https://wordpress.org/plugins/woocommerce)** * **[StoreStack Attribute Fees for WooCommerce](https://wordpress.org/plugins/storestack-attribute-fees-for-woocommerce)** ### Need Help or Have Feedback? Before leaving a negative review, please consider reaching out to us first! If you encounter any bugs, unexpected behavior, or have ideas for new features and improvements, please open a support request or report an issue on our GitHub repository. We will gladly work with you to resolve any problems. ### Contributing & GitHub Repository We welcome and appreciate contributions from the community! Whether you want to fix a bug, improve documentation, or propose a new feature, feel free to fork our repository, submit pull requests, or open issues on GitHub: [GitHub Repository](https://github.com/StoreStack/storestack-attribute-swatches-for-woocommerce) Your feedback and code contributions help make this plugin better for everyone. ## Screenshots [⌊Add a new attribute or edit an existing one, choosing a desired swatch type and assigning groups if needed.⌉⌊Add a new attribute or edit an existing one, choosing a desired swatch type and assigning groups if needed.⌉[ Add a new attribute or edit an existing one, choosing a desired swatch type and assigning groups if needed. [⌊Click "configure terms" to create or edit attribute options.⌉⌊Click "configure terms" to create or edit attribute options.⌉[ Click “configure terms” to create or edit attribute options. [⌊Add new attribute options or edit existing ones.⌉⌊Add new attribute options or edit existing ones.⌉[ Add new attribute options or edit existing ones. [⌊Assign the global attribute to a variable product, making sure "Used for variations" is checked.⌉⌊Assign the global attribute to a variable product, making sure "Used for variations" is checked.⌉[ Assign the global attribute to a variable product, making sure “Used for variations” is checked. [⌊Frontend demo with the Storefront theme.⌉⌊Frontend demo with the Storefront theme .⌉[ Frontend demo with the Storefront theme. [⌊Hovering over or clicking on an image swatch will trigger a tooltip to showcase a larger version of the image.⌉⌊Hovering over or clicking on an image swatch will trigger a tooltip to showcase a larger version of the image.⌉[ Hovering over or clicking on an image swatch will trigger a tooltip to showcase a larger version of the image. ## Installation ### Getting Started 1. **Install and Activate**: 2. * Download the `.zip` file from WordPress.org and install via **WordPress Admin > Plugins > Add New > Upload Plugin**. * Click **Activate** to enable the plugin. 3. **Configure Attribute Types**: 4. * Go to **Products > Attributes** in your WordPress Admin. * Edit an existing attribute or create a new one, then set the **Type** to **Color**,** Image**, **Text**, or **Radio**. * Create **Groups** if you want to separate options into subgroups. 5. **Assign Swatches & Groups**: 6. * Click **Configure terms** for your attribute. * Add or edit terms to select colors using the color picker or to upload images via the Media Library. * Assign the desired **Group** to the option if you have created one in the previous step. 7. **View on Product Pages**: 8. * Create or edit a **Variable Product**, assign the configured attribute under the **Attributes** tab, and enable **Used for variations**. * Your custom swatches will automatically replace standard dropdowns on the single product page. * _On some hosting providers, it may be needed to clear the server-level cache in order for the changes to be reflected on the frontend._ ## FAQ ### What swatch types are supported? The plugin currently supports four swatch types: **Color**, **Image**, **Text** ( custom text badges), and **Radio**. ### How do Swatch Groups work? When editing an attribute under **Products > Attributes**, you can define custom group names. When editing individual terms (e.g. Blue, Red, Metallic Silver), assign them to a group. On the frontend, swatches will be organized under titled section headers for better visual hierarchy. ### I’ve configured the swatches as instructed, but I can’t see the changes After setting or updating the swatches, it may be needed to clear the server-level cache in order for the changes to be reflected on the frontend. ### Is it possible to change the appearance of the swatches? Yes! The swatches use clean, standard HTML markup and CSS selectors. You can easily override styles in your theme’s `style.css` or via the WordPress Customizer. ### Can developers customize the swatch HTML or tooltip markup? Yes! The plugin provides custom filter hooks to allow developers to modify or wrap the output as needed. ### Does this plugin support WooCommerce High-Performance Order Storage (HPOS)? Yes! The plugin declares full compatibility with WooCommerce HPOS (Custom Order Tables). ## Reviews There are no reviews for this plugin. ## Contributors & Developers “StoreStack Attribute Swatches for WooCommerce” is open source software. The following people have contributed to this plugin. Contributors * [ StoreStack ](https://profiles.wordpress.org/storestack/) * [ Tiago Sartor ](https://profiles.wordpress.org/tiagosartor3/) [Translate “StoreStack Attribute Swatches for WooCommerce” into your language.](https://translate.wordpress.org/projects/wp-plugins/storestack-attribute-swatches-for-woocommerce) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/storestack-attribute-swatches-for-woocommerce/), check out the [SVN repository](https://plugins.svn.wordpress.org/storestack-attribute-swatches-for-woocommerce/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/storestack-attribute-swatches-for-woocommerce/) by [RSS](https://plugins.trac.wordpress.org/log/storestack-attribute-swatches-for-woocommerce/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.0 – 2026/08/15 * Initial release. ## Meta * Version **1.0.0** * Last updated **11 hours ago** * Active installations **Fewer than 10** * WordPress version ** 6.2 or higher ** * Tested up to **7.0.4** * PHP version ** 8.1 or higher ** * Tags * [attribute swatches](https://wordpress.org/plugins/tags/attribute-swatches/)[color swatches](https://wordpress.org/plugins/tags/color-swatches/) [swatches](https://wordpress.org/plugins/tags/swatches/)[variation swatches](https://wordpress.org/plugins/tags/variation-swatches/) [woocommerce](https://wordpress.org/plugins/tags/woocommerce/) * [Advanced View](https://wordpress.org/plugins/storestack-attribute-swatches-for-woocommerce/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/storestack-attribute-swatches-for-woocommerce/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/storestack-attribute-swatches-for-woocommerce/reviews/) ## Contributors * [ StoreStack ](https://profiles.wordpress.org/storestack/) * [ Tiago Sartor ](https://profiles.wordpress.org/tiagosartor3/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/storestack-attribute-swatches-for-woocommerce/)