Add WooCommerce products to the cart with Gravity Forms

In this tutorial, I wanted to address some questions and requests I’ve seen over the past couple of weeks for Gravity Forms users looking for ways to integrate Gravity Forms with WooCommerce, but without using the Gravity Forms Products Add-Ons plugin.

In most of the use cases, the users were looking for a way to add WooCommerce products to the cart when a form was submitted.

This way they could use their Gravity Forms forms as service intake or a questionnaire to help the user find the right product(s).

Adding Products to the Cart Demo

Watch this video to see a simple demonstration of how this works.

Keep in mind this video is the end result, the video below is a step-by-step walk-through of how to set up this type of form and how to use the WooCommerce Add to Cart URLs.

This is a very basic demonstration and does not explore the complete possibilities of this integration concept.

The Secret Element

In order to get this to work, you will need to first understand how the WooCommerce Add to Cart URLs work. I do explain this briefly in the video below, but I want to make sure you understand this because it is the key to this whole thing.

There is a very detailed guide on how to use the WooCommerce Add to Cart URLs here, but let me explain the basics.

By adding one (or a couple) parameters to our URL we can add products to the cart and redirect those users to the cart at the same time.

This is the most simple URL:

https://yourdomain.com/cart/?add-to-cart=PRODID

1. You need to know your cart URL
2. You’ll need to know your product ID
3. You need to add ?add-to-cart=PRODID (replacing PRODID with the product ID) to the end of your URL

Adding to that link, what if you want to add a quantity?

https://yourdomain.com/cart/?add-to-cart=PRODID&quantity=2

In addition to having 1-3 above figured out, you’ll need to simply add &quantity=# to the end of the URL (# representing the actual quantity number you want to add to the cart).

There are other parameters, and you can even make this work with Grouped products and products with variations (which I demo in the video below).

But again, if you want the complete guide, check out this one here!

How it works

There are a couple of key pieces to making this work and I demonstrate the whole build in the video below but also wanted to provide a basic outline in this article.

The Form Field Configuration

In the demo, I used standard fields, but you could use product fields if you wanted. In fact, the only benefit to that, I think, is to have a nice product order summary in the notification.

Setting up your product options.

1. Choose your field, in the demo, I am using a Standard Radio Button
2. Add your choices
3. Set the Choice value to the Woo Product ID number
4. Add any other product type fields, in the demo I used:
   • A Standard Dropdown field for a size option (values set to Woo product variation ID number)
   • Number field for quantity input
5. And any other fields for the data you want to collect

Gravity Forms Confirmations and Query Strings

This is where the magic happens. And from what you’ll see in the video (yes, I’m a geek) I had a realization during my tutorial that simplified the process, using a query string.

This is the simplification of the realization:

1. Create a Page or Redirect Confirmation
2. Add these parameters to the Query String field
   • add-to-cart={product field:ID:value}
   • &quantity={quantity field:ID}

Notifications

In the demo, I did not do anything with notifications, but you could use them as reports to verify which orders were completed in Woo and which were abandoned.

Or you could deactivate them.

The Wrap Up

This is a simple setup to demonstrate the possibilities, but I believe this could be taken much further in functionality and integration.

This whole idea can be taken to a whole new level with other Gravity Forms add-ons like GravityView, GravityFlow, and Gravity Wiz.