Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

Checkbox Products for Gravity Forms

Last updated | Written by 63 Comments

View Demo

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.

  1. Add a Checkbox Field
  2. Add a Single Product Field for each Checkbox
  3. 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.

gw-checkbox-products-checkbox-fieldGeneral Settings for Checkbox Field

2. 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.

  1. Check the “Disable quantity field” setting so that the quantity will default to one.

    gw-checkbox-products-product-standard-properties

  2. 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.

    gw-checkbox-products-product-appearance

  3. Add a conditional logic rule to only “show” this field when the corresponding checkbox is checked in our Checkbox Field.

    gw-checkbox-products-product-conditional-logic

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.

gw-checkbox-products-temporary-stylesTemporary HTML Field for 'gf_invisible' Class

You can grab the style block code here: Temporary Style Code

You may know about the “gf_hidden” class which does something very similar. The catch is that if you use the “gf_hidden” class, it will conflict with Gravity Forms’ product-based conditional logic and that product will not be counted towards the order total.

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.

Comments

  1. Michael Anderson says

    I was wondering if it would be possible to do checkbox groupings? Meaning a selects any 2 checkboxes and then the price shows up?

    Reply

  3. Alane Cole says

    Hi there! Just wanted to share my solution to the need for checkbox products for Gravity Forms. I’m fairly novice so feel free to suggest refinements if you find this helpful :)

    I was running into the problem of needing to toggle products with a checkbox – they can either order 1 or 0 and having the user have to manually enter a quantity was not very user-friendly for our option-intensive form. Searching turned up your solution here but it wasn’t going to work for what we needed – it was important to show the price of the option before the user had to make choice to click as we are also using your conditional pricing perk.

    I came up with a jquery solution to insert a checkbox before each product label. When the checkbox is checked it will set the quantity to 1, unchecked it sets it back to 0. As these checkboxes are purely for the purpose of setting the quantity fields I don’t need or want them included in the sent form fields so inserting them this way works well. I inserted this code as an HTML block in the form.

    The products are set as “Single Products” and leave the Quantity field enabled.

    Reply

  4. Jason says

    Is there a way to have a price base on how many boxes are checked – however the prices aren’t equal. For example… 1 box checked = $40, 2 boxes checked = $75, 3 boxes checked = $110…

    Reply

  5. Martti says

    Hi!

    My problem is that the total is always the sum of the products. It’s never 0 and checkboxes wont change that.

    Reply

  6. Yves says

    Hi,

    nice discussions here! :-)

    I have multiple checkboxes, is it possible to make a checkbox counter for the selected checkboxes? And is it possible to make a price rule independently of the order of selected checkboxes?

    Example: first choice costs 10 USD (maybe its checkbox 5) second choice costs 9 USD (maybe its checkbox 1) third choice costs 8 USD (maybe its checkbox 12) and so on…

    Would be great to know, if its possible or not to realize this with Gravity! Thanks

    Reply

  8. John says

    David, I’m using this tutorial but I’m finding that if the user ticks one box, then changes their mind and ticks another, the pricing adds the second and does not remove the first without refreshing the form. Do you have a suggestion for how to make it update the total price if the user ticks one box and then changes that to another? (I’m using your perk to limit check boxes to 1 per field) I’m also curious as to hide certain fields from the summary that I’m putting into the email. For example, I use a drop down box to allow a selection and have the first item in the dropdown as 0 or no selection, since it seems to require an entry. If the user leaves it as such, it will appear in the order summary as an item with 0.00 value. Do you know how to hide a 0.00 value item from the summary and the email all-fields merge code?

    Many thanks again! John

    Reply

    • John says

      If I had 2 checkboxes, each with a product linked through cond log and gf_invisible, and I clicked one, it would add that amount to the total. Then if I unclicked , the total did not update back to zero and if I clicked the other instead, it would add that as though I were purchasing both.

      Unfortunately, i can’t show you because the form is live and I’ve gone with a workaround and have just added two products. I wanted to offer checkboxes as they look better when there is only one of each item for sale so I don’t want to show quantity box.

      the site is at http://www.aisgiving.org. My next challenge is to try to prevent some fields from showing up on the order summary. For example, with a drop down box, my understanding is that I have to include a 0.00 option so the buyer can not purchase the drop down item. But then the 0.00 will show up on the summury. I also have a check box that will trigger adding a 3% fee to the order and it also appears in the summary, whether or not it is ticked. I’d love to know how to hide those if they are for 0.00. You can see this result if you walk through the form up the the payment part.

  9. John says

    Hi again David. I seemed to have answered my own question. Wanted to post it to save you time replying: I created a third field to help out; an invisible number field. In the number field, I entered a calculation that simply added up the order total based on product price * quantity entered. Then, I created the other fields as you’ve instructed here, but in the product field, I enabled calculations using the merge tag for the number field I set up to sum the order total, then multiplied it by .03 and set cond logic to show only if the single checkbox, asking the user to indicate if they want to add 3%, is ticked. No need for a yes/no, just a yes. This works perfectly! Add 3% to the order total if ticked! And best of all, I’m using your perks, which I’m a very happy subscriber of, to put in conditional date logic and conditional pricing so that the tickets have an early bird and regular pricing set up. I used to have to create duplicate product fields and then schedule them to show/hide to accomplish this but your perks do a much better job of it and keeps the order data in one product field for reporting. Super awesome!

    Thanks David! J

    Reply

  10. John says

    Hi David I’m trying to make my form add a % to the total order, if the user ticks the check box. This is an event registration and donation form, so it gives them the option to add a processing fee to the total order. I have 4 product fields, so my approach is to use calculations to add up the total and then multiply it by .03. Works great with method above, but unfortunately, the calculation is causing it to add 3% to the total whether or not the box is checked. I’m wondering if you might have a suggestion as to how to make it an option to add 3% to the order total?

    Reply

  11. Marijn says

    Hi there,

    This is almost what I’m looking for, you’re great!

    But is there any way I could use the checkboxes AND a quantity field??

    So i would like;

    [v] Option 1 ( $1.00) [ 2 ] [ ] Option 2 ( $1.25) [….]

    TOTAL = $2.00

    Hope you understand my question.

    Many thanks!

    Marijn

    Reply

  14. Catherine says

    Hello – this works nicely on the form, but the confirmation page looks a bit messy since the hidden fields also appear in addition to the ordered items.

    Is there a way to hide hidden forms from the confirmation page as well?

    Thanks, Catherine

    Reply

  16. Allen J says

    If you wanted to add 4 x membership packages, each has a few extra add-on options.

    Would this be the way to do it OR would we try through woocommerce?

    Reply

    • David Smith says

      Hi Allen, it’s hard to give a definitive answer since there are so many variables at play. This method for handling checkbox products certainly makes it possible to do this with Gravity Forms. I’m not sure how WooCommerce handles this but I’m sure it’s possible on that end as well. I would make my decision based on other required features. Whichever meets the most needs.

  18. Pieter says

    Hi David,

    Is it possible to add a amount input field, so the user can check a product they want to buy and then fill in the amount of that product? Thanks!

    Reply

    • David Smith says

      Hi Pieter, yes, this is possible. You would follow this tutorial almost exactly except instead of disabling the quantity input, you would leave it active. The user would then check the checkbox to show the product field they want to order and then can specify the quantity they want to order via the quantity input available for that product field.

  19. Shawn H says

    Hi David,

    Thank you for this tutorial. I find myself hacking Gravity Forms quite often, and it is great to see examples of how other people are manipulating the given form fields to achieve results outside of the given functionality of the plugin.

    I do have one question, would you achieve the same results if you made the Single Product field visible to admin only instead of applying the gf_invisible class?

    Thanks again!!

    Reply

    • David Smith says

      Hey Shawn, the Visibility setting which allows you to set the visibility to “Admin-only” means it would only be visible in the administrative area (aka the WordPress admin) not that the field is only visible to admin users. As such, setting a field to Admin-only means that it won’t be output to the page at all and therefore it wouldn’t count towards the total or be available to conditional logic.

    • MariannaF says

      Yes. Step 2 is not clear. How do you add a single product for each checkbox (option). Or am I missing something? Is this a plugin that needs to be downloaded? I don’t have a checkbox option at all.

    • David Smith says

      Here is the export for the demo form. If you import this form , you will be able to see how the fields are configured and which fields need to be added.

      To answer your question specifically, you would add Single Product Fields (this is the default field type for a product field) since the Product field does not support a Checkbox field type.

      Let me know if this is still unclear. :)

    • MariannaF says

      Thank you! That worked. If I have multiple fields like this on my form, should I change the conditional logic to reflect each field? Should I rename the class for each checkbox group?

    • David Smith says

      You do not need to change the gf_invisible class. It is generic and can apply to all fields you need to hide. And yep, you would need to change the conditional logic if you intend to have multiple checkbox products.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.