JotForm User Guide / Payment Forms /

How to Add Product Categories to Payment Fields?

How to Add Product Categories to Payment Fields?

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.

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.

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):

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. 


There are multiple ways to categorize products:

  • a. In the Settings or Product List Settings tab, if you've already added the products

b. When adding a new item, if you've already created the categories

c. 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:

 

When Adding a New Item

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

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:

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

 

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: 


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.



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

 

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


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:

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.


You're all set. Let's look at some examples.

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


You can collapse categories by clicking the small down arrow to the right:

 

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.



Here are other few things to note about this feature:

a. Product categories only work on classic forms for now. Please refer to the following guides for form layouts:

-Cards-or-Classic-Which-One-Should-I-Use

-How-to-Change-the-Form-Layout 

c. The categories are not enabled by default.

c. Empty categories aren't displayed in the preview. They aren't listed in the main product listings either.

d. This feature can be used with all payment integrations except for OneBip and ClickBank.

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

f. Categories will be displayed the same as how you left them on the form builder, either collapsed or uncollapsed.

g. Uncategorized items are listed at the top of the product list. There is currently no option to show them as a separate category.

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


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:
Contact JotForm Support: https://www.jotform.com/contact/

Send Comment

1 Comment...

  • TSoft

    Bende hala kategori kısmı gözükmüyor ve formu gizleyemiyorum.