Gravity Forms is a WordPress premium plugin that allows you to distribute, manage and connect your WordPress website’s forms. It’s quite simple to set up, but some users need help on how they can integrate Gravity Forms with WooCommerce.
How to set up Gravity Forms in WordPress
You probably already have your WooCommerce store up and running, but chances are you haven’t created a Gravity Form yet.
First, we’ll explain how to create a Gravity Form. Then we’ll show you how to integrate Gravity Forms into WooCommerce. Below you will find the steps to set up Gravity Forms in your WordPress.
You can start by installing and activating the Gravity Forms plugin – this plugin will ask you to add or purchase a license key.
Once done, you need to choose your settings. Here are some suggestions:
- Run plugin updates in the background. This is recommended instead of manually updating the plugin.
- Display the “Forms” menu in the top WordPress toolbar for easy access.
- Protect the “Form Entries” from spam with the Akismet integration.
The last thing you need to do is make the “Global Settings” and then your installation is complete.
Click on the “Create a form” button.
Add a title and a description and click on “Create form”.
Then “Select field type”. The standard fields include:
- Checkbox
- Hidden
- HTML
- Dropdown
- Number
- Multiple selection
- Page
- Radio buttons
- Paragraph text
- Single line text
- Section
Click on the fields (dates, name, etc.) to create your form and then click on any field to move it to a new location.
You can customize each field individually. These fields have some additional settings that you can view. For example, if you expand the name field, you can add a description, change the label, toggle first and last names on and off, and edit the appearance of the field.
Once you have created the form, click on Update. You can also make changes later.
Step-by-Step Integration of Gravity Forms with WooCommerce
Now that you’ve set up Gravity Forms on your WordPress site, let’s walk through how to properly integrate it with your WooCommerce store. This integration will allow you to create custom product forms that collect specific information from customers before they make a purchase.
Before getting started, make sure you have WordPress installed and updated, the WooCommerce plugin installed and configured with at least one product, Gravity Forms plugin installed and activated with a valid license, and the WooCommerce Gravity Forms Product Add-ons extension (this is the bridge that connects both plugins).
Installing the WooCommerce Gravity Forms Product Add-ons Extension
- Log in to your WordPress dashboard
- Go to Plugins > Add New > Upload Plugin
- Upload the WooCommerce Gravity Forms Product Add-ons zip file (purchased separately from the Gravity Forms or WooCommerce website)
- Click Install Now, then Activate Plugin
If you have your license key, you can also search for it directly in the plugin repository from your dashboard, though this extension typically requires a separate purchase.
Now, we can link Gravity Forms to your WooCommerce products.
- Go to Products > All Products in your WordPress dashboard
- Either edit an existing product or create a new one by clicking Add New
- Scroll down to the Product Data section
- Make sure the product type is set to Simple product or Variable product
- Check the box that says Enable Gravity Form
- A new section will appear with Gravity Form settings: here, you need to select the form you want to use from the dropdown menu, choose whether to display the form before or after the add to cart button, decide if you want to disable the default quantity selector and then set options for cart button text and form display settings.
Creating a Gravity Form for Products
While you’ve already learned how to create a basic Gravity Form, here’s how to optimize one specifically for WooCommerce products:
- Go to Forms > New Form
- Give your form a name like “Product Options Form”
- Add the fields relevant to your product. For customizable products, consider:
- Option fields for variations (colors, sizes, materials)
- File upload fields for custom designs
- Paragraph fields for special instructions
- Make sure to include the necessary pricing fields (Product, Quantity, Options, Total)
- Save your form
Pro tip: WooCommerce product forms don’t necessarily need a Submit button since the Add to Cart button will handle the submission process.
Before going live, always test your integration. To do this:
- View your product on the frontend of your website
- Fill out the Gravity Form with various options
- Click Add to Cart and proceed to checkout
- Verify that all form data is properly included in the cart and checkout pages
- Complete a test order (you can cancel it afterward)
- Check the admin order details to ensure the form information appears correctly
Managing Orders with Form Submissions
When a customer places an order using a product with a Gravity Form:
- The order will appear in WooCommerce > Orders like any other order
- Open the order details to view the form submission information
- All form fields and selections will be displayed in the order meta data
- This information is also included in order emails sent to both admin and customer
Advantages of integrating Gravity Forms with WooCommerce
As already mentioned, Gravity Forms is an advanced WordPress plugin that allows users to create complex forms for the frontend. There are many ways to benefit from integrating Gravity Forms with WooCommerce. For example:
- If you are an event organizer, you can use Gravity Forms to accept online registrations and sell tickets to attendees.
- If you support a charity with your online store, you can set up Gravity Forms to accept online donations.
- Gravity Forms is an excellent choice for online stores that need a convenient way to have customers fill out a form before making a payment.
- These forms are great for offering cash-and-carry items. You can create an easy path for your customers by adding a Gravity order form to your website.
Gravity Forms does have some limitations when used without third-party add-ons. First of all, a simple Gravity Forms WooCommerce integration would complicate tasks such as order management, inventory management and order confirmation.
Also, some simpler tasks (like adding conditional pricing to WooCommerce or allowing only logged-in customers to submit a Gravity form to your website) are easier with a dedicated solution.
WooCommerce Gravity Forms product add-ons
Once you have installed Gravity Forms and the add-ons plugin for your WooCommerce store, you will see a Price Fields section in Gravity Forms.
Some additional fields can be used when creating an order form that is linked to a product. Regardless of how your “form” is set up, the “Total” and “Product” fields must be present if you are using one of the price fields.
Product field
In the ‘Product field’ you can enter the name of the product and the base price (you can keep the value 0 if you do not have a base price). This field is not displayed on the WooCommerce product page, but will still be processed during checkout.
The Product List has a single window, a drop-down menu and a drop-down list to allow users to set variable product options or product quantity.
Quantity field
The quantity field is linked to the product field & you must select the product you want to link it to if you have added multiple products. Field types include Dropdown, Number or Hidden.
Another great Gravity Forms feature in conjunction with the Quantity Field is the conditional logic. You can use conditional logic to hide or show this quantity field depending on the values of other fields.
Option field
The “Option field” is normally used to offer options in products, and it allows you to add costs for additional services to the product sold. Options such as size, color, or customizations can be listed using this field.
An example is if you’re selling a basic spa package; you can add services such as hot stone massage and manicure to your package as needed, and the associated costs will be added to the total amount.
Total field
Another important field for the Gravity Fields add-on is the “Total Field”. Total Field automatically calculates the total price of your product, including all options, shipping rates, fees, quantity, etc.
The field then displays the total cost of your product, which is then added to the shopping cart.
The Gravity Forms Product Add-ons extension is a great way to ask customers for specific information. For example, if you sell furniture, you may need a suitable way to ask customers about their preferences, such as the type of fabric or wood.
Conclusion
Gravity Forms is a useful extension for most WordPress websites, and with the add-ons, it can also be integrated into WooCommerce stores. Commercial websites that sell customized products can benefit from this WordPress extension as they can accept custom values from shoppers with this extension.
Gravity Forms can be an excellent alternative for small businesses that don’t want to implement a full ecommerce solution for their website.
