How To Create a Custom WooCommerce Order Form [4 Easy Steps]

Want to manage eCommerce on a WordPress site? This guide will show how to easily create a custom WooCommerce order form for any WordPress website.

Approximate read time: 6 minutes

WooCommerce's default order form is a bit clunky.

It's clunky, customers can only add one product at a time, and it can't perform complex calculations. And that bad user experience impacts sales.

But it's easy to speed up and improve the process for customers. And all it takes is a couple minutes with this guide! So, I'll show how to create a custom WooCommerce custom order form in a few simple steps.

Let's get started.

How to create a WooCommerce custom order form

The easiest way to create a WooCommerce order form is by using Formidable Forms.

It's the best WordPress form plugin with a drag-and-drop form builder and order form templates, which makes it the best order form plugin, too.

It also connects with WooCommerce perfectly with its WooCommerce Product Customizer. This integration allows you to create custom order form fields. These custom fields can be customized to many situations, whether in text, price calculation, or billing fields.

Best of all, customers can add multiple products during the checkout process!

The WooCommerce integration requires Formidable's Elite plan. So, head over and grab our WordPress form maker.

Also, WooCommerce should be set up on the website for everything to work. If you don't have WooCommerce yet, you'll need an active subscription to start.

Then, it's a few easy steps to create a WooCommerce custom order form:

1. Install Formidable Forms and the WooCommerce integration
2. Set up products in the WooCommerce admin
3. Build the WooCommerce order form
4. Add the order form to the product page

Step 1: Install Formidable Forms and the WooCommerce integration

I'll show you how to create an order form using my own example involving a t-shirt business.

It's an eCommerce store selling t-shirts in various styles, colors, and sizes. So, I need a tool to create an order form that allows me complete customization control.

So, I'll get Formidable Forms set up. First, I'll install and activate Formidable Forms and the Pro subscription. This will get the initial tools set up on the website. Then, it's time to get the WooCommerce add-on installed. I'll head to Formidable → Add-Ons, search for WooCommerce, then click Install.

Once the Status says Active, the WooCommerce add-on is ready to go.

Step 2: Set up products in the WooCommerce admin

My t-shirts will have variable product options, like styles, sizes, and colors. The base price of $25 has additional charges as it increases in size.

So far, this can be completed in WooCommerce. But, variations can be slow and tedious to set up. So, I find it quicker and easier to do as much of this as possible via Formidable. I will use WooCommerce for the color and style variations to allow a different product image for each variation.

But I'll set up the size variations in Formidable since it will be easier to adjust in the form builder. The customer can also add custom text with a max of three rows and no more than 25 characters per row.

Note: Formidable will handle the calculations and pass the total price to WooCommerce.

First, I'll add a new product to my WooCommerce store. My product is titled Smokin' Hot Custom T-Shirt and has a base price of $25. I'll set up my variations for style (men, women, kids) and colors (white, red, blue, green, black). Then, I'll set the price variations depending on the product option.

The style and color variations are the same for all the t-shirts in my online store, WooCommerce handles this perfectly.

But if the products have different variations, including them in Formidable is sometimes easier.

Step 3: Build the WooCommerce order form

There are two options to create a WooCommerce order form using Formidable Forms:

1. Build a blank form from scratch
2. Use a WooCommerce form template

Building a blank form allows complete control of how the order form looks and works but takes longer to set up. On the other hand, using a WooCommerce form template speeds up the process but may not fit the exact needs of every business.

I'll build a form from scratch because I don't need a quick order form. Next, the plugin will load the drag and drop form builder.

I can add the form fields here to customize the WooCommerce order form. My form will be fairly simple, with only six fields for the order form layout:

• Two product fields: For the size and custom text
• Three text fields: Custom text lines
• One total field: Hidden and only for calculation
• Add to cart button: The submit/add to cart button to complete the form

The text fields all have conditional logic set up, so they only show if a person chooses to want custom text. They also have a 25-character limit to avoid long pieces of text.

So, I have a form looking like this now:

I entered the sizing prices into the Product Options, increasing them by 50 cents with each size. The custom text is an extra $4.50, and the Total box will reflect it automatically.

Step 4: Add the order form to the product page

Now that my form is complete, I need to connect the form to the product.

So, I'll head to the product editing screen. In the sidebar, find the section called Choose Form. If it's not there, click the Screen Options tab at the top right of the editing screen and make sure the Choose Form checkbox is selected.

Then, I'll pick the T-shirt Form I just created.

Last, I'll click Update, and it's done.

The form will appear on the product page, and the price will automatically adjust based on the chosen options.

I set a base price for my shirts, so I'm leaving the Use the total in the form without adding the product price. But there's also the option for Formidable to calculate the total.

Either way, I have a WooCommerce custom order form ready to accept orders! When customers fill it out, they'll still use WooCommerce checkout, but my Formidable form will do all the dirty work.

Building a complete WooCommerce solution has never been so simple!

From complex calculations to customizing WooCommerce products, Formidable has the tools to upgrade a WooCommerce website.

It's able to expand on WooCommerce's existing features like bulk order forms, wholesale orders, and tracking order status to help make an eCommerce store even more powerful.

And it's not just because of its WooCommerce integration. It's also these other features:

• More payment gateways: Stripe, PayPal, and more, depending on what's needed.
• Form styler: Customize the form to match a website's theme and overall vibe.
• Extra integrations: Zapier connects to thousands of other apps and services and Mailchimp for emails. And that's just a couple of them.
• Form to PDF: Creating PDF invoices is easy and fast with Formidable's PDF add-on.

Basically, Formidable won't only create an order form and then be useless. It's a plugin that can power many solutions for any WordPress website.

Learn about the ultimate WooCommerce form builder

Combine a rock-solid eCommerce system with the power of Formidable Forms, and it's a powerful solution.

But Formidable Forms is the best form builder for WooCommerce for many reasons. And it goes beyond just building an order form. So, learn why Formidable Forms is the ultimate WooCommerce form builder and how it can help any WooCommerce site today!

Or, grab it today using the button below and get started now!

And join our community on Facebook, Twitter, and YouTube for more WordPress tips & tricks!

Read more about WooCommerce order forms

• The Best WooCommerce Themes for WordPress (Free & Paid)
  Read More

  How To Start an Online Store with WordPress [Step-By-Step]
  Read More

  20 Best WooCommerce Plugins For Your Online Store [Free & Paid!]
  Read More

---