How to Add WordPress Product Options (With or Without WooCommerce)

You'll be able to add as many WordPress product options in your forms as your heart desires. (Without any hassle!)

Variable products are a great way to offer customers more options while also making sellers some extra money. However, WordPress product options can be complicated to set up.

Fortunately, the right tool can make your task a lot easier. With Formidable Forms, you can easily add variable product options that are reflected in the final cost.

In this article, we'll discuss a few reasons you might want to add product options. Then we'll show you how to do so in three simple steps. Let's get started!

Get Better Forms FREE!

Why you might want to use WordPress product options

Product options are those items that offer a few selections. For example, a t-shirt may come in different colors and sizes. Your customers may appreciate having more choices, especially if they can customize their orders to meet their needs.

As a seller, you might want to charge different amounts for each variation. To do this, you'll need to add these product options with different values. This will result in an accurate final price.

If you're using a WooCommerce order form, chances are you've already used its variable product feature. But this may not be helpful if you're trying to produce price estimates through an order form.

That's where Formidable Forms comes in. Our powerful form creator has built-in technology to help you add WordPress product options. All you have to do is adjust a few settings.

How to add product options that change the total price

Before we begin, make sure you have the best order form plugin, Formidable Forms, installed and activated. To use pricing fields, you will need to purchase a Business Plan or higher.

Step 1: Create a new form

First, we'll need to create a base form. You can start by navigating to Formidable → Forms → Add New:

This will bring up a few template options. You can also choose to start from scratch. We'll be using the T-Shirt Order template because it comes pre-made with many fields you may need to accept an order:

Feel free to customize the form to meet your brand's needs. Additionally, you might want to consider creating a multilingual form if you have a global audience. If you're creating your own form, make sure you add all the information you'll need to collect. For example, you may want to ask for an email address in case you need to contact a customer.

For this walkthrough, we're going to stick with the T-shirt template. This is because it has many fields you may need for an order.

However, we'll be deleting the Order and Payment Details section. Instead of it, we'll be adding pricing fields to automatically calculate WordPress product options in the next step.

Step 2: Add WordPress product options

Our calculator tool has a lot of interesting functions. For example, you can use it to generate leads. However, you won't need it for this walkthrough. Our pricing fields make it easy to add simple product options that change the total price.

Click and drag all three pricing field types into your form. We recommend that you stick to the order of Product, Quantity, Total. You can also choose to make this a Repeater field:

Next, select the Product field. This will bring up a new menu where you can customize your WordPress product options:

Choose how you'd like to display the product field. Do you want a dropdown select box, checkbox, text field, or a radio button field?

Then add each product option you'd like to include. Enter the product title in the left box and the product price in the right box. Then, repeat this step for other variable fields.

You can also select Bulk Edit Products. This can be helpful if you have a lot of options to input. When you're done, click on Update to save your work.

You might also want to take some time to add front-end editing to this form. While this may seem like a minor feature, it can help your customers have more control over their order forms. It can also prevent repeat submissions from shoppers trying to change an order.

Step 3: Set final style settings

Your form is now functional. Users will be able to select their product option and see the correct total price.

However, you might want to customize the style as well. This can improve your shopper's overall experience. Go to Settings → Styling & Buttons:

One easy option is to change the default Submit Button Text. A phrase like 'Place your order' can help make it clear that clicking this button is the final step.

Alternatively, you could navigate over to the Actions & Notifications option. From here, you could set up your form to send order confirmation emails. This can be a valuable way to keep your customers in the loop while also cutting down on messages from confused users.

When you're done with your style changes, click on Update. Then, you can select Preview to test it out and make sure it looks correct. Here's what our form looks like when set to the cheapest option:

The product option of a single yellow shirt results in a total price of $8. Different settings will result in a different total. By contrast, here's a more expensive option:

The purple shirt is more expensive. In this case, the customer ordered three. As such, the total is $36.

If you're happy with the preview results, simply post your form on your site. Now customers will be able to customize their orders and receive an accurate price estimate.

WordPress product options with WooCommerce

Want to tie in the product options we've talked about with a WooCommerce store? You can set this up so the product form is used with a WooCommerce product. Then, when the form is submitted, the product is added to cart, along with the extra product options you've set up.

Our WooCommerce product add-on will let you do just that. Plus, you can let customers upload files, select dates using date pickers, or fill in custom input fields.

If there's a lot of information you need, conditional logic can help improve conversion rates in your product forms.

Learn more: How to Create a Custom WooCommerce T-shirt Order Form

Wrapping up

When you're providing customers with a price estimate, you'll want it to be accurate. So it's important to add variable product selections to your order forms. Formidable Forms makes this process simple with easy-to-use pricing fields.

In this article, we showed you how to add WordPress product options that change the total price:

Create a new order form or use a template.
Add your variable product options.
Set any final style settings and preview your work.

Formidable Forms is a flexible and powerful form builder tool for eCommerce stores. If you'd like to learn more, check out some of our plugin's other features!

How to Add WordPress Product Options in an Order Form

Why you might want to use WordPress product options