Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Njones35 / Last Updated October 25, 2022

How to Create a Custom WooCommerce Order Form

Want to manage eCommerce on your WordPress site? Do it easily with a custom WooCommerce order form! We'll use the example of a t-shirt store to show you.


How to Create a Custom WooCommerce Order Form

Do you want to create a WordPress custom WooCommerce order form? Depending on what you mean by custom, there are a few ways to do that. For example, you can use a WordPress order form builder. But if you have many products, it might be a good idea to use a solution like WooCommerce, for example.

So today we are going to show you a solution that's got more power than a common order form template. That's not a jab against templates, it's just that more complex solutions require more customization.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

And actually, if you check out this product order form demo, you can see how to make a version of this using a WordPress form builder by itself.

In our step-by-step guide below, we'll show you build a form that collects orders, sends email notifications, and accepts payments with PayPal, Stripe, and others. It just requires a couple of WordPress plugins to build the system:

  • Formidable Forms
  • WooCommerce

Want to build a simple WooCommerce order form for WordPress?

Don't want WooCommerce? Looking for something more basic? If you want to make a simple order form for your WordPress site, maybe you can get by with just one plugin: Formidable Forms. Check it out: How to Create an Order Form in WordPress.

To be clear, the solution in our article below is for users who want to create products with a lot of options. We'll use the example of t-shirts today, where size, color, and more can all be customized in real-time.

No matter what, choosing a form builder is a great choice. Having one will allow you to add custom contact forms to your site. A form builder allows you to create by dragging and dropping form fields.

WordPress Create Form - Add drag and drop Field

There are more options you can configure too. When a user has submitted a form on your site, you can trigger notification settings and use our Zapier add-on to connect to Google Analytics and dozens of other platforms.

Now that the backstory is out of the way, let's get to the real story! This is written by our support Ace Nathanael. Let's get into it!

Why WooCommerce?

Never has there been a bigger fan of WooCommerce than I. Okay, this might not technically be true. I am a huge fan of the product but stopped short of tattoos expressing my devotion. I love it for the sheer simplicity of setup and use.

My own website runs WooCommerce along with their subscription add-on and it's been an essential and rock-solid part of my online presence for years.

WooCommerce website

My First WooCommerce Website

The ability to use eCommerce was one of my biggest motivating factors behind my transition to WordPress. Sure, I'd used standalone scripts in HTML websites. I had tried integrating PayPal buttons and even PayPal carts.

But it was all fairly awful, both in appearance and user experience. Considering the amount of time and effort that I'd put into setting it up, the result was very disappointing.

When I heard about WooCommerce, I couldn't wait to try it out. For the most part, it exceeds my expectations while remaining very easy to use. From day one I knew this was the right solution for me.

With zero experience, I had a working online store set up in just one morning to sell my wife's organic handmade soap products. (Don't get too excited, she doesn't make them anymore.) I recommended WooCommerce to friends and even helped them build their own online shops.

Limitations of a WooCommerce variable product

It was a few months before I found a challenge that WooCommerce wasn't great with. That happened when I wanted to use complex product variations with price calculations.

Simple products are easy. Add variations for color and size and you're still well within the limits of what WooCommerce can comfortably handle. But any more complex and you start to get stuck.

If your product is highly customizable, then a WooCommerce Product Configurator plugin might be the right solution for you.

T-shirt store with a WooCommerce variable product

Set up a custom T-shirt store

To follow along with this tutorial, you'll need WooCommerce installed and set up on your site, Formidable for WordPress forms, and the Formidable WooCommerce custom fields plugin.

My t-shirts will be available in a range of styles, sizes, and colors. The base price of $6 has additional charges for the largest sizes.

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

But I'll set up the size variation in Formidable. I'm also going to allow the customer to choose custom text, charged at $1.50 per row with a max of 5 rows and no more than 25 characters per row.

Formidable will take care of the calculations and pass on the total price to WooCommerce.

First I'm going to add a new product to my WooCommerce store. My product is titled "Smokin Hot Custom T-Shirt" with a base price of $6. I'll set up my variations for style (Mens, Womens, Kids) and Colors (White, Red, Blue, Green, Black), and make sure that the base price is set for all my variations.

Because the style and color variations are identical for all the t-shirts in my online store, WooCommerce handles this perfectly. But if your products have wildly different variations, you may find it easier to include them in your Formidable form too.

Build the WooCommerce order form

With the product setup complete, it's time to start work on the t-shirt order form. My form is fairly simple with only 6 fields. The first field is a dropdown to select a size, and I've used separate values in this field to define additional costs for the Large and Extra Large sizes.

The next field is a dropdown, this time with options for custom text. Again I've used separate values to define additional costs for these options.

Formidable t-shirt demo form

