woocommerce variation swatches Archives

WooCommerce Product Attributes: The Complete Guide

Attributes are one of the most useful parts of WooCommerce. They are also one of the most confusing.

Most store owners meet attributes for the first time when they try to build a variable product. They add a “Size” attribute, tick a box, and hope for the best. Then something breaks. The filter shows nothing. The attribute does not appear on the product page. Or the same color is spelled three different ways across the shop.

This guide fixes that. You will learn what attributes are, the difference between global and custom attributes, how to create both, how to show them, how to filter with them, and how to fix the problems that come up most often.

Everything here is checked against the official WooCommerce documentation. Where a feature needs a plugin, or only works in certain conditions, we say so.

How to Turn WooCommerce Variation Dropdowns Into Radio Buttons

Saidul Islam3 weeks ago 227 views

Open any WooCommerce variable product. The sizes, the colors, the materials — they all sit hidden inside a grey dropdown. Your shopper has to click once just to see what you sell.

That extra click costs you. Shoppers cannot compare options side by side. They cannot see that the red one is sold out until after they pick it. On a phone, the dropdown opens a native picker that covers the whole screen.

Radio buttons fix this. Every option sits on its own line, visible without a click, with a familiar circle to tick. This guide shows you two ways to get them — one with code, one with a plugin — plus the free button and color swatch options if radio turns out not to be what you want.

How to Hide or Blur Out-of-Stock Variations in WooCommerce

Saidul Islam3 weeks ago 336 views

You have a great product page. It shows five colors and four sizes. That is twenty options in total.

Now, let’s assume a shopper visits your page. She clicks “White.” Then she clicks “XL.” And then she sees this message: This item is currently out of stock and unavailable.

That is a bad moment. She did the work of choosing. Your store gave her nothing back.

Most WooCommerce store owners eventually run into the same question: How do I stop showing variations that customers can’t buy?

WooCommerce gives you one built-in setting that covers part of this. The rest you shape yourself. There are four ways to handle it, and hiding is not always the best one. Sometimes it is better to blur the option, cross it out, or grey it out.

This guide shows you all four ways. You will learn how each one works, what the code looks like, and which one fits your store.

Unlock more sales with Variation Swatches for WooCommerce-and yes, it’s 100% free.

Saidul Islam2 months ago 440 views

Look closely at the comparison. The difference isn’t just aesthetic-it’s financial.

Most WooCommerce store owners spend thousands of dollars and countless hours obsessing over top-of-funnel marketing. They fine-tune Meta campaigns, optimize for SEO, and burn through ad spend to drive targeted traffic to their product pages.

But the moment a potential buyer lands on the page, they hit an invisible wall: the default WooCommerce variation dropdown.

How to Display Variation Swatches on Archive or Shop Page for WooCommerce

Ahmed Ehsaan2 months ago 27,063 views

In WooCommerce, displaying variation swatches on the shop page is crucial for enhancing the shopping experience. These swatches allow customers to see different options (like color, size, or style) of a product at a glance, without having to click on each individual product page.

Moreover, visual representations through swatches make the products more appealing and engaging. Overall, incorporating variation swatches on the shop page improves user experience, boosts customer satisfaction, and ultimately leads to higher sales conversions.

Adding color variations is one of the best ways to bring more life into your product page.
On the other hand, when you add image variation swatches, it provides a pleasant way to display variations of a product.

How To Enable Label, Color, And Image For Existing / PreBuild Variable Products In OceanWP Theme.

Ahmed Ehsaan6 years ago 8,617 views

If it needs to activate image, color and label swatches on existing / prebuilt variable products in you OceanWP powered website, you can give a go from here. Check the following screenshot. The default variation select dropdown, would be turn into swatches. Continue reading

How To Enable Color Swatches in OceanWP Theme for WooCommerce Variable Product Attributes

Ahmed Ehsaan6 years ago 11,394 views

Variation Swatches are the awesome technology to boost site conversion. It replaces the default WooCommerce select dropdown for variable select field and enables color, image, radio and label swatches.

In this tutorial, I am going to show you how you can enable Color Swatches in OceanWP Theme for variable product attributes.

OceanWP is one of the popular WooCommerce Theme in the WordPress Theme directory. You can download the OceanWP theme from here.

I am assuming you have the OceanWP theme installed. To enabled color swatches in OceanWP Theme for your variable products, you have to install WooCommerce Variation Swatches Plugin first.

Live Demo

Download Free Version

Upgrade to Premium Version