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.
This is the product object. An instance of WC_Product_Variable.
This is the attribute slug, or name if it’s a product specific attribute.
This is an array of the available attribute values.
The function is going to return an array of data. The array will contain:
This is the attribute slug.
This is the attribute label.
This is a further formatted list of attribute values. Each value contains the following data:
This is the attribute value label.
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.
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.