Kitchen Table Web Design

Affordable Website Design Auckland specialising in taking local small business websites to the next level and basic SEO Services.

You are here: Home / WordPress Tutorials / Gravity Forms Woocommerce Tutorial

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 eg 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:

Steps

  1. Install and activate the Gravity forms plugin. When you activate gravity forms and add your licence key, make sure you go through the set-up process, including the currency you will be using 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 which makes 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.

booking form using gravity forms | Woocommerce Gravity Forms Tutorial

2. Create a product called Book Now

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

screenoptions gravity forms product add on

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

product add on | Woocommerce Gravity Forms Tutorial

 

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

book now product | Woocommerce Gravity Forms Tutorial

 

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.

product add on and variations with gravity forms | Woocommerce Gravity Forms Tutorial

Learn More