NeatPlugins

Product Attribute Icons Display allows you to display beautiful, customizable icons for product attributes on single product pages. Perfect for showcasing platform compatibility (Windows, Mac, Linux), region availability, product features, or any other product attributes with visual icons.
The plugin uses WordPress Dashicons, which are built into WordPress and provide hundreds of icons to choose from. Each attribute can have custom colors, labels, and icons, and you can control exactly where the icons appear on your product pages.
<h3>Features</h3>
<ul>
<li>
Icon Library Support
<ul>
<li>WordPress Dashicons (built-in, no setup required)</li>
</ul>
</li>
<li>
Flexible Icon Placement
<ul>
<li>Above Product Title</li>
<li>Above Product Price</li>
<li>Below Product Price</li>
<li>Below Short Description</li>
<li>Manual placement via shortcode</li>
</ul>
</li>
<li>
Customization Options
<ul>
<li>Custom icon for each attribute term</li>
<li>Custom labels for each attribute term</li>
<li>Per-attribute color customization (background, text, border)</li>
<li>Global default colors for all attributes</li>
<li>Customizable border radius</li>
<li>Toggle between default and custom colors per attribute</li>
</ul>
</li>
<li>
User-Friendly Admin Interface
<ul>
<li>Intuitive settings page under WooCommerce menu</li>
<li>Live icon preview in admin</li>
<li>Expandable attribute details</li>
<li>Color picker with visual preview</li>
<li>Easy enable/disable per attribute</li>
</ul>
</li>
<li>
Developer-Friendly
</li>
<li>
Shortcode support: <code>[paiw_product_attribute_icons]</code>
<ul>
<li>CSS variables for easy theme customization</li>
<li>Translation ready (text domain: product-attribute-icons-display)</li>
<li>WordPress coding standards compliant</li>
<li>Hooks and filters for extensibility</li>
</ul>
</li>
<li>
Performance & Security
<ul>
<li>Lightweight and optimized</li>
<li>Proper data sanitization and escaping</li>
<li>Nonce verification for all form submissions</li>
<li>No external dependencies required</li>
</ul>
</li>
</ul>
<h3>Icon Library Usage</h3>
Dashicons (WordPress Default) 
* Format: <code>dashicons dashicons-icon-name</code> 
* Example: <code>dashicons dashicons-gamepad</code> 
* Reference: https://developer.wordpress.org/resource/dashicons/ 
* Note: Dashicons are built into WordPress and work automatically – no setup required.
<h3>Important Notes</h3>
Theme Compatibility: Icon positioning uses standard WooCommerce hooks. Some themes may modify or remove these hooks, which could affect automatic icon placement. If automatic positioning doesn’t work with your theme, use the shortcode <code>[paiw_product_attribute_icons]</code> for manual placement.
Icon Library: The plugin uses WordPress Dashicons, which are built into WordPress and don’t require any external resources or setup.
Performance: The plugin is lightweight and optimized. No external dependencies are required.
<h3>Support</h3>
For support, feature requests, or bug reports, please visit the plugin’s support forum on WordPress.org.
<h3>Credits</h3>
<ul>
<li>WordPress Dashicons: Built into WordPress (https://developer.wordpress.org/resource/dashicons/)</li>
</ul>

Product Attribute Icons Display

Display customizable icons for product attributes on WooCommerce single product pages using WordPress Dashicons.

Themepure

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.
<h4>Key Features</h4>
<ul>
<li>Color Swatches – Display product color variations as clickable color circles or squares.</li>
<li>Image Swatches – Show variation images directly on the product page for quick visual selection.</li>
<li>Label/Button Swatches – Convert text-based attributes (like sizes) into styled buttons.</li>
<li>Shop Page Swatches – Enable swatches on archive and shop pages with configurable positioning.</li>
<li>Ajax Add to Cart – Add variable products to the cart directly from the shop page.</li>
<li>Tooltip Support – Customizable tooltips with configurable colors and positioning.</li>
<li>Rounded and Squared Shapes – Choose between rounded or squared swatch shapes globally.</li>
<li>Swatch Size Control – Adjust the size of swatches from the settings panel.</li>
<li>Archive Page Positioning – Place swatches before or after the add to cart button, after title, after price, etc.</li>
<li>Swatch Alignment – Control horizontal alignment of swatches on shop pages.</li>
<li>Import/Export Settings – Easily transfer your settings between sites.</li>
<li>Theme Compatibility – Works with popular themes including Astra, Flatsome, Storefront, OceanWP, and more.</li>
<li>Shortcode Support – Use <code>[tpwvs_swatches]</code> inside the shop loop.</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Install and activate the plugin.</li>
<li>Go to Products > Attributes and create or edit attributes.</li>
<li>Select the attribute type: Color, Image, or Select (Label).</li>
<li>Configure terms for each attribute with the corresponding color, image, or label value.</li>
<li>Swatches will automatically replace dropdown selects on your product pages.</li>
</ol>
<h4>Shortcode</h4>
Use <code>[tpwvs_swatches]</code> inside the WooCommerce shop loop to manually output swatches.
<h3>Development</h3>
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.
To build the plugin assets from source:
<ol>
<li>Navigate to the plugin directory.</li>
<li>Install dependencies: <code>npm install</code></li>
<li>Build for production: <code>npm run build</code></li>
</ol>
The build tool used is <code>@wordpress/scripts</code> (webpack-based). The compiled assets are output to the <code>build/</code> directory.

TPure Variation Swatches for WooCommerce

Replace default WooCommerce variation dropdowns with beautiful color, image, and label swatches on product and shop pages.

Product Attribute Icons Display vs TPure Variation Swatches for WooCommerce