WooCommerce Custom Invoice Templates (Easy Guide)

Maintaining a successful online store involves diligent attention to detail, from product coordination to customer service and, of course, invoices. 

While standard WooCommerce templates provide a basic starting point, they may not fully reflect your brand or include all the necessary information. They also require creating each invoice individually, which can be time-consuming and error-prone.

This can significantly impact your workflow, especially as your business grows and the number of orders increases.

This is where WooCommerce custom invoice templates may be the best solution to overcome these challenges. They can make your workflow smoother, save you time, and improve the customer experience at your store. 

In this article, I’ll talk about the importance of a PDF invoice and how you can create a customized invoice template for Woocommerce in detail. Let’s go! 

What is a WooCommerce custom invoice template?

WooCommerce custom invoice template is a customized version of the standard invoice that is generated by WooCommerce for orders placed on an eCommerce website.

In WooCommerce, where customers typically pay in advance, you must automatically generate and send PDF invoices upon purchase. 

Now the thing is manually creating invoices each time is impractical, as it’s time-consuming and costly. Instead, you can always create a WooCommerce PDF invoice template and automate this process using a plugin.

A custom invoice template contains personalized information and content such as the WooCommerce company logo, custom background, signature, etc., along with the essential elements. 

Moreover, you can customize the appearance of the essential elements to give it a unique look. The purpose of WooCommerce invoice customization is to show off your professionalism and increase trust and brand value.

How to Customize WooCommerce Invoice Template?

The WooCommerce platform doesn’t have any tools to create a custom invoice WooCommerce template. However, there are several plugins available that can do the job for you. 

For this article, we will use a freemium WooCommerce custom invoice plugin called Challan. It’s a plugin that automatically creates PDF invoices and attaches them to order confirmation emails as soon as a customer completes the purchase. This is by far the best plugin for WooCommerce to edit invoice templates. 

Why Should You Use Challan PDF Invoice Plugin? 

• Easy-to-use admin interface.
• Auto-attaches invoices and packing slips to order emails.
• Create invoices, packing slips, and shipping labels.
• Customize with company info, product details, and pricing.
• Advanced features: CSS, background images, signatures, and custom notes.
• Choose from premade templates.
• Add product attributes (SKU, category) and attach static files

We will demonstrate how to create a custom invoice template in WooCommerce using both the free and paid versions of the Challan plugin. 

Now the first thing you need to do is install and activate the plugin. From your WordPress admin panel, go to Plugins>>Add New and type in the plugin name. Install and activate. 

Right after you activate, you will be able to download invoices for previous orders.

Go to any order page, and you will find the dedicated Challan Invoice panel on the right. From there, you can download an invoice, packing slip, \or shipping label for that particular order.

Let’s download an existing order and have a look.

Pretty awesome, right? Well, it actually is. Now, let’s check what we can do about it using Challan’s free plugin settings.

Creating WooCommerce custom invoice template using Challan free plugin

Basic settings

Right after you install the plugin, you will notice there’s a new dedicated Challan menu in the WordPress admin panel. Go ahead and click on the settings.

We will have a quick look at the first page.

The first option will enable the invoice creation process.

Allow My Account To – in this section, you can select when your customers can download invoices and credit notes from their My Account page.

Invoice Attach to Email – this option allows you to set which emails should attach the invoices.

Jump to the Bulk download tab.

From here, you can download all your invoices with just a click of a button. You can filter by date, and status in the free version, or even by customer’s email or user ID in the pro version of Challan.

Invoice customization settings

Jump back to the Setting tab again and scroll down a bit to find the template and paper size settings.

For the free version, you can choose from 3 different paper sizes – A4, A5, and Letter. These are the paper sizes on which your invoices will be printed. 

You will also need these sizes for advanced WooCommerce pdf invoice customization, which we will talk about later.

The free version offers you two premade templates to choose from.

How to modify the WooCommerce invoice number format?

In the Order settings, you can assign your invoice number serial and put custom prefixes and suffixes.

For example, if you put Prefix – ((year)) and the suffix – {{day}} and your invoice number is 2 then in the final invoice, it will show – Current year- 2- current date. E.g., 2022-2-23.

