Gravity Forms Woocommerce Tutorial

In this tutorial, I will cover two examples of how to use gravity forms and woocommerce in your ecommerce website shop to deal with complex products. 

Woocommerce with Gravity forms enables you to deal with a large variety of more complex situations, for example:

• complex products with lots of variations
• add-ons, e.g. gift wrapping choices, gift cards with a message
• the need to gather more detailed information, for example, booking information for an event 

Plugins you will need:

• Gravity Forms
• Woocommerce
• Woocommerce Gravity Forms Product Add-on

Steps

1. Install and activate the Gravity Forms plugin. When you activate gravity forms and add your licence key, ensure you go through the set-up process, including the currency you will use in your store.
2. Install and activate Woocommerce.
3. Then install the Woocommerce Gravity Forms Product Add-on plugin.

Gravity Forms Woocommerce

There are 2 approaches.

Example 1: Where the form is the product

While it is possible to use gravity forms as a stand-alone ecommerce solution, I use Woocommerce as well because of the additional functionality. Woocommerce offers more account creation functionality, making it easier for returning customers to buy again. It also offers the ability to add additional products to your woocommerce shop.

1. Start with the gravity form.

Create a gravity form that offers all the options. In the example below, I used gravity forms conditional logic to make the details about the product appear only after it is selected. In the example below, the client is offering multiple services. A customer can buy these services easily from one form rather than having to navigate to multiple products. Any additional details required for that booking can be collected with this same form.

2. Create a product called Book Now

Make sure the Gravity Forms Product Add-on is selected in the Screen options.

Then fill in the Gravity forms Product Add-on. I made the product $0 and did not add any details to my long or short descriptions. You can add a product image if you like, but I opted to hide the image using CSS for this particular option.

Here is an example of the booking page. Johanna has other products in her woocommerce shop that can be purchased as well as downloaded.

Gravity Forms Woocommerce

Example 2: Where the form is an add-on to the product

Create the product as per normal and then set up the gravity form with the add-ons or the additional variations.

This method was very helpful for woocommerce subscriptions. This enabled me to move some of the variations to the gravity form, ie the colour palette, so that the number of subscription variations was reduced, meaning the product page was faster to load and process.