The next 3 fields are single-line text fields, which are set to a max 25 character limit. Conditional logic is set up on each of these fields so that only the appropriate number of fields are displayed based on the selection above.

The final field is the important one - this is a hidden field with the price calculation in it. By simply adding the values from the two dropdowns, this field calculates the amount to be added to the order total.

Add the order form on the t-shirt product page

Now that the t-shirt demo form setup is complete, the next step is to integrate this calculation with the product. Return to the product editing screen, and in the sidebar, there is a section titled "Choose Form". If you don't see this immediately, click the "Screen Options" tab at the top right of the editing screen and make sure the "Choose Form" checkbox is selected.

Simply select the form just created, click 'Update' and it's done!

WooCommerce product form builder

The additional form will appear on the product page, and the product price will be adjusted depending on the options chosen. I set a base price for my t-shirts, so I'm leaving the box unchecked to 'use the total in the form without adding the product price'. But you have the option to allow Formidable to calculate the entire total if you prefer.

Building complex variable products has never been so simple!

If you've been using Formidable for a while, you already know just how powerful these calculations can be. This example is short and simple, but Formidable also handles complex calculations like a breeze!
custom WooCommerce t-shirt order form

Run your t-shirt store through Printful

Do you need your online t-shirt store to run without you? Integrate your T-shirt store with Printful for custom-made swag, integrated shipping calculations, and automatic order fulfillment. At Formidable we have used Printful, and love the simplicity of their system and how well it integrates. It almost like a drop shipping service, but for your custom products!

The Printful service allows you to sell a t-shirt on your online shop to someone who loves your design. That order is automatically sent to Printful where it gets printed, packed, and shipped. Your customer receives their shipment with your branding all over it.

If you want your new online t-shirt business to be focused on unique fresh styles, rather than overwhelmed by storage issues and stock management problems, this can be a great way to go. The Printful WooCommerce integration plugin will sync your product variations between Printful and WooCommerce. Printful even creates the t-shirt images for you to use in your store.

A WooCommerce order form and beyond

Combine a rock-solid e-commerce system with the power of Formidable Forms to allow you to sell much more than just t-shirts in your online store. We'd love to know of any unique and creative ways that you've used our WooCommerce add-on to maximize your online sales.

Or if your needs are much more basic and a full e-commerce solution is overkill, learn how to make a WordPress order form with Formidable Forms.

If you're not already using Formidable Forms, find out why it's the best WordPress order form plugin. Look at our range of form builder features, including our beautiful drag and drop form builder.

Read more about WooCommerce order forms

  • how to start an online store with WordPress How to Start an Online Store with WordPress (Just 5 Steps!)
    Read More
    Best WooCommerce Plugins to Increase Sales 20 Best WooCommerce Plugins to Increase Sales
    Read More
    How to use the best WooCommerce profile builder plugin How to Use the Best WooCommerce Profile Builder Plugin
    Read More

If you aren't sure about giving Formidable Forms a try - here's something to know: we have a 14-day money-back guarantee. So when you are ready, plan out 14-days with our plugin and head to our pricing page. If you don't like it, we'll give you all your money back without a question.

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. alejandra reagan says

    August 16, 2017 at 9:01 am

    Nathanael Jones, I organize runs and triathlons I need from every participant personal info: date of birth, address, emergency contact etc. for every event I offered. Right now I outsource this but I want to integrate it as part of the woocommerce. What package do you recommend I purchase. Please respond as soon as you can. Thanks,

    Reply
    • Nathanael Jones says

      August 16, 2017 at 9:08 am

      If you only need it for a single site, then the Personal license with the WooCommerce add-on should do the trick.

      If your product range is simple, you may be able to skip WooCommerce completely & use just Formidable with the PayPal & Stripe add-ons...

      Reply
  2. Teesprily says

    February 7, 2018 at 11:55 am

    This is a very nice t-shirt site. I like moor t-shirts.

    Reply
  3. Thun says

    October 29, 2018 at 10:20 am

    WordPress is a great platform. WooCommerce is also very popular. This is a good choice for small business.

    Reply
  4. Adrie says

    April 28, 2019 at 10:30 am

    Hello, do you have a version that shows all google fonts for customers to choose font types?

    Reply
    • Nathanael Jones says

      April 28, 2019 at 11:33 am

      Can you open a ticket in our helpdesk about this?
      Its not something i've seen done before - but one of our moderators may have some ideas about how to set it up.

      Reply
  5. Rob Mills says

    March 14, 2020 at 5:52 am

    Hi,

    I see you use subscriptions. We use variations to offer different subscription options. Formidable does not seem to be able to populate the variations differently. We would need a 6 month price and a 2 month price for eg. Formidable just adds a calculated field value to all variations it seems.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews