How to Create a Custom T-Shirt Order Form in WordPress

Are you having trouble managing your WooCommerce variable products? Do it the easy way with a custom order form for the products in your t-shirt store.

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 subscriptions add-on and it's been an essential and rock-solid part of my online presence for years.

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 exceed 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 setup 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 setup 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 setup 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 setup 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 t-shirt order form

With the product setup complete, it's time to start work on the form. My form is fairly simple with only 6 fields. The first field is a dropdown to select 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 setup 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 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 t-shirt 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.