If you run an e-commerce store, offering a frictionless buyer journey is crucial for success. However, WooCommerce creates a separate page for each product by default, which can slow down your visitors. Keep reading to learn how to build a WooCommerce order form so that you can conveniently display a list of products all in one place:

WooCommerce order form example.

In this post, we’ll explain what an order form is and how it can optimize the user experience for consumers. Then, we’ll walk you through how to create and customize an order form in WooCommerce using Beaver Builder. Let’s dive right in!

An Introduction to WooCommerce Order Forms

WooCommerce is one of the most common solutions for creating online businesses with WordPress. This WordPress plugin is known for its simplicity and user-friendliness.

The default settings in popular themes for WooCommerce stores typically display items with large images and prices:

The Outnet products page.

Sometimes, they include an Add to Cart button. Moreover, product images are usually presented in a grid of three or four items per row. This can take up a lot of space on the page.

Typically, users can browse product pages or type what they’re looking for in the search bar. This layout offers customers a standard e-commerce experience:

The Outnet product page.

In most cases, this basic web design works well because it lets shoppers browse products while also viewing their details. However, this layout isn’t ideal for every e-commerce store. Simply put, so many WooCommerce shop pages might be too complicated for your store’s needs.

That’s when order forms can come in handy. This simplified format condenses all your products onto one page. Items are presented in a table, where each product has its own row:

Example of a WooCommerce order form.

Order forms provide many benefits. For example, they allow your customers to more easily select the number of products they want to add to their cart, which can speed up the checkout process.

They might be especially appealing to bulk and wholesale buyers because of how easy it is to add a large amount of products at once. As a result, this can improve user experience (UX) and boost sales for your business.

Order forms might not be for everyone. For instance, certain shops with a limited product catalog don’t necessarily need this kind of display. While a streamlined buying experience can benefit certain small businesses, you could risk underwhelming buyers if you don’t have enough products to showcase.

How to Build a WooCommerce Order Form (In 5 Steps)

Now that you know the difference between the standard WooCommerce storefront and an order form, let’s take a look at how you can use one for your WordPress e-commerce site. Keep in mind, you’ll need an active WooCommerce store and the Beaver Builder page builder for this tutorial.

Step 1: Install WooCommerce Product Table Lite

For this walkthrough, we’re going to use WooCommerce Product Table Lite. This is a powerful, highly-rated plugin for creating simple yet professional product tables:

WooCommerce Product Table Lite plugin.

To get the tool, navigate to your WordPress dashboard. Go to Plugins > Add New and look for the plugin using the search tool in the upper right-hand corner of your screen.

Simply install and activate the plugin as you normally would. After you’ve installed it, you should see a new tab for the tool in your left-hand panel.

Step 2: Create a Table for Your Products

Now you’re ready to create a table for your products. To get started, navigate to Product Tables > Add New Product Table:

Product tables.

On the following screen, you should see two available presets, which are Regular table and List layout. You can select whichever you’d like to start with, or choose an empty table editor using the Blank option:

Regular table.

For our example, we’re going to select a Regular table. This will take you to to the Product Table page. You will use the shortcode [product_table id=”100″] later:

Product Tables on WordPress dashboard.

Next, you can click on new page just below the shortcode field. This will automatically take you to the block editor, but go ahead and select Launch Beaver Builder here:

Block editor with Beaver Builder.

Now, click the blue plus sign on the top right to reveal the dropdown menu. Under Modules, choose the HTML module:

HTML module on frontend using Beaver Builder.

Drag it onto the page and you will see a blank field:

Blank HTML module.

Now it’s time to add the shortcode. Go back to your dashboard and copy the shortcode product table id:

WooCommerce Product Table shortcode.

Paste it into your HTML module and click on Save. This will reveal your product table:

Product table on front end.

You can also add a heading to this page by clicking the Headings module and dragging it onto the page, above your order form:

Heading module.

Then type the name of your table:

Products frontend page.

You can modify the name of your table depending on your products.

Step 3: Modify Products in Your Query Table

If you want to use an order form layout, chances are you have a lot of products to organize. That’s why our next step is modifying your query table. This will enable you to handpick which products are shown in your form.

To do this, you’ll need to go back to the Product Tables dashboard and click on the Query tab. Then, select a product category.

For our practice order form, we’ll use the Clothing category. You can further modify which products you want to display by subcategory:

The query tab in the WooCommerce Product Table Lite plugin.

