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.
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.
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.
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.
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.
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.
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!
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!
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 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 (Just 5 Steps!)
20 Best WooCommerce Plugins to Increase Sales
How to Use the Best WooCommerce Profile Builder PluginIf 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.
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,
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...
This is a very nice t-shirt site. I like moor t-shirts.
WordPress is a great platform. WooCommerce is also very popular. This is a good choice for small business.
Hello, do you have a version that shows all google fonts for customers to choose font types?
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.
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.