WPClever

<p><strong>WPC Variation Swatches for WooCommerce</strong> will definitely kill the game for online shops and WooCommerce sites with an elegant, responsive look and impressive effects. There’s no better way to showcase your products in the best look and assist customers in choosing their preferred options. WPC Variation Swatches offers a variety of predefined styles for attributes of variable products, with the ability to use different selector types on a single product page and position tooltips at the best position for a great match with your theme/template.</p>
<p>More remarkably, <strong>WPC Variation Swatches</strong> is fully compatible with other WPC plugins, which offers the chance to use swatches on a <a href="https://wordpress.org/plugins/woo-product-bundle/" rel="ugc">Smart Bundle</a>, <a href="https://wordpress.org/plugins/woo-bought-together/" rel="ugc">Frequently Bought Together</a>, <a href="https://wordpress.org/plugins/wpc-force-sells/" rel="ugc">Force Sells</a> or <a href="https://wordpress.org/plugins/wpc-grouped-product/" rel="ugc">Smart Grouped Product</a> without the need to worry about the compatibility and experience.</p>
<h4>Live demo</h4>
<p>Visit our <a href="https://demo.wpclever.net/wpcvs/" title="live demo" rel="nofollow ugc">live demo</a> here to see how this plugin works.</p>
<h4>Key Features</h4>
<ul>
<li>Exquisite display for attributes & variations of variable products</li>
<li>Automatically set button swatches as the default type for all custom attributes</li>
<li>Allow multiple selector types in a single product page at users’ preferences</li>
<li>Up to 5 types for individual attributes: select, radio, button, color, image</li>
<li>Two elegant styles for bordering: square or rounded</li>
<li>Show/hide or choose a position for the tooltips</li>
<li>Blur out for inactive variations</li>
<li>Responsive display for both desktop and mobile devices</li>
<li>Enable/disable click again to undo the selection on current attribute</li>
<li>Enable swatches for shop/ archive page</li>
<li>Enable swatches for non-variable products</li>
<li>Compatible with other WPC special product types: Smart Bundles, Grouped Product</li>
<li>Compatible display when added as Bought Together or Force Sells items</li>
<li>Optimized for supporting better display in RTL languages</li>
<li>WPML compatible for building multilingual sites</li>
</ul>
<p>Wanna save your precious time working on variations? Try our brand-new free plugin <a href="https://wordpress.org/plugins/wpc-variation-bulk-editor/" rel="ugc">WPC Variation Bulk Editor</a> and <a href="https://wordpress.org/plugins/wpc-variation-duplicator/" rel="ugc">WPC Variation Duplicator</a>.</p>
<h4>Various Selector Types On A Page</h4>
<p>A notable highlight in the feature list of the WPC Variation Swatches plugin is the possibility to use up to 5 different types for attributes on a single product page.</p>
<p>From the admin dashboard, navigate to the Products section >> Attributes >> in the Type option of each attribute, click on the list you can find 5 different types:</p>
<ul>
<li>Select (dropdown, default)</li>
<li>Radio</li>
<li>Buttons</li>
<li>Image</li>
<li>Color</li>
</ul>
<p>For variable products that have 5 attributes as in our <a href="https://demo.wpclever.net/wpcvs/" rel="nofollow ugc">live demo</a>, you can choose a suitable type for each attribute based on your preferences. This is truly useful for optimizing the appearance and arranging your product page for optimal user experience.</p>
<h4>Buttons As Default Type For Custom Attributes</h4>
<p>From the plugin settings, choose “Yes” for the “Button swatches by default” option to set button swatches as the default type for all custom attributes. This will save time when users need to configure the swatches type in bulk.</p>
<p>Note: Except for 2 default attributes by WooCommerce (size & color), all other custom attributes with a different name from these are supposed to have the default dropdown (Select) type. Turn this option on will replace the dropdown with button swatches for all custom attributes on your store automatically.</p>
<h4>Other alternatives you might also like</h4>
<ul>
<li><a href="https://wordpress.org/plugins/wpc-variations-radio-buttons/" rel="ugc">WPC Variations Radio Buttons</a></li>
<li><a href="https://wordpress.org/plugins/wpc-variations-table/" rel="ugc">WPC Variations Table</a></li>
<li><a href="https://wordpress.org/plugins/wpc-show-single-variations/" rel="ugc">WPC Show Single Variations</a></li>
<li><a href="https://wordpress.org/plugins/wpc-linked-variation/" rel="ugc">WPC Linked Variation</a></li>
<li><a href="https://wordpress.org/plugins/wpc-smart-messages/" title="WPC Smart Messages" rel="ugc">WPC Smart Messages</a></li>
</ul>


WPC Variation Swatches for WooCommerce

WPC Variation Swatches is a beautiful color, image, radio and buttons variation swatches for WooCommerce product attributes.

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.

WPC Variation Swatches for WooCommerce vs Product Attribute Plus