Add-ons extension for WooCommerce

The Product Add-ons extension for WooCommerce gives you the ability to offer customisable online products. Users will be able to give their input on products such as gift messages, engraving or any other kind of personalisation. In this blog post, I’ll tell you how this extension works and then I’ll tell you how to use this extension in combination with Gravity Forms.

How the Product Add-ons extension works

The Wren Design is an online eCommerce store and one of their products is an “iPad sleeve”. Wendren (the owner) decides that she would like to offer branded iPad sleeves for an event called WordCamp (an informal gathering of WordPress enthusiasts, bloggers, podcasters, developers and designers). To accomplish this, she decides to use the Product Add-ons extension.
To begin with, Wendren will need to setup a product add-on in the WooCommerce admin section. She will also need to choose whether to set this up per-product or globally. Setting it up per-product is when you apply the setting to a single product only, and setting it up globally is when you apply it to all or multiple products. In this example, the per-product configuration is suited for the iPad sleeve.
Now it’s time to start configuring the per-product add-on settings. She goes to the WooCommerce “Products” section and chooses to edit the iPad sleeve. Thereafter she scrolls down to the “Product Data” section and on the left bottom panel she finds “Add-ons”. In the “Add-ons” section she names her add-on “WordCamp Branding”. This name will be displayed to users on her website. In the add-on group description she writes: “Would you like to add WordCamp 2012 branding?”.

add-ons extension
Picture source: WooThemes documentation

Thereafter she has to choose how the user will answer her question above. There’s a choice between the following:

  • a checkbox
  • radio buttons
  • a select box
  • a custom input (text)
  • a custom input (text area)
  • a file upload
  • a custom price input
  • a custom input multiplier

She chooses radio buttons because visitors will have a choice between two options. She adds two radio button options which will be displayed underneath the name and description. The options are “yes” or “no” and this will answer the question above. Next to “yes” and “no” she inserts a price. If a user selects “yes”, the price displayed next to it will be added to the original iPad sleeve price. And next to “no” she added the value “0” in order to show users that they won’t pay extra when selecting this option. Lastly she makes the product add-on a “required” field, meaning users will have to answer the question in order to proceed.

add-ons extension
Picture source: WooThemes documentation

Another route that could have been followed was to setup a global product add-on. In the WooCommerce settings you can go to Products->Global Add-ons->Add Global Add-on, and from there you can specify groups of products on which you would like to apply a certain add-on. In this blog post, I won’t cover the setup process of global add-ons because we need to still discuss Gravity Forms.

Gravity Forms

The Product Add-ons extension can be used with Gravity Forms (an easy to use form builder). Although the Product Add-ons extension has its own form building abilities, some online shops require extra form functionalities for their add-ons, therefore using this feature will ensure maximum usage capabilities. The Product Add-ons extension will work with any Gravity Forms licence.
In order to setup your add-on through Gravity Forms you will need to go directly to the Gravity Forms form-builder. Then you need to build a new form based on the product add-on fields that you would like to display. Remember that you will need to use fields supported by the Product Add-ons extension. To learn how to properly setup your add-ons through Gravity Forms, have a look at the WooThemes documentation.
Once you’ve completed your form, you will need to go to the WooCommerce products section and then to Add-ons (where Wendren configured her per-product add-on earlier). At this point, you will be able to connect your Gravity Forms to your chosen add-on. You will also need to configure some extra options (covered in the WooThemes documentation) and then your product add-on will work on your website.

Conclusion

The Product Add-ons extension allows you to receive real-time user input. Users enjoy personalising their products and therefore this extension is perfect for an online shop offering such features.