How to Add Product Categories to Payment Fields?

September 15, 2021

At Jotform, we strive to provide everyone with the best way to sell their products and services through our forms. You asked for product categories, and we’ve delivered.

Form creators can now categorize their products. This feature makes it easier for customers to choose items in a form because they can toggle the categories to display specific products they’re interested in.

In this guide, we’ll walk you through the process of setting up categories for your order form. Note that you can set these up anytime, even after you’ve added all of your products.

To add categories, follow these steps:

  1. Click in the product field, and then click Payment Settings.
  2. Click the Settings button in the Payment Settings menu.
    Payment Settings

    Payment Settings

  3. In the settings tab, toggle Enable Categories to “Yes”.
  4. Enter your category title in the box provided.
  5. Click the +ADD button beside it. Repeat this step to add more categories. The categories are automatically visible below.
    Product List Settings

    Product List Settings

Enabling categories will also enable Show Category Titles by default. This option sets your category to display in the form as the title of the categorized products. When toggled to “No”, the category titles won’t be displayed, and the products will be listed based on their original order.

Category titles allow you to visualize the categories and the items from each category in both the builder and preview.

Below, you can see what the form looks like with category titles enabled (left) vs category titles disabled (right):

Show Category Titles

Show Category Titles

If the Show Category Titles option is set to “No”, the category titles are hidden in the form, but you can still see the category filter.

Category Filter

Category Filter

There are multiple ways to categorize products:

  • In the Settings or Product List Settings tab, if you’ve already added the products
  • When adding a new item, if you’ve already created the categories
  • Choosing the category from the main product listing

In the Settings or Product List Settings Tab

  1. Choose the category and click the paper/add icon beside it.
  2. Select the appropriate products to add them to the selected category.
  3. The products are automatically categorized in the main window:
Product List Settings Tab

Product List Settings Tab

When Adding a New Item

In the Product Settings menu, choose the category as shown below:

New Item

New Item

Once the item is saved, it will automatically be listed under the selected category.

Choosing the Category on the Main Product Listing

On the main product listing, click the category selector and select the category for the item:

Main Product Listing

Main Product Listing

Once the category is selected, the item is automatically moved and listed under the selected category.

Category - Sample Output

Category - Sample Output

Note that adding one product to multiple categories is possible. You can do this in all of the ways mentioned above. Here’s an example from the main product listing:

Multiple Categories

Multiple Categories

If your customer chooses the same product from multiple categories, they are choosing two separate items. So, from the example above, the price for a single papaya is $10. Since two papayas have been selected, the total is $20.

multiple categories

multiple categories

Uncategorized items are displayed before categorized items. Here’s an example:

Uncategorized items

Uncategorized items

And that’s it for adding product categories and categorizing products.

Notes

Here are some helpful tips when adding multiple products and categories:

  1. You can reorder the categories under Product Settings. Hover over the hamburger icon. The cursor will change to a “move” icon. Click the icon, then drag and drop the category to your preferred order.
    Reorder Categories

    Reorder Categories

  2. You can collapse categories in the main product listing. This is useful if you have a long list of categories and products. You can choose which category to collapse.
    Collapse Categories

    Collapse Categories

  3. In the category filter, you can only filter categories. There is no other filter for now.
    Category Filter

    Category Filter

  4. You can collapse categories by clicking the small down arrow to the right.
    Collapse Categories

    Collapse Categories

  5. If you select some products from a category and collapse that category, a shopping cart icon with the number of products selected will be displayed.
    shopping cart icon

    shopping cart icon

Here are other few things to note about this feature:

  • Product categories only work on classic forms for now. Please refer to the following guides for form layouts:
  • The categories are not enabled by default.
  • Empty categories aren’t displayed in the preview. They aren’t listed in the main product listings either.
  • This feature can be used with all payment integrations except for OneBip and ClickBank.
  • You cannot reorder (drag and drop) items from one category to another from the main product listing. You can only reorder the category through Product Settings.
  • Categories will be displayed the same as how you left them on the form builder, either collapsed or uncollapsed.
  • Uncategorized items are listed at the top of the product list. There is currently no option to show them as a separate category.
  • When you want to delete an item that appears under multiple categories, a modal is displayed with two options: The first one removes the item from the related category, and the second one deletes the product from the form.
Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: