How to Create a WooCommerce Order Form Without Any Fee?

If you’re building an e-commerce store, WooCommerce and WordPress are effective solutions. However, they’re also a popular choice. If you want to get ahead of the competition, you may need to enhance the WooCommerce platform with some additional features. By adding a WooCommerce order form to your site, you can streamline the shopping experience, particularly for bulk buyers and wholesale customers.

WooCommerce is an ideal option for creating an eCommerce store. However, If you want to stand out among competitors, you may need to add some extra capabilities to the WooCommerce platform because of its popularity. One of the best ways to empower your WooCommerce store is to add a WooCommerce order form.

You can improve the purchasing experience for bulk purchasers and wholesale consumers by adding a WooCommerce order form to your site.

Differences between the default WooCommerce shop page layout and a WooCommerce Order Form

Typical WooCommerce Store Layout

The default WooCommerce store will not include any order form.

Normally, products are displayed in a grid layout. You can easily change WooCommerce number of products per page or per row. Each product contains a title, an image, and a price, and an Add To Cart button (if they are normal products), Buy from Amazon (if they are external products), or Select Options (if they are variables products).

Customers can click on such buttons to put the items they like in the shopping cart.

What is the WooCommerce order form?

WooCommerce order form is an alternative way to show products. Unlike the original shop page, it presents products in a structured table format. Each product is displayed in a single row with a small product image, product name, categories, and product price.

How are they different?

The layout of a WooCommerce order form is far more consistent than a conventional shop page and often contains extra features like sort options and filters that make it easier to find the items you’re looking for. Customers can use a search and filters on an order form to see just products that are relevant to them.

With a WooCommerce order form, customers can make a quick and clear comparison between a number of products without opening multiple tabs.

In a traditional WooCommerce shop page layout, customers need to open up each product in several tabs if they wish to see supplementary details about each one. Contrastly, an order form allows them to quickly analyze each product using additional columns of data directly on the order form page.

Why create a WooCommerce order form?

Having an order form in your WooCommerce store can bring you a lot of benefits.

• WooCommerce order form offers you a nicer product showcase that neatly and orderly display all of your products.
• An order form layout can help customers quickly and easily grasp what you sell.
• WooCommerce order form helps purchases completed more quickly thanks to the quantity arrows, variation dropdowns, and immediately add to cart checkboxes that allow customers to quickly select everything they need directly from the WooCommerce one page order form and add them to the cart in a single click.
• With WooCommerce wholesale order form, you can offer bulk orders, which can help you increase sales for your store.

How to create WooCommerce order form?

All things considered, it is highly recommended you create a WooCommerce order form in your store, especially when you run a wholesale business.

In this tutorial, I will show you to set up a WooCommerce order form with WooCommerce Product Table Lite plugin because of its high rating and great free features.

Before going into the detailed process, you need to make sure the following factors:

• WooCommerce is installed on your website
• Install WooCommerce Product Table Lite plugin then activate it in your eCommerce WordPress site.
• You have at least one product category setup on your site. And there are a few products in the category that you will show in this table.
• In this tutorial, each of the products should have the following factors:
  • Title (Product name)
  • Featured image (Product image)
  • Price
  • Rating (optional)

If any of such information is missing (such as rating), it will not show up in the WooCommerce product table.

Step 1: Creating a new WooCommerce Product Table

• First, from your WordPress dashboard, go to Product Tables > Add New Table to create a new form.

Then, you will see a new empty product table for you to edit.

• At the top of the table editor page, you need to give your new table a name.

• Under its name is the shortcode for you to display your WooComemrce order form. This can not be changed.
• Below that you can see the Editor, with its 4 tabs:
  • Query: In this area, you can control which products will be shown in this product form by selecting the product categories you wish to display. You can choose the product by category. The categories listed here depend on the categories your store has.

• Columns: This tab will define the number of columns in the table.

• There 3 types of columns in here. Each of these 3 sections can have a unique set of table columns.
  • Laptop Columns that need to be customized
  • Tablet Columns (you can edit this section if needed)
  • Phone Columns (you can edit this section if needed)
• Navigation: This section allows you to control navigation elements such as filters, sorting, and result count.

Here, you can add more elements to the Left sidebar by clicking in the Add Element button, and choose the element you wish.

• Style: Overall and default design options for various parts of the table.

Step 2: Creating table columns

The second step is to set up columns for the WooComemrce order form. Now open the ‘Columns’ tab of the editor.

As mentioned earlier, there are 3 separate sections including Laptop Columns, Tablet Columns, and Phone Columns. The most important section is Laptop Columns that include the default columns to display your order form across all devices like mobiles, desktops, tablets, so in this step, we will make changes with it. For the left ones that enable you to create table columns targeted specifically at those device groups, you can optionally customize them.

• To create columns in the ‘Laptop Columns’ section, you can click on the ‘Add a Column’ button or the “+Add column” button beneath. in this tutorial, we are going to create 5 columns.

• To delete any extra columns, just use the ‘X’ icon at the top right of the column settings.

On each column settings, there are 2 main sections:

