Out of the box, Gravity Forms does not support checkbox products. Simple story… they’re not as simple to implement as a default product option as they seem.
This tutorial will demonstrate how we can create Checkbox Products using a regular Checkbox field, multiple Single Product Fields and Gravity Forms’ awesomely powerful Conditional Logic.
- Add a Checkbox Field
- Add a Single Product Field for each Checkbox
- Add Temporary Styles to Hide Single Product Fields
Overview
We will use a simple Checkbox Field to act as a “controller”. Each checkbox will correspond to a Single Product Field on the form. When the checkbox is checked, the corresponding Single Product Field is enabled via conditional logic.
1. Add a Checkbox Field
Add a Checkbox Field to your form. Click on this field to edit the settings and add a choice for each product that will be selectable from this field.
General Settings for Checkbox Field2. Add a Single Product Field for each Checkbox
Add a Single Product Field for each checkbox in your Checkbox Field. I would recommend configuring one of the Single Product Fields and then using the duplicate feature (in the field settings header) to create multiple copies of the field.
Check the “Disable quantity field” setting so that the quantity will default to one.
Add “gf_invisible” to the Custom CSS Class setting on the “Appearance” tab. This will prevent the Single Product Field from being visible once it is “enabled” via conditional logic.
Add a conditional logic rule to only “show” this field when the corresponding checkbox is checked in our Checkbox Field.
These instructions might be a little confusing. Why are we using conditional logic to show/hide the appropriate product fields while simultaneously using the “gf_invisible” class to make sure the field is always hidden? Furthermore, if we want the field to always been hidden anyways, why don’t we just use a hidden field?
True, conditional logic is used to show/hide the field depending on the configured rules; however, another way to look at conditional logic is whether the field is “enabled” or “disabled”. In this context, we want the Product field to count towards the order total if the corresponding is checked but we don’t want to confuse the user by actually revealing the product field itself. As far as the user is concerned, the Checkbox field is the Product field.
So why not use hidden product fields? Well, they don’t support conditional logic. shrugs
3. Add Temporary Styles to Hide Single Product Fields
In the previous section we added a “gf_invisible” class to the Custom CSS Class setting for each of the product fields. You probably assumed correctly that this class will make the field invisible. This class will be available in Gravity Forms 1.9.5 so in the meantime, you’ll need to add it yourself.
The easiest way to do this is just to add an HTML field to your form and add a style block with the class definition.
Temporary HTML Field for 'gf_invisible' ClassYou can grab the style block code here: Temporary Style Code
Any questions?
We’re here to help. Let us know how you use this in the wild wild web.
Did this resource help you do something awesome with Gravity Forms? Then you'll absolutely love Gravity Perks; a suite of 31+ essential add-ons for Gravity Forms with support you can count on.
If there are 40 products and each product has its own price, will this logic still work?
Is it possible for the user to checkout with the total amount generated by this form via WooCommerce?
Hello Shahzad, could you please give us a little more information on your current use case so we could possibly guide you in the right way on how to accomplish this.😃
Alright, have a look at this webpage “https://igerent.com/trademarkstudy” I am working on a project which is something similar to this. This webpage is not even WordPress but when you go down the forum and select countries from the list, you will see the sticky shopping cart getting updated, also when you select multiple checkboxes for classes, it also updates the shopping cart. Now every class and country has a different price and as you fill in the form it updates the price for you.
Can we accomplish that with Gravity Forms?
Hello Shahzad, Thank you for that information. You could create a variation of this using Gravity Forms core. From the looks of it, that would be a dropdown product . Another thing to note is that this would most likely require an inventory system of some sort like WooCommerce to make it work correctly. This would also give you the ability to use an order form such as the one on the website.
Hi there,
Thanks for the tut.
How can you add a quantity field for each and every checkbox? Would we need to create a quantity field for each and every item?
Hello Matthew, This is an excellent question. In order for this to be accomplished, you would allow for the quantity field as well as the product to be shown. Doing this would not require the gf_invisible CSS as you will be displaying the product on the front end so the quantity field can be displayed. Please let us know if you have any other questions. 😀
Looks like this method does not update the {subtotal} field when the products are added to the view…any way to update the subtotal correctly using this method?
I take that back – I had conditional settings for the subtotal to show specific products and just needed to add in my new product fields…
Glad to hear you got it sorted. 🙂
I’d like to use this in gravity form product combination with Gravity Press which would allow users to check add-on services that are billed monthly along with their membership).
Gravity Press requires the product field to have a Choice (the membership), value (membership (ID) and the Price (to be billed each month).
This solution seems like it would work, but a single product field does let you input any value which is required for me to associate it with a membership.
Any tips on how to incorporate “value” into single products instead of using a dropdown or radio buttons?
Thanks!
Hm, I’m not sure I understand your issue, Kylie. Could you elaborate?
Wow, this worked perfectly. Thanks so much!