How to Use WooCommerce to Email an Invoice with a “Pay Now” Link: A Step-by-Step Guide

If you use WordPress with the WooCommerce extension to manage your website, you know that WooCommerce works great for basic eCommerce functionality—ideal for running an online store where your customers can drop items in their cart and check out with a credit card.

WooCommerce has become such a popular way to set up a Web-based shopping experience that larger businesses are using it (according to their site, the platform “powers over 30% of all online stores,”) but many B2B-type users are finding that the one-size-fits-all approach to eCommerce isn’t quite up to the task for more complex transactions. For example, you might want to send a client an invoice for a service you performed, or allow wholesale customers the ability to purchase items in bulk with special payment terms.

Fortunately, there is a way to use WooCommerce to generate invoices with both online and offline payment options, and to keep track of those orders in the same place as your public storefront orders. Here’s a step-by-step guide to generate an invoice, automatically send it by email with a payment link, and enable your customer to pay you directly on your website, using only WooCommerce and the payment gateway plug-in of your choice.

Step 1: Create a new order

In your WordPress dashboard, go to WooCommerce > Orders > Add Order. Here you’ll enter the customer and item information that will be used to generate an invoice. Click the pencil icon next to Billing Details to enter your customer’s information.

Important: Make sure you enter a valid email address for your customer, as this is how they will be receiving your invoice.

In the Payment Method drop-down, choose the payment gateway you want your customer to use for this transaction. You can find WooCommerce-compatible payment plug-ins in the dashboard by going to WooCommerce > Add-ons > Gateways, or > WooCommerce > Add-ons > Third-party. In this example, we’re using Paystand, but there are several options available depending on how you want your customer’s payment experience to flow.

Note that you can enable multiple payment gateways in Settings > Checkout, including offline types such as check and cash-on-delivery. You can choose which ones to activate in your checkout, and the order in which they should appear.

Step 2: Add Line Items

Next, list the products or services you are billing for by clicking the Add Line Item(s) button in the Order Items pane. This part is not very intuitive, so we’ll walk you through it. 

• Click the Add Fee button instead of the Add Product(s) button (unless you are sending an invoice for a fixed-price Product already in your WooCommerce inventory).
• Click the pencil icon to the right of the Fee you just added, and enter a description of the product or service.
• Enter the amount for each Item under Total, and when you’ve listed all your Items, click the Calculate Total button.

Step 3: Generate the Invoice

Now that you’ve calculated your order total, it’s time to generate an invoice to email to your customer. Navigate to the top right corner of the window, to Order Actions. Select Customer Invoice from the drop-down menu, and then click the Save Order button.

That’s it! Your invoice has auto-magically been generated and emailed to your customer. Now let’s step into the role of your customer and see how the rest of the process looks from their perspective. 

Step 4: Your Customer Receives the Invoice

Here is what your customer sees in their inbox: a nicely formatted invoice with a “Pay Now” link at the bottom.

Step 5: Your Customer Pays On Your Site

Clicking the “Pay Now” link in your emailed invoice brings your customer back to your site, where they see a secure page confirming their order, and a button to take them to the checkout window.

In this instance, clicking “Pay with Paystand” launches the in-line Paystand checkout window, where your customer can choose among the payment methods you have enabled and pay without leaving your site.

Here’s an example checkout window if your customer chooses to pay by credit card:

From the time your customer got your invoice in their inbox, to final payment, they’ve only clicked through three windows. And, they never had to leave your site or log in to a third-party system to pay.

If your customer chooses to pay by eCheck Processing, they’ll be authorizing a direct debit from their bank account using their secure bank login. Here’s what that looks like:

Once your customer has paid, they’ll receive a receipt by email, and the order status will automatically be updated in your WooCommerce dashboard, so you have a unified set of financial data for both your online and offline sales.

Generating an invoice in WooCommerce may require a few slights of hand on your part, but once you’ve got the process down, it’s a pretty slick way to do custom billing from your website, without spending a lot of money on a separate billing service. 

Learn more about Paystand's invoice and payment plug-in for WooCommerce