How to accept invoice payments on your WooCommerce site

WooCommerce – WordPress’s most popular e-commerce platform – is often used to sell physical goods, but you can just as easily use it to accept invoice payments for your services. The process is simple: you send your customer a link where they can pay your invoice. Moreover, WooCommerce comes with built-in payment gateways and analytics so you can run your business with ease.

In this tutorial, we’ll explain how you can accept invoice payments in WooCommerce.

Why use WooCommerce to accept invoice payments?

You may not think WooCommerce is suited for accepting invoice payments, but we’re here to tell you that is wrong! Here are a few reasons why WooCommerce is an ideal platform to get paid for your services:

WooCommerce is free. You do not need to pay an additional fee per transaction (other than the payment processor fee).
It runs on WordPress, which comes with a lot of options to style your website.
WooCommerce comes with built-in analytics. You can easily keep track of your business earnings and other stats.
If you need to accept other forms of payment in the future (such as different credit cards or crypto), you can easily add or remove payment gateways.
WooCommerce is extendable through plugins. Chances are, if you need a feature that is not built in, an existing plugin can solve your need.

The process of accepting invoice payments with WooCommerce

We assume you already have a system in place to send invoices to your customers, so this tutorial does not cover that part. But here’s what we’ll build: a simple page where customers can pay their invoice directly from your WordPress website by entering their invoice number and the total amount.

WooCommerce will handle everything else for you: the checkout, payment, VAT or tax if required, and confirmation emails.

This is what the entire process looks like for your customer:

Your customer receives a PDF invoice from you via email.
They click the payment link.
The page we will build in this tutorial opens and allows your customer to pay their invoice with ease.

Now that we know what to build, it’s time to dive in!

How to accept invoice payments in WooCommerce

While WooCommerce doesn’t let you accept invoice payments out-of-the-box, there is a powerful plugin that can help with it: Advanced Product Fields for WooCommerce.

The Advanced Product Fields for WooCommerce (APF) plugin from Studio Wombat is a handy tool that allows you to offer a wide range of personalization options to your customers, including accepting invoice payments on your store. With this plugin, you can easily add text fields, checkboxes, radio buttons, and even file uploads and image swatches to your products. This will allow customers to personalize their products to their liking before adding them to their cart.

Advanced Product Fields for WooCommerce

Add extra options and add-ons to your WooCommerce products in seconds.

Find out more

Prerequisites

To complete this tutorial, you’ll need a WordPress website with WooCommerce installed and configured. Learning about WooCommerce is not the goal of this tutorial, so we assume you have it up & running. If you need more information on how set up WooCommerce, we recommend reading Start with WooCommerce in 5 Steps.

Step 1: install Advanced Product Fields for WooCommerce

Get the Advanced Product Fields for WooCommerce plugin here. It packs 10+ different input fields that you can use to add extra product options to your WooCommerce products. You can add as many product options as you’d like.

Once you’ve installed and activated the plugin on your WordPress website, head over to WooCommerce → Settings → Product fields from the dashboard to activate the plugin license key.

You are now ready to use the plugin!

Step 2: create a product in WooCommerce

In your WordPress admin dashboard, navigate to Products → Add New to create a new product. Give it a meaningful title, such as “Pay Your Invoice”. In the General tab of the Product data box, set the Regular price to zero and Price display to Hide. The APF plugin installed in step 1 will take care of the final product price.

Step 3: add invoicing options to your product

It’s time to add the input fields to the product page. We will create 2 fields:

A number field where customers can enter the amount they should pay as found on their invoice.
A text field where the customer can enter the invoice number. This is not obligated but makes it easier for you to see which invoice was paid.

Pay invoice amount

On the same screen, go to the Custom fields tab and click Add your first field. A new section appears with settings for your new field. Change the following settings:

APF number field settings for an invoice product

Set Type to Number, indicating this field can only accept numbers.
Give your field a meaningful title in the Label setting. The title will appear above the field on your product page.
Optionally, you can add additional Instructions.
Mark the field as Required so the customer cannot continue without filling out the amount.
Set the Number type to Integer (whole numbers) or Decimal.
Enable the Adjust Pricing setting and set the pricing type to Amount x Field Value. Enter “1” as the value. This tells the system to set the final product price as the amount entered by your customer.

Invoice number

Next, we’ll add a text field so customers can enter their invoice number. Click Add a Field to add another input field to your product. This time, use these settings:

When you are finished, click Update or Publish to save your product. Go to your website to see the result:

Bonus step: pre-fill input fields

The Advanced Product Fields plugin comes with several add-on plugins that can enhance the capabilities of WooCommerce even further. One of these add-ons, the Pre-fill URL add-on, is specifically designed to pre-fill form fields.

By providing your customers with a unique URL that automatically fills in the necessary information, you can reduce the amount of work they need to do. An example of such a URL is yoursite.com/product/invoice?amount=500&invoice=INV-1003.

Pre-fill product options via the URL in WooCommerce

To do this, follow these steps:

Install and activate the add-on through a similar process as step 1 at the top of this guide.
Go back to your field settings and you’ll notice a new setting named Key. Use this setting to denote what URL key should be used in the browser’s address bar.

Make invoice payments easy with WooCommerce

WooCommerce is more versatile than you might think. With the help of the powerful Advanced Product Fields plugin, you can use your WordPress site to collect payments for your services. Choosing this route is often cheaper than subscribing to an invoice-only service.