Read More: How to Generate an Invoice Number in WooCommerce

You can enable the display of the payment method used by the customer in your invoices by toggling the Display Payment Method button.

Add Order Meta allows you to display a number of additional attributes in your invoices.

For example, if you select customer IP and choose to display before the billing address, then it will look like this –

In the Product Settings, you can set the title length by character count. For example, if you set 10, the invoice will show only the first 10 characters of the product title. This is especially helpful when you have large product titles.

You can choose to display the product SKU or ID in your invoice. Additionally, you can display different attributes by adding them from the product meta and order item meta.

The above settings will look something like this in the invoices-

From the Order Total Settings, you can choose to display the total price with or without tax.

We will cover customized WooCommerce invoice template CSS in detail later in this article.

Seller & Buyer settings

This is where you put your company details and personal notes for your custom invoice WooCommerce template. 

How to add a logo to WooCommerce PDF invoices? 

In this ‘Seller & Buyer’ section, you can upload your WooCommerce invoice logo, which is immensely important to promote your brand and increase brand value. You must also input company details such as an address, phone number, email, etc.

In the footer section, you can input custom texts, links, or personal notes. 

For instance, you want to link some texts, let’s say link to your terms and conditions page. Now, you can input <a href=” yourstore.com/terms”> Terms & Conditions </a> and all your invoices will display that text with a clickable link.

In the pro version, you can also set the footer font size and enable to display of a footer line and shipping address.

So finally, what does a WooCommerce customer invoice look like? 

After tweaking some Challan settings, here’s how it looks now:

Creating WooCommerce custom invoice template using the Challan Pro plugin

It’s a whole new ball game in the pro version of Challan. Immediately after installing the pro version, you will notice significant changes in the settings sidebar.

Now you have dedicated tabs for invoice templates, packing slips, and shipping labels.

Let’s take a quick look at the general settings tab. Scroll down below and you can now display the barcode and QR code even in the PDF invoice.

Read More: The ultimate WooCommerce barcode guide

You can also display invoices in RTL (right to left – Arabic) format. The Pro version also lets you display page numbers if you have more than one page in the invoice pdf.

Invoice tab of Challan pro

In the Invoice tab, you can now set your custom paper size and display “Paid” stamp signs in your invoices. In addition to default stamp signs, you can also upload your own stamp image.

Let’s talk about one cool feature. You also have several premade template layout choices in the pro version. Just click on the “Select Template option”. 

There, you will find 6 awesome WooCommerce invoice templates waiting for you. 

Now, you might ask, “How do I upload a signature to my WooCommerce invoice?”

Well, a great addition to the pro version is the Signature section. You can upload and display your or your authorized person’s signature in the WooCommerce pdf invoices custom template. But how, you ask?

Simply, scroll down below and turn on the “Enable signature” option. Then upload your signature. 

You can further customize your invoice template with a background image which we will cover later in the article.

From the Order Info section, you can add a prefix and suffix to your order numbers. You can also display order notes, status, and custom order meta in your customized WooCommerce invoice template.

Wait, there’s way more! You can display the invoice number, date, and currency on your invoice too. 

Remember to change the WooCommerce invoice number format and WooCommerce invoice date format to fit your needs.

You get to change the WooCommerce invoice currency too if you need to. After setting everything up just toggle on the option and you are good to go. 

The pro version packs some great options to customize your invoice’s product list section. 

You can now set how many products to display per page. In addition to that, you can also display-

•  product images, 
• categories, 
• descriptions, 
• and different attributes.

You can display long or short descriptions and set the description length from this section.

Bonus Tip: Try to keep the WooCommerce invoice product details short, accurate, and to the point. It really helps the customers to get a better understanding of it. 

Do you want to add tax or VAT to your Customized WooCommerce invoice?

Challan Pro will give you that option as well. It will allow you to display tax, VAT, SSN, discount amount, and bank details in your WooCommerce custom invoice template.

Just do down below and you will be able to add WooCommerce invoice taxes and the other things very easily. 

