Neatly present your products on your website with the Tabular Product Item field in Paymattic. You can list products in a table with multiple rows and columns in the form. This feature helps you add product tables with photos, item names, prices, and quantity in a single row.
Let us learn how to add Tabular Product Items with Paymattic in this article-
- To add a Tabular Product Item, first, you need to create a form. Let’s take a look at how to create a payment form.
- Add general fields as per your requirement.
- Keep the Name, Email, or Phone field at the beginning of the form.
- Then, add a Tabular Product Item from the panel of Form Editor.
Now, you need to configure the field that best suits your need.
There are 12 configuration options available in the Tabular Product Item field in the General and Advanced tabs. Let us learn about those options in detail below-
Field Label: This option lets you set a custom name for the field.
Enable Image: You can turn on the Enable Image button to add photos to your product table.
Enable Lightbox: Switch the Enable Lightbox button to open the image in a centered overlay and dim the rest of the page when the image is clicked.
Setup Your Tabular Products: This option enables you to design your product table in the form. Create your list of items with this option by adding a Photo, Item Name, Default Quantity, Minimum Quantity, and Maximum Quantity. Click on the + button to add new rows to the table.
Show Subtotal: If the option is enabled, users can view the subtotal amount below the table.
Photo Column Label: In this option, add a custom name to the photo column in the table such as Image or Photos.
Table Item Column Label: Add the name of the item list column using the option.
Table Price Column Label: Change the name of the default price column such as Rates, and Amount.
Table Quantity Column Label: Here you can change the name of the default quantity column in the table.
Table Sub Total Label: If enabled then the user can see the subtotal after the table.
Advanced options #
Admin Label: This label is used if the admin wants to see the field’s label from the back-end.
Field Wrapper CSS Class: This is a field used for adding a CSS class for the field wrapper element.
Input Element CSS Class: You can add custom CSS classes to the input field element itself.
Conditional render: You can set conditional logic to display the field in the form that will be triggered by specific actions taken on a previous input field. To know more about, Conditional render, check here.
Field ID: The Field ID option in the Advanced tab is the CSS class ID for this input field, and it will be used for adding custom CSS to this field.
Finally, click on the Update button to save the configuration.
Copy and paste the shortcode of the form on a specific page and you can preview your created form.
