Jawad Abdani

WP Notch

Imagine you could easily show off what makes your products special. You know, the cool stuff about them that sets them apart. Well, our special tool lets you do just that, right where people can see it when they’re looking at your products online.
With our tool, you can put those special things about your products on the pages where you sell them. This helps your customers because they can learn more about what they’re buying.
And guess what? You get to decide where these special things show up on the page. Maybe right under the product name, or next to the price, or even after the description or pictures. Our tool is easy to use, and you can choose where things go without any trouble.
Setting up the tool is really simple. Just add it to your website, turn it on, and start making things look the way you want. Even if you’re not an expert, you’ll find it easy because we have instructions to help you.
And if you ever need help, we’re here for you. Our team is always ready to answer your questions and make sure you have a great experience using our tool.
So, if you want to make your product pages look awesome and impress your customers, our super tool for WordPress is what you need. Go ahead and get it today, and make your online store the best it can be!
To get a comprehensive overview of this plugin, check out this <a href="https://wpnotch.com/how-to-display-product-attributes-woocommerce/" rel="nofollow ugc">blog post authored by WPNotch</a>.

Display Product Attributes for WooCommerce

Boost your product conversions effortlessly by showcasing their unique features — the standout qualities that set them apart from the competition.

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.

Display Product Attributes for WooCommerce vs TPure Variation Swatches for WooCommerce