Did you know that retail eCommerce sales in the US are forecast to account for 23.6% of all sales by 2025?
It’s no secret that the future of shopping is online. And it’s for that reason that eCommerce platforms such as WooCommerce have been growing steadily each year.
In this post, we’ll show you how to integrate WooCommerce with Gravity Forms. Bolstering your online store with a Gravity Forms WooCommerce integration allows you to build advanced product selection forms, improve the user experience, and boost your revenue 🛒😎
Table of contents
- What is WooCommerce?
- Does Gravity Forms work with WooCommerce?
- Why use Gravity Forms with WooCommerce
- When NOT to use Gravity Forms and WooCommerce
- Connecting Gravity Forms to WooCommerce using Product Add-ons
- Adding multi-page product forms to WooCommerce
- Can you add a Gravity Form to the WooCommerce checkout?
- How to create WooCommerce products with Gravity Forms
- Import existing WooCommerce products to Gravity Forms
- Gravity Forms WooCommerce pricing
- Displaying Gravity Forms data on the WooCommerce Account page
- Configure your Gravity Forms WooCommerce integration now
What is WooCommerce?
WooCommerce is a WordPress plugin created by Automattic that allows you to turn your website into an online store. WooCommerce takes the WordPress system and transforms it into a powerful and flexible eCommerce solution.
In fact, WooCommerce is the single most popular eCommerce solution for website owners, powering over 25% of the top 1 million eCommerce websites!
Does Gravity Forms work with WooCommerce?
In short, yes – Gravity Forms works with WooCommerce! As the most powerful and flexible form plugin for WordPress, many site owners choose to integrate Gravity Forms with their WooCommerce stores.
Connecting Gravity Forms to WooCommerce requires you to install one or more plugins, but don’t worry, this guide will cover everything you need to know!
Why use Gravity Forms with WooCommerce
Gravity Forms allows you to build versatile web forms using an intuitive drag and drop builder. Gravity Forms gives you a range of field types to choose from, as well as a range of advanced features such as conditional logic.
Integrating Gravity Forms with your WooCommerce store allows you to add custom pricing to your products, create versatile product forms, add new products to your store from the front end, and much more!
Here are some other reasons why you may want to set up a Gravity Forms WooCommerce integration:
- Fundraising/donations: Are you building an online store to raise money for your charity? Gravity Forms can help you accept online donations through your website.
- Promoting events: If your organization specializes in organizing and promoting events, Gravity Forms can help you register participants for events and sell tickets through your website.
- Trips and excursions: If you need users to fill out a sign-up form before making a payment, Gravity Forms is the perfect solution.
- Online profile registrations: Do you run an online directory or membership website? You can use Gravity Forms to register new users on your website after they make a payment.
If you require a more advanced form filling process for your WooCommerce store, Gravity Forms is the ideal solution.
When NOT to use Gravity Forms and WooCommerce
Many people don’t know this, but Gravity Forms itself can function as an eCommerce solution! That’s right, you don’t need WooCommerce to set up an online store. Simply install Gravity Forms, along with one of their many payment add-ons, and you’re good to go!
Of course, WooCommerce is a more “complete” solution in that it offers a wealth of powerful features and extensions. However, if you’re only planning to sell a couple of small products, Gravity Forms may be a better fit.
And if you’re planning to build a classifieds website like Craigslist or an online community marketplace where users can list items for sale, Gravity Forms combined with GravityView is the perfect solution.
GravityView is an add-on for Gravity Forms that allows you to display form entries on the front end of your website. After collecting product listings using Gravity Forms, use GravityView to display them in a searchable ‘directory’ style layout.
To learn more about what you can build with Gravity Forms and GravityView, check out our “build it” guides here.
Now that you know when it’s best to use Gravity Forms with WooCommerce, let’s take a look at how to configure a Gravity Forms WooCommerce integration.
Connecting Gravity Forms to WooCommerce using Product Add-ons
The powerful Gravity Forms Product Add-ons plugin allows you to build advanced product configuration forms and link them to any of your products in WooCommerce! This lets you leverage powerful Gravity Forms features such as conditional logic, custom pricing, and user inputs.
After integrating Gravity Forms with WooCommerce, you’ll have the following features at your disposal:
- Use conditional logic on the submit button
- Control how prices are displayed
- Conditional pricing (more on this below)
- Support for over 25 different Gravity Forms field types including File Uploads, Checkboxes and Multi Selects
- Create as many forms as you want and link them to different products
- Create multi-page product forms
The Gravity Forms Product Add-ons plugin is great if you need a way to capture more detailed information from your customers. For example, if you sell jewelry and offer custom engraving, you may need a way for customers to supply the specific text that they want to be engraved.
Alternatively, if you sell custom-built computers, you may need a way for customers to specify which parts they want.
And if you run a charity or NGO, you may want to allow users to donate a custom amount to your cause instead of a defined amount that you set in advance.
All of this is possible by integrating Gravity Forms and WooCommerce.
Adding multi-page product forms to WooCommerce
The Gravity Forms Product Add-ons plugin also supports multi-page forms. This is helpful if your forms contain a lot of fields and you want to break them up into multiple sections.
Multi-page forms display less content at a time which means they also load faster and don’t take up as much space on the page.
To turn a regular form into a multi-page form in Gravity Forms, all you need to do is use the drag and drop editor to add a “Page” field where you want to insert a page break. You can find the “Page” field under the Gravity Forms “Standard Fields” tab.
After adding a “Page” field to your form, Gravity Forms will also insert breaks for the Start paging, and End paging, reminding you where your form starts and ends.
Multi-page forms allow you to break up long forms into more manageable sections, thereby improving the user experience.
Adding custom products using GS Product Configurator
Gravity Wiz (a Gravity Forms Certified Developer) recently release their new product line, “Gravity Shop”. Their first product in this new line is Product Configurator, an add-on that allows you to create custom product configurations for WooCommerce using Gravity Forms. Furthermore, when users checkout, purchase events are synced across WooComerce and Gravity Forms.
Can you add a Gravity Form to the WooCommerce checkout?
The checkout process is a crucial step in the buyer journey. It’s the final step the user takes before confirming their purchase. Having a long and confusing checkout process can cause potential buyers to abandon their cart in frustration. In fact, research shows that over 63% of eCommerce shopping carts are abandoned!
While the Gravity Forms WooCommerce Add-ons plugin and the GS Product Configurator plugin allows you to add Gravity Forms to your product pages, it does not allow you to replace the WooCommerce checkout form.
However, there are ways to customize the default WooCommerce checkout form. For example, the Checkout Field Manager add-on allows you to collect additional user information and customize the checkout process based on user role.
How to create WooCommerce products with Gravity Forms
Using the Gravity Forms Advanced Post Creation Add-On, you can use Gravity Forms to create new products for your WooCommerce online store. The Advanced Post Creation Add-On comes with the Gravity Forms Elite license.
To install the add-on, hover over “Forms” in your WordPress Admin menu and click on “Manage Add-Ons”.
Now, scroll down to the Advanced Post Creation Add-On and click “Install”. Once the add-on has finished installing, don’t forget to click “Activate”. Here are the steps you’ll need to follow to add WooCommerce products to your site using Gravity Forms:
1. Create a Gravity Forms WooCommerce product form
After installing the add-on, the first step is to build a product form that captures all the necessary information to create a new product in WooCommerce. At minimum, your form will need to have the following fields:
- Product Title
- Product Description
- Product Category
- Regular Price
- Product Image
After creating your product form, embed it on a page or post using the Gravity Forms embed shortcode or the Gravity Forms Gutenberg block.
Next, you’ll need to configure a Post Creation feed.
2. Configure the Post Creation feed
To set up a new Post Creation feed, go to the “Form Settings” page, select the “Post Creation” tab and click “Add New”.
Next, give your feed a name and set the “Type” to “Product”. Now scroll down to the “Post Content” section. Here you can map the “Product Title”, “Product Description” and “Featured Image” fields using Gravity Forms merge tags.
The remaining WooCommerce product fields are custom fields, so you’ll need to map them manually. You can do this by adding them one-by-one under where it says “Custom Fields”.
The final step is to set the “Product Type”, “Category”, and “Tags”. When you’re done, click “Save Settings”.
3. Start adding your WooCommerce products one by one
After configuring the Post Creation feed, you can open your form on the front end and start adding new WooCommerce products to your store.
Simply fill in the product information, and click “Submit”. The Post Creation feed will then run automatically, creating a brand new product for you inside WooCommerce!
Import existing WooCommerce products to Gravity Forms
Along with being able to add new products to WooCommerce using Gravity Forms, you can also import existing products from a CSV file. However, for this to work, you’ll need the GravityImport plugin.
GravityImport allows you to import form entries from a CSV file to Gravity Forms. This is helpful if you need to migrate your form data or mass update existing entries.
GravityImport also allows you to mass import WooCommerce products into Gravity Forms. You can do this by importing products from a CSV file to a form that is already linked to a Post Creation feed.
Gravity Forms WooCommerce pricing
After configuring your Gravity Forms WooCommerce integration, you’ll be able to take full control of your product pricing.
Gravity Forms product pricing fields
The Gravity Forms Product Add-ons plugin allows you to use the following Gravity Forms Product Pricing fields on your product forms.
The “Product” field allows you to display prices and product options. Supported field types include Drop Down, Checkboxes, and Radio buttons.
The “Quantity” field allows you to specify the quantity of a certain product you want to purchase.
The “Shipping” field allows you to add a shipping fee to the cost of an order.
And finally, the “Total” field displays the total order cost. The total will dynamically update as the user selects different product variations and/or shipping rates.
WooCommerce conditional pricing
Using the Gravity Forms Conditional Pricing Add-On by GravityWiz, you can add multiple pricing levels for individual products based on the quantity ordered. This is helpful for adding discounts to your products using Gravity Forms.
Here’s an example of a pricing condition:
If a user orders less than 4 of this product, charge them $20 per product. However, if they order more than 4, charge them $15 per product.
With the Conditional Pricing add-on, you can create as many different pricing levels as you want!
Displaying Gravity Forms data on the WooCommerce Account page
GravityView now allows you to embed Views on the WooCommerce Account page. This opens up some exciting use-cases, as well as new ways to further your Gravity Forms—WooCommerce integrations!
Embedding a View on the WooCommerce Account page allows you to create enhanced customer dashboards, and display data from Gravity Forms entries beside product order information.
Configure your Gravity Forms WooCommerce integration now
WooCommerce is a plugin for WordPress that enables you to turn your website into a fully functioning eCommerce store! WooCommerce comes packed with powerful features allowing you to sell both physical and digital products with ease.
In this post, we showed you how to integrate your WooCommerce site with Gravity Forms, the most powerful form plugin for WordPress. A Gravity Forms WooCommerce integration allows you to:
- Add custom pricing to your products
- Create versatile product forms
- Build configurable products in Gravity Forms
- Add new products to your store from the front end
- …And much more!
If you found this article helpful, subscribe to our email list below so we can notify you when we publish new content! 🙌👇
Helpful tips right in your inbox.
Subscribe to get the latest articles, information on releases and helpful Gravity Forms tips!
Helpful tips right in your inbox.
Subscribe to get the latest articles, information on releases and helpful Gravity Forms tips!