How to Add Product Categories to Payment Fields?

June 17, 2022

When you come across an eCommerce or a shopping website, one of the features you’ll see is the list of categories for the products. You rarely see an online shop without it. In Jotform, we made the same possible 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 in the form. It’s easy. Let’s start!

  1. In the Form Builder, click the Payment or Product List element.
  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.
jotform-payment-settings
  1. Scroll down in the settings tab and toggle Enable Categories to Yes.
  2. Enter your category title in the box provided.
  3. Click the +Add button beside it. Repeat this step to add more categories.
jotform-payment-settings-enable-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:

jotform-payment-category-title-yes
Show Category Titles – Yes
jotform-payment-category-title-no
Show Category Titles – No

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.
jotform-payment-category-add-items.png

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.
jotform-payment-category-new-item-add-to-category

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.
jotform-payment-category-add-to-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 hamburger icon until you see the cross arrow (move). Click and hold the icon, then drag and drop the category to your preferred order.
  1. 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.
jotform-payment-collapse-category-main-screen
  1. In the category filter, you can only filter categories. There is no other filter for now.
jotform-payment-category-filter-form-view
  1. You can collapse categories by clicking the small down arrow to the right.
jotform-payment-collapse-category-form-view
  1. 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.
jotform-payment-category-with-number-of-selected-items

Notes

  • Product categories only work on Classic Forms for now. Please refer to the following guides for form layouts:
  • 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.
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:

  • Raquel
  • TSoft