Create a printable WooCommerce order form to use offline

Our WooCommerce Product Table plugin is one of the most popular order form plugins out there. Since the publication of our tutorial on how to create a WooCommerce order form, lots of people have asked us how to create a printable WooCommerce order form that their customers can fill in offline.

I was surprised when I first heard that people wanted to use the plugin in this way. After all, most WooCommerce websites take orders online! However, I fully understand that everyone uses WooCommerce differently. There are many valid reasons why you might want to list products on your website, while letting customers print the order form and fill it in with good old fashioned pen and paper. They can send it to you by post, fax - however they like.

The good news is that WooCommerce Product Table functions equally as an offline order form for printing. Keep reading to learn how to set it up in this way.

How a printable order form works in WooCommerce

With a printable order form, you set up a WordPress website and install WooCommerce as usual. Add all your products in WooCommerce.

If you're only planning to take orders offline, then you don't need to set up any shipping options, tax settings or payment gateways. You simply add the products and prices.

The WooCommerce Product Table plugin takes your products and displays them in a beautiful order form layout. Each product appears in a table view, with 1 product per row - just like a traditional order form. You can choose what data to include in the order form, such as the product image, name, short description, price, weight, dimensions, etc. You can also use custom fields and taxonomies to display extra data in the printable order form.

Customers view the order form on your website, and click a button to print it. This prints the entire web page, including all the products in the table and any other fields you've added to the page such as their name, address and payment details. Next, they simply fill in the order form on paper, and send it to you. You receive the printed order form and process is manually.

Keep reading to learn how to create a WooCommerce printable order form for your own website.

1. Install WooCommerce Product Table

To create a printable WooCommerce order form, first get WooCommerce Product Table and install it on your WordPress site.

2. Create a printable WooCommerce order form

You can launch the order form builder at Products → Product Tables. This takes you through the setup process step-by-step. I recommend choosing the following settings to create an offline order form for printing.

Add columns to the printable order form

Add the columns that you wish to include in the order form. This might include things like the product name, short description, price, and add to cart/buy column.

Do you need a blank column for writing notes about each product? To do this, add a blank column to your product table which customers can fill in when they print it out.

To do this, simply select 'Custom field' from the list of columns and then type 'Notes' as the custom field name. This tells WooCommerce Product Table to display a custom field called 'notes' - but since this custom field doesn't exist, the column will remain blank. Simple!

If you don't want to call the column 'Notes' then replace 'notes' with anything you like - so long as it doesn't exist, then it will appear as a blank column.

Replace the add to cart buttons with checkboxes

By default, the WooCommerce order form plugin comes with an add to cart button next to each product in the table. That's fine for online ordering, but doesn't work if you're using the order form offline.

Instead, choose the 'Checkbox' box option for the add to cart buttons.

This will change the add to cart buttons to checkboxes. Each button will have a small tick box next to it. After printing the WooCommerce offline order form, customers can write a tick in the box for each product they wish to order.

Add a quantity field to the offline order form

WooCommerce Product Table comes with a quantity field that you can include in the printed order form. However, this isn't ideal because it has up/down arrows (which obviously don't function offline) and has a '1' in the box by default.

Here are some suggestions on how to add a quantity field to the WooCommerce offline order form:

1. You could write some CSS to hide the up/down arrows and remove the default quantity from the box.
2. Alternatively, you could use the WooCommerce Product Options plugin to add a text field next to the add to cart checkbox for each product. This plugin is fully integrated with WooCommerce Product Table and will automatically appear in the add to cart column. Label this field 'Quantity' and customers will write the required quantity in the box. (Tip: If you want to make the quantity box smaller, click the pencil icon for the buy column in the table and use the 'widths' option to reduce the size of the column.)

3. Hide the 'Add Selected to Cart' buttons

This is the only part of the tutorial that's slightly technical. If you're using add to cart checkboxes, then an 'Add Selected to Cart' button will appear above the table. This is ideal for online ordering, but isn't needed for a printable offline order form.

If you don't want the 'Add Selected to Cart' button, then you can hide it by adding some custom CSS to the Customizer. To get you started, here's a link to the CSS selectors in the WooCommerce Product Table developer documentation. This is a developer task and if you don't know how to do this, then we recommend posting a job on Codeable. Codeable is perfect for finding suitable people for small customizations like this.

4. Show all your products as a one-page order form

By default, the WooCommerce order form plugin shows up to 25 products per page. If you have more than 25 products, then pagination links will appear at the bottom. Customers can use these links to see the remaining products.

This arrangement doesn't make sense for a printed WooCommerce order form, because only the visible products will appear in the print-out. Instead, go to the plugin settings page (Products → Product tables → Settings). Change the 'rows per page' option to ensure that all your products are shown on a single screen.

5. Hide the order form controls

WooCommerce Product Table adds various controls above and below the WooCommerce order form. Above the product list, you'll see a search box and a dropdown where customers can choose the number of products per page. Below, the order form, you'll see pagination buttons and the total number of products. None of this makes sense for an offline order form!

Use the plugin settings page at Products → Product Tables → Settings to disable each of these options. Your printable WooCommerce order form should contain the column headers and the list of products, but nothing else.

For the same reason, make sure your page is full-width - your theme probably has a template for this. There's no need to clutter up your printed order form with extras such as filter widgets that don't work offline.

6. Add other fields to the printable WooCommerce order form

Order forms in traditional printed catalogs have fields for the customer to write their name, address and payment details. You can easily add these fields above or below the product table on your printable order form. Simply install any WordPress contact form plugin (e.g. Contact Form 7), create a form with the required fields, and add it to the order form page.

Remember to remove the Submit button, since people won't be submitting the form online.

7. Make the order form printable

People can easily print the order form by using the 'Print' option that comes with their browser. However, you can help your less technically savvy customers by adding a user-friendly 'Print' button to the printable order form page.

You can easily do this by installing the free Print, PDF, Email by PrintFriendly plugin. This simple plugin adds customizable buttons to your order form, which let your customers click to print the page in a print-friendly layout.

Further reading: Print Your WooCommerce Product Tables & Save as PDF

8. Make it user-friendly

You can use your printable WooCommerce order form as a multi-functional form where people can order online, or print it and post it to you. If you're just using it as an offline order form, then it's worth making sure this is clear to your users.

When people see your products listed online, it needs to be clear to them that you only accept orders offline. You can easily achieve this by adding a notice to the top of the page. This should instruct customers to print the order form page, with details of how they can submit the order (e.g. by posting it to you).

Where to get the plugin

As you can see, WooCommerce Product Table is ideal for creating a printable WooCommerce order form to be used offline. Customers can see the products listed on your website and print the page. They can then tick the products they require and write the required quantity for each one. Finally, they can fill in their details, and post the order to you.

This is a brilliant way of taking manual orders with WooCommerce. I'd love to add some example use cases and case studies of how people are using WooCommerce to provide offline order forms. Please get in touch or add a comment below.