How to Hide Gravity Forms Product Fields

I will assume, since you are reading this article, you already have a reason for wanting to hide your Gravity Forms Product field. The reasons are many and varied. My first recommendation?

Use the “Hidden” Product Field Type

This will create a truly hidden input. This is the simplest approach and works well for simple products.

Working with Hidden Fields can be tricky. There’s no easy way to confirm the Hidden field contains the expected value. Now you can! GP Live Preview provides a super easy way to see your hidden fields when previewing your form.

Use the “gf_invisible” CSS Class

The “gf_invisible” CSS class will hide any field from view (using a different technique than the “gf_hidden” class; more on that below). This allows you to use any product field type for your product field and still prevent the field from being visible to the user.

What about the “gf_hidden” CSS class?
If you’re already familiar with the more common “gf_hidden” CSS class, you might be wondering why not use this class instead? The “gf_hidden” class uses “display: none;” to hide the field. Gravity Forms won’t include products (or options, or shipping fees) with the “display: none;” style declaration in the form total.

Use the Visibility Setting

The Visibility setting is only available for Product fields configured with a Field Type of “Drop Down” or “Radio Buttons”. To hide the field, select “Hidden” as the desired visibility.

Comments

  1. Jason Holden
    Jason Holden July 26, 2023 at 2:13 pm

    Changing field type to hidden or administrative, and adding css class gf_invisible or gf_hidden, does not affect the visibility of the field (the field is always visible). What should I do?

    Reply
    1. Scott Ryer
      Scott Ryer Staff July 26, 2023 at 3:48 pm

      Do you have Output Default CSS deactivated in Forms > Settings? If so, you’ll need to write your own styles to handle hiding the fields when the css classes are added. If you don’t have that setting deactivated, I recommend reaching out to Gravity Forms Support for this one.

    1. Dario Space
      Dario Space Staff July 26, 2021 at 11:50 am

      Hi Jeff,

      You could customize Confirmations & Notifications content with our free All Fields Template plugin to take complete control of the Gravity Forms {all_fields} merge tag output with this lightweight plugin.

      Best,

  2. Faruk
    Faruk February 22, 2021 at 1:30 am

    HI, I have terms and condition text as HTML and wanted to hide from the fromend but still include in the PDF sent on the form. Some reason on other forms it works but some dont. I compared the forms and they look same around the “Terms and Cond”html field text. I used gf_invisible in both forms. Can you help to solve why it may not be showing on the PDF?

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff February 22, 2021 at 1:50 pm

      Hi Faruk,

      The fact that it’s working on some forms but doesn’t work on other forms, makes it a bit difficult to know the actual cause of this issue without having access to the forms. If you’re a Gravity Perks Subscriber, you can send us a message via our support form so we can take a closer look into this.

      Best,

  3. Jennifer
    Jennifer November 5, 2020 at 2:37 pm

    Just want you to know this is super COOL! I did not want a product field and a total field to show for they both had the same information. Because of the gf_invisible it took care of the problem.

    So happy!!!!

    Thank you Jennifer

    Reply
    1. Ryan Donovan
      Ryan Donovan November 5, 2020 at 2:59 pm

      Hey Jennifer, Super happy to hear this worked for you. Please let us know if you have any other questions. πŸ˜ƒ

  4. Reuben
    Reuben January 21, 2020 at 1:13 pm

    If anyone is having trouble getting the CSS classes to work that hide or make invisible the field, make sure you enable the Gravity Forms setting to “Output CSS”. I had mine disabled and the CSS classes didn’t work. I enabled them and now it’s working.

    Reply
  5. Chris
    Chris December 7, 2019 at 1:23 pm

    There is no security to this at all, once the user uses developer tools addon to disable all css sytle in his browser all the hidden fields and their values are revealed . The worst is that the user can actally edit values and send which makes the whole process a total flaw. I wish their is a better server validation to this, even the calculation function that makes the number field read only in calculation mode is not secured, example, users can alter the values of that calculated values using some tools and submit, and it brings a whole new confusion.

    Reply
    1. David Smith
      David Smith Staff December 10, 2019 at 11:08 am

      I am not able to exploit any security issues with this code. Calculated Product fields are recalculated on submission. Regular Product fields have their submitted values validated automatically.

  6. Kevin
    Kevin October 2, 2019 at 1:32 pm

    I am using the gform_pre_render_{form_id} filter to conditionally add the gf_invisiible class to a radio button field. This field needs to be shown/hidden based on the users age which I currently have working. There are 3 situations that I need to satisfy. 1. If the age is < 18, apply the gf_invisible css class and select No from the field 2. If the age is > 18, do not apply the gf_invisible css class and allow the user to choose a. User selects Yes b. User selects No

    Currently, situations 1 and 2b work. However, in the situation 2a, the entry will always come through as No. I am not sure if this is an issue with how gravity forms processes entries with the invisible tag or something else. I am currently using the gform_pre_submission action to view the form to verify what the user selected. There is no option selected for that specific radio button

    Reply
  7. Sam Henderson
    Sam Henderson June 26, 2019 at 9:06 pm

    Hi team,

    Any way to achieve this:

    I have a product field (calculation) that I need to hide on the front end and from the order summary table ({order_summary}) but that can still feed into a Subtotal field.

    Currently it’s working as desired but I need it hidden from the {order_summary}.

    In this case, neither gf_invisble and gf_hidden really achieve the desired result.

    I see there’s a snippet above for when this involves WooCommerce, but I need it for a regular ol’ form.

    Any ideas?

    Thanks so much :)

    Reply
    1. David Smith
      David Smith Staff June 27, 2019 at 1:52 pm

      We don’t have a solution for this one. Wouldn’t it be confusing if the product is included in the subtotal but not shown in the order summary? To the user, it would appear that some mystery charge was artificially inflating the subtotal.

  8. Tanya
    Tanya May 29, 2019 at 9:31 am

    I use GF with WooCommerce on a clients site. I have hidden fields, but when you get to the check out page [woocommerce_checkout] the hidden fields show on the front end. Is there a way to hide them, since there is no ‘appearance’ option for the hidden field types?

    Reply
    1. David Smith
      David Smith Staff May 29, 2019 at 12:40 pm

      Hi Tanya, I’m not sure if this snippet works anymore but it’s worth a shot: https://gist.github.com/spivurno/6951662

      It will add a checkbox on the “Advanced” field settings tab for all fields. Check the “Remove This Field From WooCommerce Cart Item Description” checkbox to remove this field from the cart item’s description.

    2. Tanya
      Tanya May 29, 2019 at 5:41 pm

      You are such a peach, thank you. I will check it out. I just need to hide it from the front end. Still want the client to see it in their order email, but do not want the customer to see it on the front end. Will post back :)

  9. Gerlinda Grimes
    Gerlinda Grimes May 22, 2019 at 2:13 pm

    David – Thanks so much for this. I’m hoping you can help me understand how to hide / disable the Product Price field specifically. I’m not very knowledgeable with CSS and stuff. I think I understand in principle what you’re suggesting, but I tried putting this into the web inspector to test it out, but it didn’t work. Adding gf-invisible to the CSS Class on the product did nothing either (Weirdly, putting into the price field itself made the price change from $0,00 to just 0…). I’m working with a simple Gravity Form where users can select some sample (free) products to order. (ie: No WooCommerce, PayPal or anything like that … just the form.)

    .ginput_product_price { gf-invisible; }

    Reply
    1. David Smith
      David Smith Staff May 24, 2019 at 9:49 am

      Try “gf_invisible” rather than “gf-invisible”. This would go in the CSS Class Name on the field’s Appearance setting.

  10. Matt C
    Matt C September 18, 2018 at 6:08 pm

    Great idea for the snippet to “Remove This Field From WooCommerce Cart Item Description”, but it doesn’t seem to be working for me. Or maybe its working fine but that’s not what I want?

    I’m looking for some way to have a hidden product field, with visible options. The main product is a class that costs $0.00, and each of the options represent a date that the class is offered, costing $10.00.

    Basically, its a way to have the product as checkboxes. I tried to use the snippet on the main hidden product, but the main product still shows, even if you don’t choose any options.

    Any thoughts?

    Reply
  11. rob
    rob February 16, 2018 at 9:37 am

    Hi! I was looking for a solution for this issue exactly, but unfortunately it doesn’t work for me. Does it require Gravity Perks to work? Thanks!

    Reply
  12. Raz
    Raz November 24, 2016 at 1:39 am

    Hey David

    I try implementing that snippet in the functions.php page right after the las “}”

    Now the website is showing me Parse error: syntax error, unexpected ‘<‘ in /………./functions.php on line 150

    line 150 is exactly the beginning of the code <?php /** * WooCommerce Gravity Forms Add-on: Add support for removing a field from the product description in the cart. * */ ……

    any suggestions?

    Reply
  13. Cantin
    Cantin October 28, 2016 at 3:54 am

    Hello, gf_invisible field hide product in information form but that field appears in woocommerce checkuout page and in order email too.

    I just need to add Hidden Calculation in Total order form and don’t want to show that in email and on checkout page.

    How to do it?

    Reply
    1. David Smith
      David Smith Staff November 3, 2016 at 1:15 am

      I have a separate snippet that may help. You’ll need to copy and paste it into your theme’s functions.php file.

      https://gist.github.com/spivurno/6951662

      Once in place, go to the Form Editor and open the field settings for the field you want to hide. You should see a setting, “Remove This Field From WooCommerce Cart Item Description”. Just check that setting and you should be good to go. :)

  14. Jeremy T
    Jeremy T October 7, 2016 at 4:58 pm

    IS there a reason why you cannot use gf_hidden or gf_invsible on number form fields with calculations?

    It hides it just fine but the calculations do not occur.

    Reply
  15. Neil
    Neil June 28, 2016 at 7:44 pm

    Brilliant. I’m able to use automatic, hidden volume based pricing discounts using the product options and conditional logic, along with the gf_invisible class.

    Reply

Leave a Reply

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

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Grab a bundle of free Gravity Forms plugins

Enter your email and receive our most popular free plugins and snippets, plus access to hundreds of others.

This field is for validation purposes and should be left unchanged.