I’ve been asked many times how to do make product attributes linkable, and yesterday I found a post in the WooCommerce support forum on WordPress.org about this as well, and I decided to write this article.
So, by default WooCommerce strips all the HTML from attributes values, this means that you can’t use an HTML anchor to make product attributes linkable. We can still do it though with some custom code.
Luckily, WordPress helps us now with term metas introduced in WordPress 4.4.
Add URLs to Your Product Attributes
In WooCommerce we have two types of product attributes:
- Global product attributes
- Local product attributes
What is the difference?
Global product attributes are created from Products > Attributes, they are taxonomies, like product categories or post tags. Any product can use an attribute defined there, this is why they are global.
Local product attributes instead are defined in the product, while creating/editing it, in the tab Attributes. They are available only on the product where they have been defined and not usable by other products.
Because of this difference, we need to use two different ways to add a URL to the product attribute term.
Open your functions.php file in wp-content/themes/your-child-theme-name/ and add this code at the end of the file:
What does this code do?
From line 1 to line 67, the code adds a field named URL in the form for creating and editing global attributes. The functions are to register the field, add it in the Add New term form, add it in the Edit term form and save the field.
From line 69 to the end of the file, it tweaks the values in the tab Additional Information in the single product page to handle the URL of the product attribute term. This function, also handles URLs for local attributes.
How to Use The Product Attribute URL
For global attributes, go to Products > Attributes and add a new attribute, or edit an existing one. It will appear in the table on the right. Click on the cogs icon to add product attribute terms in it, you will see this form:
As you can see, there’s a new field at the bottom of the form Add New Designer (Designer is the name of the attribute I used for this example), named URL. Write there the URL you want the product attribute term to link to.
The same field is available while editing the product attribute term:
For local attributes instead, we don’t have an interface like this, so we have to find a workaround to add URLs to product attribute terms.
Did you know that I love Markdown? That is what we are going to use for local attributes, Markdown!
Edit a product from Products > All Products and open the Attributes tab. From here, add a new Custom product attribute. Then give it a name and add some values using Markdown to create links:
This is the format to use. An example is shown in this screenshot:
The first attribute here, Logo, is the local attribute, the second, Designer, is the global attribute.
Now click on Save Attributes and Publish your product. This is how it will appear on the website, using the theme Storefront:
Thanks to James for being my example on this post. I couldn’t use my name because calling me a designer is a shame.