Read more: How to Add Tax in WooCommerce Invoice

So, finally, what does our WooCommerce customer invoice look like? 

Here’s how your final WooCommerce custom invoice template may look.

Static files

This is a pro-only section. You can upload static files such as terms & conditions along with your PDF invoices.

You can upload up to three files here. Once you upload a file here, Challan will automatically attach this file to the order confirmation email along with your invoices.

You can also upload your own font file in Challan for your PDF invoice template.

We mentioned earlier that we would talk about CSS customization and background images in detail. This is because these options allow you to extensively customize your WooCommerce invoice template.

Let’s start with background images.

Seller & Buyer 

How to include additional information on WooCommerce invoices?

In the Seller &  Buyer section of this plugin, you can add various information to the invoice templates. It takes the invoices to a whole new level and can help the customers a lot as well. 

As you can see, you can add the company name, VAT number, and other company details alongside the WooCommerce Invoice logo. 

That’s not it! Go down below and you will find out that you can add different kinds of information in the footer section too. 

If you scroll down a bit more, you will find the option to customize different WooCommerce invoice customer information too. 

Here’s how it looks after putting all the information: 

How do you set up a Background Image in an Invoice? 

You can find the option in the Invoice tab of Challan Pro.

We talked about earlier that paper size is also important for your PDF invoice template. Now you will know why.

Your background image will fill in your invoice pages when you set images with the right resolution. And the right resolution is the paper size you set.

For example, an A4 paper’s resolution in pixels is 3508 x 2480 px. Therefore, your background image resolution should be the same.

However, WordPress may or may not accept that high of a resolution. In that case, you can try any of these resolutions – 676 x 960 px or 1414 x 2000 px.

Let’s try using a copyright-free background image, just for example.

Upload and set the opacity to 0.1. Here’s how your WooCommerce customized invoice template looks now.

As you already know what resolution to play with, you can now create your own custom background in your favorite software (if you don’t have a favorite you may compare tools like Adobe Photoshop vs Illustrator or Canva vs Adobe Express, etc. to find the right tool for yourself).

You can create custom background images with a header-footer frame and transparent background like this one –

Now you can put 100 opacity, and it won’t affect your main contents.

If you sell a single product or have a WooCommerce membership website where you sell monthly subscriptions, your invoice product list table will not have much information.

Therefore, you can add custom information to your background image and make the opacity 100.

For example –

However, this is not a recommended method for adding custom information to your WooCommerce invoice template. It will not work if you choose to display several products in the invoice.

Here’s another example of a background with the word “Invoice” at the top.

Here are some customized Challan invoice template backgrounds that can make your invoice look really good.

How do you add CSS to customize the WooCommerce custom invoice template?

Challan’s background image and CSS options let you fully customize your WooCommerce invoice template. If your background image doesn’t match the invoice content or the premade templates don’t work, you can use simple CSS codes to make changes. 

So, in this part, we’ll break the template into five different sections and show you how you can add CSS codes to edit those sections.

• Header
• Product list table
• Price Summary
• Bank info
• Footer

Remember, you can play with all the general CSS properties such as color, size, height, width, background, border, etc. However, here we will mostly work with color and background color for this article. Check it out. 

1. Adding CSS code in the WooCommerce Invoice Header Section

Here we will cover the following sections –

You already know everything about adding the logo. So, let’s talk about the other parts. 

The first thing you need to do is Go to Challan Settings>>PDF CSS Style>>Invoice Template CSS to add the codes. 

Confused about the codes? It’s really easy. Let’s break down the code structure to make it easier to understand. Each code goes in this pattern: 

• Target Element: This is the part of the invoice you want to style (e.g., Seller, Billing address, Shipping address).

• Color Code: This is the specific color you want to apply to the target element.

Here are some examples: 

Part	Code
Seller	.seller { color: red; }
Billing address	.billing-address { color: blue; }
Shipping address	.shipping-address { color: red; }
Order data table	.order-data-table { color: green; }

Here’s how it will look: 

2. Adding CSS in the Product List Table

Customizing the product list table can turn out to be a bit tricky, but the plugin can make it a lot easier for you. You just have to input the codes and everything will be done. Give it a look. 

