Everything you need to know about the APF URL add-on

This document explains what the URL add-on for Advanced Product Fields for WooCommerce does and how it can be set up.

Introduction

Similarly to how you can link to WooCommerce variations, the URL add-on allows you to pre-select values via the product’s URL. Here’s an example:

Say you are selling a product in 2 colors: red and green. Your product options may look like this:

If you’d like to pre-select the green color, you can link to your product with the URL yourstore.com/product/your-product?color=green.

When a user visits your product through that link, the green color will be preselected:

How to set up the plugin

You can easily set up the plugin via the steps below.

Installing the plugin

1. Make sure you have Advanced Product Fields version 1.9.0 or higher. Both the Pro and Extended plans work with this add-on.
2. Purchase and download the URL add-on from your account.
3. Install the downloaded ZIP file in your WordPress dashboard via Plugins → Add New.

Configuring the plugin

1. In your WordPress backend, go to the field you’d like to make available through the product URL and find the URL Key setting.
   
2. In this setting, you can define what the URL keyword should be for this field. In our color example from above, it makes sense to use “color” as the keyword. That means the plugin will watch out for color= in the URL: your-product/?color=green.
3. The keyword can not contain spaces or special characters.

That’s it! You’ve now configured the plugin to allow pre-setting values via the product URL.

An important note about URLs

URLs contain a limited set of characters: letters, numbers, and a few special characters ( like – and _ ). Anything else, such as spaces or symbols like “+” or “?”, are not allowed in a URL.

You’ve likely never seen a space in a URL, but instead, the URL looks like this: yoursite.com/text=my%20spaced%20text. That technique is called “encoding”, where special characters are represented by a percent-notation.

Below is a short list of encoded symbols. Check this page for a full list of URL encodings.

Character	Encoding in URL
A space	%20
+	%2B
?	%3F
%	%25
@	%40

If your options contain characters that are not allowed in a URL, you will have to encode them in the URL. For example, if you have an option with value green + blue, you would share it in your URL like this:

yoursite.com/product/xyz?option=green%20%2B%20blue

Notice 3 encoded symbols %20 %2B %20 which encodes a space, the plus symbol, and again a space.

Troubleshooting

The option is not pre-selected when passing it via the URL parameter or key

You’ve correctly set up the URL add-on and added a URL key to your field in the settings. But when you test it in the browser, the page is not pre-selecting the value passed through the URL?

This likely happens because your option values contain special characters. URLs can only contain a limited set of characters: letters, numbers, and a few special characters ( like – and _ ). Anything else needs to be encoded to work. Please read the section above called “An important note about URLs” to find out how to correctly encode special symbols in a URL.