Create a printable WooCommerce order form to use offline

Printable WooCommerce order form plugin

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.

WooCommerce offline order form plugin

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:

  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, use the 'widths' option to reduce the size of the add to cart column.)
WooCommerce order form quantity field plugin

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.

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

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).

WooCommerce Quick View Pro Without Add to Cart Button

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

  1. Install and active the WooCommerce Quick View Pro WordPress plugin.
  2. Go to the plugin settings page: WooCommerce → Settings → Products → Quick view.
  3. WooCommerce Quick View Plugin Settings Page
    Add your license key and choose what you want to show in the quick view window. If you're adding quick view to a printable WooCommerce order form, then I recommend showing information such as the product image gallery and short description. That's the sort of thing that customers want to see before ticking a product and sending their order. However, you probably don't want to include add to cart buttons because it's an offline order form and you're not using the e-commerce features.
  4. Now to go the WooCommerce Product Table settings page: WooCommerce → Settings → Products → Product table.
  5. 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.
WooCommerce Quick View Pro Product Table Settings

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.

5 Comments

  1. Hi all,
    my customer wants to be able to print orders from woo commerce while including each product feature images as a small thumbnail to quickly be able to recognize the products in the order

    it this is being supported by your plugin?
    can i include each product feature image in the printing version?

    10X!

    • Hi, Yossef.

      Thanks for asking. Please note that the WooCommerce orders and the order form described in our article (which you can display using our plugin) are different. The WooCommerce orders that you describe your customer wants to print are the list of products included with each submitted purchase, and you can access these in the wp-admin or back-end of your site under WooCommerce > Orders. For the best advice about printing WooCommerce orders, I suggest you contact WooCommerce Support or refer to the official WooCommerce Docs.

      I hope this helps point you in the right direction. Let me know if you have any more questions. Cheers!

  2. I am developing a Shop for a lady in
    Lagos Nigeria, but she does not want to order payment online. The reason being the very variable costs of shipping. I am looking for a plugin that will let the purchaser to convert their cart into a Order Form which when satisfied will be emailed the the shop owner. Can you please advise.

    • Hi, Jim. Thanks for asking and for your interest. This is possible if you include the 'add to cart' checkboxes in the product table to create the order form and use the 'Invoice' payment option which is built into WooCommerce itself to allow people to place an order without paying online. I hope this helps. Let me know if you have any other questions. We can also discuss this in more detail – just submit an enquiry via our Support Center. Many thanks!

Please share your thoughts...

Your email address will not be published. Required fields are marked *