Part	Code
Table Background color and the table’s font color	table.product-table tr:nth-child(1) th { background: red; color: blue; }
Product Item’s Title and Description	product-table .product-list .product { color: green; }
Product’s cost, quantity, total, etc.	.product-table .product-list .price, .quantity, .total, .tax { color: red; }

Here’s how the product list table will look after adding CSS for customization.

Keep in mind that we have used the color we want. You can use colors the way you want. 

3. Adding CSS in the Price Summary 

Price summary is an important part of every invoice. So, let’s have a solid understanding of customizing it. Here’s the part and code you need to use: 

Part	Code
Property Label Colors	.order-total-label { color: green; }
Value Font Colors	.order-total-value { color: blue; }
Bottom line Color	.total-last-td-label { background: blue; } .total-last-td-value { background: blue; }

How does it look? Give it a glance. 

4. Adding CSS in the Bank info table

The most important parts of a bank info table are the customer notes and other bank details. Let’s learn more about them. 

Part	Code
customer/order note color	.order-note { color: red; }
bank details table header’s background color	.bank-account-list-header { background: blue; color: white; }
to change the text color and to put a border in the table header	.bank-account-list-header th { color: #ffffff; height: 20px; border: 1px solid blue; }
Separating Table value contents with a border	.bank-account-list td { border: 1px solid blue; }

Here’s how the customer note looks: 

What about the bank info? Have a look. 

5. Adding CSS Code in the Footer Section 

Lastly, the footer section. 

Part	Code
Footer Line	.invoice-footer-hr { color: red; height:4px; }
rest of the footer section colors	.invoice-footer .invoice-footer-table { color: green; }

Here’s how the WooCommerce invoice footer looks after the above changes:

Overall, Challan lets you customize your WooCommerce invoice template thoroughly.

Benefits of WooCommerce custom invoice template

Well, creating custom WooCommerce invoice templates is like giving your invoices a superpower upgrade!  Not only will they look more professional, but they can also boost your brand image, make things easier for your customers, and even save you precious time. 

So, let’s discuss some of the core benefits of the WooCommerce custom invoice template.

Flexibility

WooCommerce pdf invoices custom templates can bring so much more to your plate.

You can add as much important information and graphical content as you want. Moreover, you don’t need to create the invoices individually for every client.

You can create your own invoice template and assign it to your customers. Then, WooCommerce will automatically attach the invoices with the order confirmation emails with the help of invoicing plugins.

Increase brand value and professionalism

The primary purpose of creating a custom invoice template is to impress your customers. You can include your logo, brand-specific color palettes, and header footers. 

As a result, a personalized invoice template will earn the trust of your customers and increase your brand value. 

Works as a marketing tool

A customized invoice can also serve as a great marketing tool.

You can include personalized customer-targeted messages in your invoice to grab the attention of your buyers and convert them into loyal returning customers. You can also include clickable links in your PDF invoices. 

Competitive advantage

You can beat your competitors with a professionally designed WooCommerce pdf invoice edit template.

Many businesses ignore the opportunity a custom invoice offers. They fail to realize the importance of an invoice in a customer’s journey.

Therefore, you can stand out from your competition with a personalized WooCommerce invoice.

Consistent experience

WooCommerce custom templates ensure all your invoices share a uniform look and layout to benefit both you and your customers.

For customers, this saves their time by allowing them to easily locate essential information on each invoice without having to search for it each time.

Similarly, your team or departments can quickly find the necessary details to respond to any issues.

Time saver

Once you create a customizable invoice template, you no longer need to worry about creating invoices individually for all customers. 

Also, the sending process is automated, making life easier for you.

Frequently Asked Questions (FAQs)

Wrap up

Even little things can make a big difference in your marketing efforts. You should not shy away from any chance that can grab the attention of your customers.

A personalized WooCommerce custom invoice template can be a game-changer for your online store business. It can attract and engage your buyers and convert them into loyal returning customers.

Hopefully, you found this article helpful. Let us know if you need further help with CSS codes or have any questions.