WooCommerce Gravity Forms Add-ons custom field

WooCommerce and Gravity Forms

Gravity Forms Product Add-ons is an exceptional WooCommerce plugin that empowers you to define custom product fields for each item. It unlocks the potential to expand your product offerings with unique custom fields, a feature not readily available by default.

This plugin finds its most common applications in scenarios such as:

1. Product-Specific Labels: Think of it as allowing customers to add a personalized nickname to a T-shirt.
2. Product-Specific Data: Ideal for events or courses, enabling you to include specific dates.
3. Customized Logo Images: Tailor products with unique logos or images.

By seamlessly integrating with WooCommerce, this plugin supercharges your online store, providing a service-focused solution with virtually limitless possibilities.

I’ve personally harnessed the power of this add-on in three instances:

1. Interactive Tour Sales for Hotels: Creating immersive WooCommerce-based tours.
2. Paid Events with Date Picker: Simplifying date selection from a range of options.
3. Additional Product Labels: Enhancing product descriptions and information.

Prerequisities

Before diving into this tutorial, make sure you have these four plugins downloaded and correctly installed (though it can be utilized independently of other WooCommerce plugins):

1. WooCommerce 
2. Gravity Forms 
3. Gravity Forms add-ons
4. Advanced Custom Fields 

We’ll be using Advanced Custom Fields to craft one or more product custom fields. These fields will serve as selections on the single product page, offering visitors a range of choices.

Let’s get started by creating a custom datepicker field using ACF:

Now let’s go ahead and create a sample, one field (simple input should be enough) form with GF

We’ll need to store the Gravity Forms form id and add a custom field classname to identify the field later on in the future

Finally let’s assign the form to the WooCommerce product

The coding part

Now, let’s get to the code. I’m not going to follow any coding patterns (plugins vs functions.php) – it’s up to you. I want to demonstrate the code itself, so you’ll take the full responsibility on how to code that. However it’d be a wise idea to check if these plugins were active.

First, let’s overwrite the Gravity Forms Front end facing HTML of the input field

This function overwrites the form input Front End part. We should endup with the following looks:

We’ve already go the Front End, but now we’ll need to store the variable somewhere. This has to be done due to two important cases:

• field validation in case of required fields
• passing variable data along the pagination

Let’s create two hooks, which are connected to the form id:

These little fellas should assist us in form validation (in case the date wasn’t in the right format) and gives us the ability of changing the actual output. In the current solution it doesn’t matter that much. However in would become extermely useful in case of the repeater field. One’d have to map the multiple fields into one input value.

Now let’s make sure that we actually use the ACF field at all, let’s limit, the datepicker picks to one specific date:

 

Assuming everything went well, the end, checkout / cart / order result should look like that:

You can get the full source code from the github: https://gist.github.com/gicolek/9347980

Regards,
Rafal