• Heading: This area lets can decide the current column’s heading content and design. If you wish to set the heading for Laptop Column 1 as ‘Title’, ‘Price’ or ‘Rating’, you should do it here.
• Cell template: In this section, you can control what shows up in the column cells (other than the heading cell) and manage the general column’s design. For example, if you desire to display the product’s title, product’s price, or product’s rating in the first column, you would make such customization here.

Step 3: Adding elements to columns

The third step in the process of creating WooCommerce order form is to add elements to columns.

Once you create 5 columns in the Laptop Columns section, you will see them orderly on your editor page as Laptop Column 1, Laptop Column 2, Laptop Column 3, Laptop Column 4, Laptop Column 5.

• To add elements for each column, click on the “+Add Element” button.

• Then, you can choose the product information you want to show on the WooCommerce order table. I am creating a column to show product featured image, so I choose Product Image.

With each element, you are allowed to make further customization. When all things are done, just click on the tick green icon to save to element.

The Product Image is now saved in the Cell template of the Laptop Column 1 column.

In this tutorial, we are adding 5 elements to 5 columns, correspondingly Product Image, Title, Price, Rating, and Button. Of course, you can create more columns to add more product information like Tags, Custom Field, or Attribute.

What about the Heading section in each column?

• For this section, we also click on the “+Add Element” button to add a new element.

• For the Title, Price, Rating we have created, we choose Text to add the heading for the Title row.

• Then, you see the Edit Element ‘Text’ screen, type “Title” in the text box as below:

• Correspondingly, type in the text box with “Price“, “Rating” for the Rating and Price column.
• For the Product Image and Button column, you can pass the Heading section.
• Let’s take a look at the column you have created:

Step 4: Save table settings

After finishing all things, just click the Save settings button at the page bottom or use Ctrl +S (PC) or Cmd + S (Mac) to update your changes.

How to show your WooCommerce order form on your store?

In the above process, you have created a WooCommerce product table for customers to place orders more easily. But how to display it in your store?

To showcase the order form in your WooCommerce store, you need to use the Table shortcode.

Where you can find the Table Shortcode?

As mentioned above, Table Shortcode lies at the top Editor page, right under the Table name.

With the shortcode, you can show your WooCommerce order form anywhere on your site just by copying and pasting it on any page of your WordPress site.

Show WooCommerce order form on your WooCommerce store when using large screen devices.

In this tutorial, I am displaying the product table on a Shop page.

Just open the Shop page with Elementor, drag and drop the Text widget to the place you want to show the product table, then copy the code and paste it into the text box.

Here is how the WooCommerce product table looks on the page front end. If any products lack rating information, that column will be blank.

How to show your WooCommerce order form on the mobile screen?

In the above process, you have created a WooCommerce product table and show it on your WooCommerce shop page with large screens. However, this large table only looks good on large screens like desktops or tablets.

It may not work well on small mobile screen sizes. To perfectly display your WooCommerce one-page order form on mobile devices, we need to customize the Phone columns.

Before going into the process, you should remove all filters that you have set up before in the Navigation tab by clicking on the filter and then hitting the red bucket button.

Now, it’s time to learn how to show WooCommerce order form on mobile devices. In detail, you should create a separate set of columns in the ‘Phone Columns’ section.

So that, in this process, we will keep the Laptop Columns settings that you have done before, then straight down to the Phone Columns in the Column tab, then click in the Add a Column button to create a new column.

For a beautiful phone layout, we will only display 2 columns in the order table. One column displays the product image ( normally lies on the left side) and one column shows the rest elements including product name (title), rating, price, buy button (normally stands on the right side).

Custom Phone Column 1

Phone Column 1 will be used to display the product image so you can edit it as follows:

• Heading: we do not need a heading
• Cell template: we need to “Add Element” then select Product Image option.

Then you can also make further customization with it. To make the product image well display on mobile, you should set its maximum width at 140px. Once finishing, hit the green button to save your changes.

Let’s see, the Product Image is now on the Cell template of the Phone Column 1

Custom Phone Column 2

As I said above, there are 4 product attributes in this column namely title, price, rating, and button. So we need to separate this column into 4 rows to display these elements.

• Heading: Leave this empty because we do not need any heading
• Cell template:
  • To divide this column into 4 parts, you need to add 4 rows by clicking on the ‘’+ Add Row’’ button at the bottom of the ‘’Cell template‘’.

• Now, after you have 4 rows in the Cell template, you need to add an element for each row.

This process is the same as the process you create Title, Price, Rating, and Button column above.

Just click on the “+Add Element” button and select the option you want and make further changes if needed.

For example, I am selecting Title for the first row.

Repeat this step to add Price, Rating, and Button correspondingly to the second, third, and fourth row.

Finally, remember to update all changes.

Now, copy the Table shortcode and paste it to the place you want to display the order form in your store. Then, you should take a look at the product table within a mobile device.

Wrapping up

When you a running a WooCommerce online store that sells only one or a few products, the default shop page layout can meet your requirements. However, in case you sell a lot of products or wish to encourage bulk purchasing or make the checkout process faster, you should consider a WooCommerce order form in your store.

When you want to create a standard WooCommerce wholesale order form without any fee, you should use the WooCommerce Product Table Lite plugin that offers you multiple free functions to create a functional order form for customers to make purchases more quickly. That can help your earn more revenue.