NeatPlugins

<p>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.</p>
<p>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.</p>
<h3>Features</h3>
<ul>
<li>
<p><strong>Icon Library Support</strong></p>
<ul>
<li>WordPress Dashicons (built-in, no setup required)</li>
</ul>
</li>
<li>
<p><strong>Flexible Icon Placement</strong></p>
<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>
<p><strong>Customization Options</strong></p>
<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>
<p><strong>User-Friendly Admin Interface</strong></p>
<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>
<p><strong>Developer-Friendly</strong></p>
</li>
<li>
<p>Shortcode support: <code>[paiw_product_attribute_icons]</code></p>
<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>
<p><strong>Performance & Security</strong></p>
<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>
<p><strong>Dashicons (WordPress Default)</strong><br />
* Format: <code>dashicons dashicons-icon-name</code><br />
* Example: <code>dashicons dashicons-gamepad</code><br />
* Reference: https://developer.wordpress.org/resource/dashicons/<br />
* Note: Dashicons are built into WordPress and work automatically – no setup required.</p>
<h3>Important Notes</h3>
<p><strong>Theme Compatibility</strong>: 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.</p>
<p><strong>Icon Library</strong>: The plugin uses WordPress Dashicons, which are built into WordPress and don’t require any external resources or setup.</p>
<p><strong>Performance</strong>: The plugin is lightweight and optimized. No external dependencies are required.</p>
<h3>Support</h3>
<p>For support, feature requests, or bug reports, please visit the plugin’s support forum on WordPress.org.</p>
<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.

M Gogul Saravanan

<p>Product Attribute Plus is a free WooCommerce plugin that expands product attribute options. It ads Color, Label, and Image Swatches alongside the standard dropdown menu.</p>
<h3>How to install Product Attribute Plus Plugin</h3>
<p>1.Login to Your WordPress Dashboard<br />
2.Navigate to the Plugins Section<br />
3.Choose “Add New”<br />
4.Search for the Plugin: ( In the “Search plugins” box, type “Product Attribute Plus” )<br />
5.Select the “Product Attribute Plus” Plugin & Activate it.</p>
<h3>Installing a WordPress plugin via FTP (File Transfer Protocol) involves uploading the plugin files to your server manually.</h3>
<p>1.Download the Product Attribute Plus extension for WooCommerce Plugin<br />
2.Unzip the downloaded file. You’ll typically get a folder containing all the plugin files.<br />
3.Use an FTP client like FileZilla to connect to your server.<br />
4.Once connected, navigate to the /wp-content/plugins/ directory in your WordPress installation on the server.<br />
5.From your local machine, locate the folder extracted in step 2. Drag this folder into the /wp-content/plugins/ directory on your server.<br />
6.Allow FileZilla or your FTP client to complete the upload. This might take a few moments, depending on the plugin’s size and your internet speed.<br />
7.Once the upload is complete, go to your WordPress dashboard. Navigate to the “Plugins” section. You should see the plugin you just uploaded listed there. Click “Activate” to activate the plugin.</p>
<h3>How to use</h3>
<p>1.First, install and activate the <a href="https://wordpress.org/plugins/woocommerce/" rel="ugc">WooCommerce Plugin.</a> This plugin is necessary to use Product Attribute Plus Plugin.<br />
2.Next, install & activate the <a href="https://wordpress.org/plugins/product-attribute-plus" rel="ugc">Product Attribute Plus</a><br />
3.Once both plugins are activated, go to <strong>WooCommerce > Settings > Swatches</strong> to set the default options and configurations for single variable product page.</p>
<h3>WooCommerce Themes</h3>
<p>Product Attribute Plus works with any theme, including:</p>
<ul>
<li>Astra</li>
<li>Hello Elementor</li>
<li>OceanWP</li>
<li>Storefront</li>
<li>WordPress Default themes</li>
</ul>
<h3>Source Files and Compression Details</h3>
<p>This plugin includes compressed JavaScript and CSS files for optimal performance. The uncompressed source files and build instructions are provided to ensure transparency:</p>
<ul>
<li>
<p><strong>Uncompressed JavaScript Files</strong>:</p>
<ul>
<li><code>/product-attribute-plus/src/js/admin</code> – JavaScript files for the admin area.</li>
<li><code>/product-attribute-plus/src/js/public</code> – JavaScript files for the public-facing area.</li>
</ul>
</li>
<li>
<p><strong>Uncompressed SCSS Files</strong>:</p>
<ul>
<li><code>/product-attribute-plus/src/scss/admin</code> – SCSS files for the admin area.</li>
<li><code>/product-attribute-plus/src/scss/public</code> – SCSS files for the public area.</li>
</ul>
</li>
</ul>
<p><strong>Build Instructions</strong>:<br />
All necessary libraries and steps to build the files are included in the <code>package.json</code> file. To compile and compress the source files, run the appropriate build commands outlined in the <code>package.json</code>.</p>
<p>For more details on setting up the build process, please refer to the <code>package.json</code> file located in the root of the plugin directory. Here are the main commands to use:</p>
<ul>
<li><code>npm run scss:admin:min</code> – Builds a production (compressed) version of the CSS file for the admin area.</li>
<li><code>npm run scss:public:min</code> – Builds a production (compressed) version of the CSS file for the public-facing area.</li>
<li><code>npm run js:dev</code> – Creates both uncompressed and development versions of the JavaScript files.</li>
<li><code>npm run js:prod</code> – Builds production (compressed) versions of the JavaScript files.</li>
</ul>


Product Attribute Plus

Product Attribute Plus enhances WooCommerce product attributes with Color, Label, and Image Swatches.

Product Attribute Icons Display vs Product Attribute Plus