Do you want to use WPForms calculations to reflect the total amount of an order based on a user’s product selections?
When you manage an online store, you may want the customer to be able to select different products and instantly view the total price of their order.
In this article, we’ll show you how to add product options that change the calculated price for a product with WPForms.
Adding Product Options to Your Order Form
WPForms comes with a variety of different payment fields that let you customize the way you sell your products so you can optimize your eCommerce store. You can allow your users to choose different product options that change the total price of your product.
For instance, say you’re selling printed t-shirts and want the user to be able to select different types of shirts, each with a different price tag. And wouldn’t it be super convenient if your form could calculate the total price based on user selections automatically?
You can do that easily by using payment fields with Multiple Items or Checkbox Items along with the Total Amount field.
And, adding product options to your order form lets your customers customize their order exactly the way they want.
So let’s take a look at the step-by-step guide on how to add product options that change the total price on your order forms.
How to Change the Total Price Calculations With WPForms
Calculating the total price with WPForms is easy. All you need to do is follow these simple steps below:
- Step 1: Install WPForms
- Step 2: Create a New Order Form
- Step 3: Customize Form and Add Product Options
- Step 4: Publish Your Order Form
Let’s dive right into it.
Step 1: Install WPForms
Step 2: Select an Order Form Template
Once you’ve installed WPForms on your site, we’re going to create a new form and add the total price calculation functionality with it.
From your WordPress dashboard, click on WPForms » Add New.
This will take you to the next screen. Give your form a name and then choose a template. WPForms Pro comes with over 300 form templates including order/billing forms. Hover your mouse over the template and click on Use Template to get started.
Next, we’ll edit the template to include different product option fields.
Step 3: Customize Form and Add Product Options
By default, the billing/order form template consists of personal detail fields like Name, a Multiple Items field, a Total field that automatically calculates the total price of your order.
For this example, we took the default Multiple Items field and customize it this way:
When you click on the Multiple Items field, you can change its options as we did here. Here are some of the really useful general options:
- Label: Use this field to specify what the options underneath are about.
- Items: These are the multiple choices and their price values.
- Show price after item labels: Check this option if you’d like to show the individual price for each product.
Now, when a user selects a shirt type from this form, the Total Amount field calculation automatically changes depending on the price of the selected item.
You might want to give your users the option to choose multiple options at the same time. For instance, if a user wants to order a T-Shirt and sweatshirt, you can let them place an order for both items using the same form.
For this, you can use the Checkbox Items field under the Payment Fields menu.
Now, if a user selects multiple products, the Total Amount field will automatically display accumulated the amount of the selected items.
This is a really convenient way of letting your customers buy different products and get the total price for their order from the same form.
Step 4: Publish Your Order Form
One of the best things about WPForms is that you can embed your form directly onto a new page without touching a single line of code.
Once you’ve customized your order form to include different product options and automatic amount calculation, make sure to press the Save button.
Now Click on the Embed button next to Save. You’ll now see a dialog box open with options for embedding the form on an existing page or creating a new one. Click on Create New Page.
You’ll be prompted to give a name to your page. When you’re done, click on Let’s Go.
Now, WPForms will take you to your WordPress editor with your form already embedded within the new page. Click on Publish to take your order form with WPForms calculation feature live.
Your form is now embedded on a new page and ready for use!
For more details on customizing your order form, see this tutorial on how to create an order form.
And there you have it! You now know how to add product options that change the total price on your order forms so you can boost your eCommerce sales.
Next, Improve Your Digital Product Sales
If you enjoyed this article, you might also want to read how to sell digital products on your site.
Also, we created a guide for best student survey questions to ask. Check it out for some great tips for collecting insightful feedback from your students.
What are you waiting for? Get started with the most powerful WordPress forms plugin today.