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. Set up WooCommerce Product Table
To create a printable WooCommerce order form, first get WooCommerce Product Table and set it up by following the instructions in our main order form tutorial. There are lots of ways to set up your order form. For example, you can choose your columns and whether to show all your products or just some of them (e.g. based on category).
When you've set up the basic order form, come back and use the following steps to convert it into an offline order form for printing.
2. 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, go to the plugin settings page (WooCommerce > Settings > Products > Product tables) and 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.
3. 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:
- You could write some CSS to hide the up/down arrows and remove the default quantity from the box.
- Alternatively, you could use the WooCommerce Product Add-Ons 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, use the 'widths' option to reduce the size of the add to cart column.)
4. 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.
5. 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 back to the plugin settings page (WooCommerce > Settings > Products > Product tables). Change the 'rows per page' option to ensure that all your products are shown on a single screen.
6. 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 to set each of these options to 'false'. 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.
7. Add empty columns to the order form
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 add
cf:notes to your list of columns. 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.
8. 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.
9. 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.
10. 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).
Bonus tip - Add quick view links to your printable order form
The aim of a printable order form is to keep everything on one page. You don't want customers to click through to a separate page to learn more about each product. That's important because this would lose the selections they had already made on the order form - a guaranteed way to frustrate the customer.
But what happens if you want to provide extra information that isn't part of the printable order form?
The solution is to install our other plugin, WooCommerce Quick View Pro. This lets you add quick view links to your products. Customers can click on these to see extra images and information about the product in a lightbox window. When they close the lightbox, they remain on the printable order form page, so they won't lose their selections or have to start again.
How to add WooCommerce quick view
- Install and active the WooCommerce Quick View Pro WordPress plugin.
- Go to the plugin settings page: WooCommerce → Settings → Products → Quick view.
- Now to go the WooCommerce Product Table settings page: WooCommerce → Settings → Products → Product table.
- Scroll to the bottom to find the WooCommerce Quick View options. Tick the option to replace all links to the single product page with quick view. That's more suitable for a printable order form than adding actual quick view buttons. After all, you don't want quick view buttons to show on the printed order form! By just linking the product name and/or image to the quick view, these won't show on the printed order form.
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.