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:
- Product-Specific Labels: Think of it as allowing customers to add a personalized nickname to a T-shirt.
- Product-Specific Data: Ideal for events or courses, enabling you to include specific dates.
- 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:
- Interactive Tour Sales for Hotels: Creating immersive WooCommerce-based tours.
- Paid Events with Date Picker: Simplifying date selection from a range of options.
- Additional Product Labels: Enhancing product descriptions and information.
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):
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