Nicola Mustone

Happiness Lead @ Automattic



How to create a “Pay your bill” system using WooCommerce

Some users use an online payment system for their bills, asking their customers to go on the website and pay the bill directly there.

In this tutorial you will learn how to create this system in WooCommmerce.

Required plugins

You need two premium plugins to create this system:

System configuration

There are few steps before to being able to accept payments for your bills. After installing Name your price and Product Add-ons, go to Name your price configuration page in WooCommerce > Settings > Name your price and set the options value with your needs. In this example, i have these values:

Name your price settings

Product configuration

Now you have to create a product which will be used by the “Pay your bill” system.

Go to Products > Add New and set all the basics configuration of the product (title, description, category, tags, etc.). You can use both Simple product or Variable product, depends on what you need. In the example I use a simple product.

Next to the Product type dropdown you have some checkboxes. After activating Name your price plugin you have a new checkbox there named Name Your Price. Be sure to select it, like in this screenshot:

Name your price product options

Also leave blank the fields Suggested Price and Minimum Price. You can’t set them because you do not have a suggested price and you do not know the minimum price of the bill which the customer is going to pay for.

For this purpose, you need to know which bill the customer is going to pay for. This is why you need the plugin Product Add-ons.

Select the tab Add-ons in the single product admin page and create a New Add-ons Group:

Product Add-ons configuration

In this example I used only Account number and Bill number fields, but you can add as many as you need, also you can set an additional fee for each option if you want, using the Option price field available in each add-ons.

Save the product and publish it.

You will see something like this in your single product page (using the theme TwentyTwelve):

Single product page

As you can see, the customer will be able to set the quantity of bills to pay. This probably is not really useful in a lot of system. If you want to disable it and allow the customer to pay only one bill per order, go to your product settings, select the tab Inventory and select the option Sold Individually:

Product sold individually

That’s all. You are now ready to accept payments for your bills online.

Advertisements

Subscribe to This Blog

Receive new articles from this blog directly in your inbox! No spam guaranteed!

Join 651 other subscribers

Contribute to Improving This Blog

Did you enjoy this article? Was it helpful? Contribute to help me write more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

€5.00
€15.00
€100.00
€5.00
€15.00
€100.00
€5.00
€15.00
€100.00

Or enter a custom amount


Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly
Advertisements

More Posts That You Might Like…


2 responses to “How to create a “Pay your bill” system using WooCommerce”

  1. Valerie Robinson Avatar

    Is there a way to set the Name Your Price text on a per product basis?

    1. Hello Valerie,
      Yes, but it involves overriding a template.

      Copy the file price-input.php from wp-content/plugins/woocommerce-name-your-price/templates/single-product/ and paste it in wp-content/themes/your-child-theme-name/woocommerce/single-product/.

      Open the file that you just pasted and find this part:

      <label for="nyp">
              <?php printf( _x( '%s ( %s )', 'In case you need to change the order of Name Your Price ( $currency_symbol )', 'wc_name_your_price' ), stripslashes ( get_option( 'woocommerce_nyp_label_text', __( 'Name Your Price', 'wc_name_your_price' ) ) ), get_woocommerce_currency_symbol() ); ?>
      </label>
      

      Replace it with something like this: https://gist.github.com/SiR-DanieL/9f4873a933d439754fb34cb708f8d59f

      Change case 1 and case 2 with the IDs of the products where you want to change the text, and add as many cases as you need, before the default case which will use the text from the admin settings.

Leave a Reply

Advertisements

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

About The Author

Hi, I’m Nico! Support Lead at Automattic, championing WordPress.com & WooCommerce. Off-duty, I’m at Elemental Beacon, leading epic D&D adventures. Let’s connect, whether it’s about WordPress or a quest!

Advertisements

Don't Miss a Thing!

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

Continue Reading

%d bloggers like this: