Display WooCommerce Attributes on the Shop Page

WooCommerce Display Attributes on Shop Page
3 Shares

You’ve probably seen it before when viewing other eCommerce stores; the products display which attributes (or variations) are available for a product.

WooCommerce Attributes on Shop Page

At this point, you’ve probably asked yourself “how do I display attributes on the shop page of my WooCommerce store?”.

Right?

Well let me guide you through it with 3 potential methods:

Method 1: Code it Yourself

Let’s think about what we want to achieve here:

  • Display an attribute (or attributes) like “Color” under each product in the WooCommerce shop.
  • Display each attribute value, and indicate it’s availability with a strikethrough.
  • Only show attributes on variable products where the attribute is used for variations.

The first thing we’ll do is hook into the loop. We’ll output out attributes after the product title, so I’m going to use the woocommerce_shop_loop_item_title action.

Firstly, we check if the product is variable. If not, we return and do nothing.

Next we fetch the available attributes using a custom iconic_get_available_attributes() function, detailed shortly.

If there aren’t any attributes, we return the function again and do nothing.

Otherwise, we loop through the attributes array. We break out of PHP and add some HTML.

We echo the attribute name into a p tag and then loop through the values into a list (the ul and li tags).

Simple!

But what about the iconic_get_available_attributes() function? That’s where things get a bit more complicated.

This is where we’re going to fetch the attributes and then check whether they are purchasable.

The function accepts 1 parameter, $product, which we know will always be a variable product (an instance of WC_Product_Variable).

I’m using some static caching here. By stating that $available_attributes is a static variable, we can assign our data to it one time and then reference the “cached” data later on without rerunning all of the code.

So we start by getting the ID of the product. Then we check whether our data has already been assigned to the $available_attributes array for this product. if it has, we return it. Remember: as soon as you return in a function, the function stops running and the data is returned to the caller.

Otherwise, we assign an empty array to that product ID.

We then use the built in get_variation_attributes() method for the product. This will fetch only those attributes which have been used for a variation. This ignores whether those variations are in stock or purchasable.

If there aren’t any (unlikely), then we return the empty array. Otherwise, we continue.

I’m then calling iconic_get_attributes_to_show(). This returns an array of which attributes we want to display for each product.

If it’s a product specific attribute, you’d just enter the attribute name that you used (make sure to match the case).

Then we loop through the attributes. If the attribute is not in out $attributes_to_show array, then we continue. This will go to the next item item in the loop.

Next we fetch the attribute data, including whether it’s purchasable, using the iconic_get_available_attribute() function.

If data is returned, we add it to the $available_attributes array.

iconic_get_available_attribute() is a function that will convert the attribute data we already have into something more useful. It will determine the correct attribute labels and also whether the attribute has a variation which is available for purchase.

The function accepts 3 parameters:

  • $product
    This is the product object. An instance of WC_Product_Variable.
  • $attribute
    This is the attribute slug, or name if it’s a product specific attribute.
  • $values
    This is an array of the available attribute values.

The function is going to return an array of data. The array will contain:

  • slug
    This is the attribute slug.
  • name
    This is the attribute label.
  • values
    This is a further formatted list of attribute values. Each value contains the following data:

    • name
      This is the attribute value label.
    • available
      This is a true or false flag which indicates whether there’s a variation available for this attribute value.

To get started, we check whether this attribute exists as a taxonomy. If it does, we handle the data slightly differently.

If there’s no taxonomy for it, then we know it’s a custom attribute for this specific product.

This means $attribute is the name/label of the attribute so we can assign that to our array already.

Then we loop through the $values.

We add the value to our new array, assigning it a name and using iconic_has_available_variation() to check whether there’s a purchasable variation for the attribute value.

Once complete, we return the newly formatted attribute data.

If this attribute was a taxonomy, we skipped all that and started by fetching the taxonomy object.

We then use get_taxonomy_labels() to fetch the labels for the attribute.

For the name key in our array we can use the singular label.

Then we’ll loop through the values again and assign them to the array with their additional data.

In this instance, each $value is a term slug. As such, we fetch the term using get_term_by().

If it exists, we assign the data to the $available_attribute array. Once all values are complete, we return the array.

The final function we need to run through is iconic_has_available_variation(). This function simply checks whether there’s a variation available to purchase with that attribute value and returns true or false.

Firstly we need to format the attribute “slug” to match that of the variations. WooCommerce simply prefixes them with attribute_.

We’re then going to fetch all variations available using the get_available_variations() method.

We’ll loop through each variation, and then each attribute for that variation.

Is the attribute does not match the one we are looking for we continue to the next attribute in the loop. Otherwise we proceed.

If the attribute value does not match the one we’re looking for, and the value is not empty (I.e. “Any Color…” has been selected) then we continue to the next attribute in the loop. Otherwise we proceed.

Next we check if the variation is in stock and purchasable. If either of them is not true, we continue to the next attribute in the loop. Otherwise we proceed.

If we got this far, it means we found a matching purchasable variation. We set $available_variation to true, then break out of the loop and return it.

That’s it! Now any attributes you assigned in iconic_get_attributes_to_show() will be displayed in your WooCommerce shop.

Method 2: Use WooCommerce Attribute Swatches

WooCommerce Attribute Swatches is a plugin which allows you to display your variable product options as colors, images, radio buttons, or text swatches. It also has “show in catalog” functionality built in.

When you set an attribute to be visible in the WooCommerce catalog, it will show in the format you’ve chosen. For example, if your attribute uses color swatches, then this is what will show in the catalog and shop pages.

WooCommerce Change Product Image by Color

You can also choose whether the attribute values click through to the product and pre-select that option, or change the product image in the catalog; a great way to preview different colours of your product.

Free Trial of WooCommerce Attribute Swatches

Save yourself some time and get access to other awesome features. Give WooCommerce Attribute Swatches a go now.

Get Free Trial

Method 3: Use WooCommerce Show Single Variations

Another popular option is to show the variations in your shop as though they were individual products. WooCommerce Show Single Variations allows you to do just that.

Once enabled you can choose which variations to display in your shop, and where to display them.

You can show them everywhere, catalog pages, filtered results, and search results. You can then hide the parent product.

Clicking on a variation will link you through to the variable product and preselect the appropriate options for the variation.

This is a fantastic way to improve your product collection and customer experience on your WooCommerce store. Users can filter by attributes and see the exact variation they want to purchase.

Free Trial of WooCommerce Show Single Variations

This is one of our most popular WooCommerce plugins, used by thousands of store owners. Are you one of them yet?

Get Free Trial

Conclusion

This article will give you plenty of options to make your customers aware of what options are available for each of your variable products. Any questions? Simply comment below.

3 Shares

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of