WooCommerce Gravity Forms Product Add-Ons

Create product add-ons using Gravity Forms ↑ Back to top

With the Gravity Forms Product Add-Ons extension, advanced product configuration forms can be built and linked to any product in WooCommerce. Forms that contain conditional logic, pricing fields, user input prices, conditional-pricing fields, conditional submit button logic can all be created for your products.

Additionally, any product that contains a Gravity Form is tracked in the cart to ensure, no matter how complex your product form, only unique configurations are added to the cart and duplicates are incremented in quantity.

Gravity Forms Product Add-Ons gives you full control over the display of prices in the store. You can use the default price displays provided by WooCommerce, or set the price to ‘As Low as $1000’ in the case of a configurable product containing pricing fields.

You also have control over when the built-in automatic price calculation is displayed, if at all, and can configure each label individually.

This extension requires the Gravity Forms plugin.

Configuration ↑ Back to top

Required Configuration
The plugin does not require any manual configuration after activation.

Optional Configuration
A setting you might change is how HTML is formatted from specific Gravity Forms field types. A common request is to have HTML from the List type field show as HTML and not as a CSV list of data. To do this, you can use a filter to turn off HTML stripping in the plugin.

To turn off HTML stripping, add the following to the functions.php file in your theme:

Getting Started Guide ↑ Back to top

Build a Gravity Form that contains any of the supported field types. Be sure to leave the Confirmation settings as default text with an empty message. Configure any conditional logic, and optionally submit button logic.

In the example below, the form is configured to use pricing fields. When using pricing fields, Gravity Forms requires a product and total field. Typically you add a hidden product field to the form and set its price to the price at which you require customizations.

gravity_forms

Add a Product field (from the Pricing Fields section) to the form in order to configure the base customization price and set it to $0.00:

Gravity Forms Product Add-ons - Product Field

Gravity Forms Product Add-On requires that at least one Total field (from the Pricing Fields section) be present on the form. Add a total field to the form. In this example, we are using the built-in dynamic price calculations on our single product page. To prevent the customizations total from being displayed twice on the single product page (once in the dynamically calculated price area and once in the gravity form itself), add a class of “hidden-total” to CSS Class Name under the Appearance tab in the field configuration:

Gravity Forms Product Add-ons - Total Field

To add options to your form, use the Option field type from Gravity Forms.  You can use other controls, such as the standard dropdown, but you must use the option field if your option has a cost associated.

Please note: If you have options that have a cost associated, you must use the Product Option field type, not standard drop-down fields, radio buttons, checkboxes, etc.  This is standard for how Gravity Forms works. If you have trouble creating the product form, Gravity Forms documentation has several good examples.

Once you have built your form and are satisfied with the functionality, create or edit an existing WooCommerce product. Please note that in order for the form to display on the front end, you will need to have either a price or a 0 in the Regular Price field (for more information on this please see FAQ below).

Choose the form you would like to use.

Screen Shot 2015-01-09 at 15.13.59

With Gravity Forms Add-On enabled, you have options for linking the form, displaying the Gravity Form title and description, and displaying alternative price titles throughout the store. You also have the ability to control how the dynamically calculated price is displayed on the single product page.

Gravity Forms Product Add-ons - Settings

After your options have been configured, publish or update your product. Navigate to the product in the store and see how your form has been linked to the product:

Gravity Forms Product Add-ons - Product

When a customer purchases a product linked to a Gravity Form, here is how the add-on information displays:

Gravity Forms Product Add-ons - Cart
Cart View
Order Confirmation
Order Confirmation
Admin Email - New Order Notification
Admin Email – New Order Notification

Supported Gravity Form Fields and Features ↑ Back to top

Standard Fields
  • Single Line Text
  • Drop Down
  • Number
  • Radio Buttons
  • HTML
  • Paragraph Text
  • Multi Select
  • Checkboxes
  • Hidden
  • Section Break
Advanced Fields
  • Name
  • Time
  • Address
  • Email
  • Date
  • Phone
  • Website
  • File Upload
  • List ( Partial support, the column values are stored in WooCommerce as a CSV list of data, not the raw HTML )

Pricing Fields

  • Product
  • Option – Drop Down
  • Option – Check-boxes
  • Option – Radio buttons
  • Total
  • Quantity
  • Shipping
Forms that are AJAX-enabled are not currently supported with Gravity Forms Product Add-Ons

Quick Tips ↑ Back to top

  • Any license level of Gravity Forms will work with this extension.
  • If you are having trouble with a form, calculations or conditional logic, ensure that the form works as expected on a regular post or page.  Often times, calculated fields or conditional logic is not configured as expected and it’s easier to track this down when using the gravity form alone and without an attached product.
  • Ensure that you avoid using custom confirmation settings on the form.  Leave the default confirmation set to text with an empty message.

FAQ ↑ Back to top

What is the best way to use these forms while keeping my website fast? ↑ Back to top

Make each individual product into a separate Gravity Form Page. Using conditional logic on each separate product page (rather than providing every variable possible on one page) will keep your website fast. Each field that has conditional logic requires an AJAX post back, so there will be only five rather than 25 fields with conditional logic. Using the multipage approach should take care of lag issues.

Why are duplicate entries created? ↑ Back to top

Gravity Form Add-Ons does multiple calculations and processes the data twice to make sure everything works before adding it to the cart. This is why there are two entries. The good news is that you don’t need to use the form entries screen. All relevant information should be included in the order.

Why won’t Gravity Forms show on the front end? ↑ Back to top

Products that have an empty ‘price’ field won’t display Gravity Forms Add-Ons. Enter a value as shown:
Screen Shot 2014-10-02 at 10.15.15

Can I use Gravity Forms Add-Ons to send emails? ↑ Back to top

Gravity Forms Add-Ons does not send email notifications when they are assigned to a product.

Why do my forms redirect to a page URL that ends with /:/? ↑ Back to top

Ensure that you are running the latest version of Gravity Forms and Gravity Forms Product Add-Ons. If this is still an issue, delete the problematic form and create it again from scratch. Use the new form.

Why are my Options and Totals not correctly adding costs? ↑ Back to top

There are a few possibilities. The first is that you must check that you are assigning each option field to a product field. Next ensure that you have Disable quantity field checked for the product field if this option is not used.

Why doesn’t this work with the Gravity Forms Partial Entries add-on? ↑ Back to top

Partial Entries is a 3rd party add-on for Gravity Forms, which collects data for partially completed, but not submitted, forms. Since the actual form entries for Gravity Forms are not important to the WooCommerce cart / order process (see FAQ re: duplicate entries), this add-on is not compatible with our Gravity Forms Product Add-ons extension.

Why are my calculations not showing? ↑ Back to top

In some cases it may be due Ajax being disabled. It may also be a plugin/theme conflict. More at: WooCommerce Self-Service Guide.

Can I use the form fields to change the product’s featured image like I do with product variations? ↑ Back to top

No, Gravity Forms does not allow to link fields and their values with product variations.

Where can I see Gravity Forms Product Add-Ons in action?

There is a demo showing:

Questions & Support ↑ Back to top

Have a question before you buy? Please fill out this pre-sales form.

Already purchased and need some assistance? Get in touch the developer via the Help Desk.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top