How to Add Product Categories to Payment Fields

When you come across an eCommerce or a shopping website, one of the features you’ll see is a list of categories for various products. You rarely see an online shop without it. In Jotform, we made it possible to create product categories with through the Form Builder. Particularly for the payment elements. You can now add product categories when you choose to sell products. This feature makes it easier for customers to select items from your payment form, especially if you have a long list of products.

Add Product Categories

You can add the product categories before or after adding your product items to your form. It’s easy. Let’s start!

1. In the Form Builder, add the Product List element to your form.
2. If you use the direct payment integration such as PayPal, click the Payment Settings. Otherwise, click the Product List option as shown in the image below.
3. Click the Settings button from the right panel.

4. Scroll down in the settings tab and toggle Enable Categories to Yes.
5. Enter your category title in the box provided.
6. Click the +Add button beside it. Repeat this step to add more categories.

You’ll also see the Show Category Titles when you enable the categories. The option dictates the form of whether to display the categories or hide them. Here’s an example:

Categorizing Products

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. Hover your mouse to the left of the category, and click the Paper/Add icon.
2. Check the appropriate products to add them to the selected category.
3. You should automatically see the products under the chosen category on the main screen.

When Adding a New Item

1. In the Product Settings, click the Select a Category dropdown.
2. Check the appropriate categories where you want to add the product.
3. Click the Save button at the bottom.

Choosing the Category on the Main Product Listing

1. On the main product listing, click the category dropdown.
2. Select the category for the item.
3. Once the category is selected, the item is automatically moved and listed under the selected category.

Pro Tips

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

1. You can reorder the categories under Product Settings. Hover your mouse over the three-dot menu until you see the cross arrow (move). Click and hold the icon, then drag and drop the category to your preferred order.

2. You can collapse categories in the main product listing. It’s helpful if you have a long list of categories and products. You can choose which category to collapse.

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

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

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.

Notes

• 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?
• The form does not display empty categories in the preview. They aren’t listed in the product listings either.
• You can add product categories to all payment integrations except 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, the Form Builder displays a modal with two options:
  • To delete the product from the chosen category.
  • To delete the product from the payment/product list element.