When you’re happy with your selections, click on Save Settings and refresh your preview page from before. Let’s try this with the Tshirts category:

Creating an order form by product category.

Select Tshirts, then click on Save Settings and refresh your preview page. You should see only the products you selected:

Product list of tshirts.

Keep in mind that there’s no need to create a new product table each time you want to show a certain category. The plugin provides you with various shortcode options.

If you want to use another one, simply navigate to the Shortcode Options tab and change the option:

Shortcode options tab.

For example, if you want to show one category on your product table, copy the category shortcode:

Shortcode category.

Paste it into the HTML module, then enter the category name(s) into the shortcode. Here we used “hoodies” as an example:

Category shortcode on front end.

You can also add multiple tables on the same page by duplicating the shortcode block and typing in different categories:

Duplicating your shortcode block.

Here, we’ve added a second order form for “tshirts”:

Adding a second order form.

You can add as many tables as you want and add a heading for each one.

Step 4: Edit Your Product Table’s Columns and Rows

In addition to selecting specific products, you can also customize the columns and rows in your table. This is something to try on the backend and then preview on the frontend. Let’s try this out by adding a stock-keeping unit (SKU) column.

To get started, delete the category shortcode in the HTML module. Then, open the Columns tab under Product Tables in your dashboard:

Columns tab, in WooCommerce Product Tables Lite.

Next, scroll down to the + Add a Column and click on it:

The cell template tab under columns.

Then, select Add Element under the Cell Template tab. This will open up a window with a menu of elements to choose from. Here, click on SKU:

Adding a SKU element.

Next, click Add Element under the Heading tab. Select Text and type SKU:

Editing column 'text' element.

Afterward, click out of the tab and rename the column SKU:

Naming a column "SKU".

To move this next to the name column in the top panel, simply click on the up arrow:

Moving the "SKU" column in a WooCommerce order form.

Now, you can click on Save settings and refresh your preview page. The new SKU column should now be next to the Name column:

Preview of the SKU column.

You can also change the number of products viewed per page using shortcode. To do this, go back to the Shortcode Options tab. You’ll find the limit shortcode:

Shortcode limit.

Copy this shortcode and paste it into the HTML module. Enter in the number of products you want displayed per page. We chose “8” for this example:

Shortcode limit number.

You are able to edit many other aspects of your table using the Shortcode Options tab, such as offsets, ids, and SKUs.

Step 5: Customize Order Form Details and Appearance

Beyond what we’ve already covered, you can edit many details of your order form, such as the add to cart button, image sizes, and more.

If you’d like to further personalize your order form, return to the Products Table tab. To edit the add to cart button go to Columns > add to cart:

Products table.

Then, click on Design. From here, you can edit the color, font weight and family, and background color:

Add to cart tab.

You can also modify the add to cart button by selecting it in the top menu and clicking Button under Cell template:

Modify the add to cart page.

From here, you can create color, label, “add to cart” actions, as well as the out of stock and Cart Badge selections. You can also customize font style, color, weight, letter spacing, and border width:

Customizing fonts in a WooCommerce order form.

Once you’ve made your changes, just click on Save settings and refresh your frontend preview tab:

Products preview.

There are many other ways you can edit and customize your order form. If you want further guidance on how to take full advantage of the WooCommerce Product Table Lite plugin, you can check out the How to use, Documentation, FAQs, and Support pages at the top of the table:

Additional documentation for editing WooCommerce order forms in the WooCommerce Product Table plugin.

There you have it! Now you should have a fully functional order form for your WooCommerce site.

Conclusion

Order forms can help streamline the shopping experience in your WooCommerce store. This display format may be especially beneficial if your customers need to buy in bulk. Ultimately, presenting your products in one place can lead to increased conversions for your e-commerce site. 

To recap, here’s how to create a WooCommerce order form using the Beaver Builder page builder:

  1. Install and activate the WooCommerce Product Table Lite plugin.
  2. Create a table to display your products.
  3. Adjust the products in your query table using shortcodes.
  4. Edit your table by modifying columns and rows.
  5. Customize the details of your order form, such as buttons, image sizes, and font colors.

Do you have any questions about how to create an order form for your WooCommerce store? Let us know in the comments section below!

About Will Morris

Will Morris is a staff writer at WordCandy. When he’s not writing about WordPress, he likes to gig his stand-up comedy routine on the local circuit.