How to Add Product Options that Change the Total Price

Do you want to let your customers select different product options that affect the pricing on your order forms?

When you manage an online store, you may want the customer to be able to select different options for a specific product so you can increase your sales. In this article, we’ll show you how to add product options that change the price for a product.

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. 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 things that affect the pricing like:

  • Quantity
  • Size
  • Style (t-shirt or sweatshirt)

You can do that easily by using payment fields with multiple items or dropdown items.

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.

Step 1: Create a WordPress Form

The first thing you need to do is to install and activate the WPForms plugin on your site. To get started, read how to install a WordPress plugin.

WPForms WordPress Plugin

It’s the best form builder plugin that lets you build different types of forms including a simple contact form and a newsletter signup form using its drag and drop interface.

Check out our tutorial on how to create an order form.

Step 2: Add Product Options

Now that your order form is created, let’s add multiple product options and allow users to customize the order to their liking.

For this, we’ll be using the Dropdown Items field under the Payment Fields section.

payment-field-dropdown-item

To customize a certain field, click on the field in your form builder. You can then change the label, items, and their prices.

For this example, let’s add two dropdown item fields and name them Item #1 and Item #2.

add product options that change total price

Keep in mind that you can add more items if you wish. Be sure to set the right price for all the items you add.

You can also change the placeholder text of the dropdown field. To do that, click on the dropdown field in the right hand panel and edit the Placeholder Text option under the Advanced Options on the left hand panel.

dropdown field advanced options

Repeat the above steps for Item #2. Once done, click on the orange Save button in the top right corner.

save your form

Step 3: Publish Your Order Form

To publish the form you’ve just created, head over to Pages » Add New from the left sidebar of your WordPress admin panel.

add WPForms block to a page

Now click on the Add block (+) icon and search for the WPForms widget.  Once you find it, click on it to add it to your block.

Add WPForms Gutenberg Editor

Next, select your order form from the dropdown box to add the form to your page. Now, you can publish your page after making any necessary changes to it.

order form product options in action

That’s 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.

If you enjoyed this article, you might also want to read how to sell digital products on your site.

What are you waiting for? Get started with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. I am wondering if there is any way to use WPForms in conjunction with WooCommerce. For example, if I wanted to add my name to a shirt. Could I use WPForms to add text input fields to my WooCommerce site?

    1. Hi Heather – We don’t currently have any integration with WooCommerce. I’ve noted that on our feature request list, though, for consideration down the road. Thanks!

  3. What methods of payment will this form take? Do they need to have a PayPal account to use it or can they checkout with credit card as a guest?

    1. Hi Heather,

      Sure so if you’re using our PayPal addon, users should be able to checkout without logging into a PayPal account. However, you’ll need to make sure that your PayPal account is set to be a business account (not a personal account) for this option to appear for your users.

      This business/personal option can be a bit tricky to find, so I’ll share some extra details. Here’s the PayPal page I used to find the setting for this, and here’s a screenshot of the specific instructions from that page that I was able to use to find the correct setting.

      I hope this helps! If you have any additional questions about PayPal, please get in touch with our team and we’d be happy to assist 🙂

    1. Hi Brittany – We don’t currently have a way to do this, but I’ve noted it on our feature request list for possible consideration. Thanks for the suggestion! 🙂

  4. It looks like I can only set currency to one specific type. How do I set it up to be able to do US Dollar AND Canadian Dollar?

    1. Hi Stephen,

      You’re correct, and currently only a single currency option can be selected. I can understand that more options would be useful in some situations, though, and I’ve noted this on our feature request list for possible consideration.

      Thanks for the suggestion!

  5. Is there a way to add quantities to the Payment Fields/multiple items? Also, is there a way to select multiple items? Now its limited to one item per field.

    1. Hi Thomas,

      We don’t currently have a way to do either of these options, but they’re on our feature request list for consideration in the future 🙂

  6. Can I get the form to total up a dollar amount without adding a Payment Integration. We need to charge inter-departmentally for items, but it is done via department accounting, not actually credit cards, ets.

    1. Hey Sharon,

      Yes, they payment fields (including Total field) are available and work even if a payment integration is not active. The credit card field is only available when Stripe is installed and activated but everything else is there. Hope that helps 🙂

  7. Is there a way for a customer to manually input the quantity they desire (not select it from a dropdown), and then the total is updated (multiplied) by that amount?

    1. Hi Michael,

      We currently don’t have a way to run calculations for product quantities the way you described. A possible workaround for this would be to create a Dropdown Items field for each product and fill in the dropdown options with various quantities and associated prices. This would allow you to offer both multiple products and various quantities of each of those products.

      I’m sorry we don’t have exactly what you’re looking for but I hope this might help as a good starting point. 🙂

  8. Is there a coupon option in WPForms? I would like to offer coupons and automatically reduce the total amount based on the coupon used (e.g. 20% off total)

    1. Hi Beth,

      We currently don’t have a coupon field available but you can workaround this by adding in two Multiple Items fields — one with normal pricing and one with discounted pricing. You can also added a Single Line Text field to accept a coupon code. The last step was to create conditionals for each of the item fields. To do this, click on one of those fields and open the Field Options screen. From there, open the Conditionals section and check ‘Enable Conditional Logic’.

      For the full price items, the logic should resemble this screenshot. This tells this field to be hidden if the correct coupon code is entered.

      The discounted item’s conditional logic should be set to display when that same ‘coupon code’ is entered.

      I realize this is not an ideal solution, but hopefully it helps! If you need any extra assistance, please contact us over in support! 🙂

    1. Hi Conrad,

      We don’t have a way to do this right now, but I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion 🙂

  9. The order quantity feature isn’t working for me. How do I create the option to order a quantity of more than 1 item at a time and have the purchase price properly calculated for multiple items?

    1. Hi Courtney,

      We don’t have a way to run calculations required for product quantities, but I’ve made a note on our feature request list so we can keep it on our radar! Thanks for the suggestion 🙂

    1. Hi Anthony,

      We don’t have a built in option for Japanese Yen at this moment but you can add it in by using some custom code:

      /**
      * Add Japanese Yen
      *
      * @param array $currencies
      * @return array
      */
      function wp_add_currencies( $currencies ) {

      $currencies['JPY'] = array(
      'name' => __( 'Japanese Yen', 'wpforms' ),
      'symbol' => 'JPY',
      'symbol_pos' => 'left',
      'thousands_separator' => ',',
      'decimal_separator' => '.',
      'decimals' => 2
      );
      return $currencies;
      }
      add_filter( 'wpforms_currencies', 'wp_add_currencies' );

      In case it helps, here’s our tutorial with the most common ways to add custom code like this.

      Thanks! 🙂

    1. Hi Roman,

      While there isn’t a way of adding a word right next to the actual number in the Total field, you can edit the the total field’s label to read whatever you’d like.

      I hope this helps! 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.