WooCommerce is capable of selling products, but with the Product Add-ons Extension, you can Create an Invoice Payment Page with WooCommerce.
Create an Invoice Payment Page with WooCommerce
IMPORTANT: You must have WooCommerce installed and configured to sell products.
Install Product Add-Ons
Buy and install the WooCommerce extension Product Add-Ons.
How to install WordPress plugins. Also, see How to create a donations page with WooCommerce.
Create a new product called Invoice Payment
- Go to Products and click Add Product.
WooCommerce displays the Edit Product screen. - Enter a title of Invoice Payment.
- Enter some descriptive text.
- Product Categories: If you don’t want to see related products below the Invoice Payment product, don’t add the invoice product to a category.
- From the Product Data menu, click General.
- Select Simple Product.
- Check Virtual.
- In the Regular price field, enter 00.00
- From the Tax Status field, select None.
- From the Product Data menu, click Advanced.
- Uncheck Enable Reviews. Most likely, you don’t want reviews on an invoice payment page.
- From the Product Data menu, click Add-Ons
- Click New Addon Group
- Create an Invoice Number field: From the Group list, select Only letters and numbers.
- Name it Invoice Number.
- Check Required fields.
Note: Depending on how your invoice numbers are structured, you might need to use Only Numbers or Any Text - From the Group list, select Custom Price.
- Check Required fields
- Check Global Addon Exclusion. The option excludes any global Product Add0ons you created for other products.
- Click Set Featured image to add a product image for the Invoice product. If you don’t specify a featured image, WooCommerce will use the default product image.
- Click Publish and review the invoice product.
Notice that the Invoice product shows “Free!” on the single product page and on the category page.
- To remove the Free! text from the category and single product page, add the following code at the end of your functions.php file:
/** * Hide the 'Free!' price notice */ add_filter( 'woocommerce_variable_free_price_html', 'hide_free_price_notice' ); add_filter( 'woocommerce_free_price_html', 'hide_free_price_notice' ); add_filter( 'woocommerce_variation_free_price_html', 'hide_free_price_notice' ); function hide_free_price_notice( $price ) { return ''; }
- That’s it. You now have an invoice payment page. Make sure you create a test invoice payment to make sure everything works.
Rob Brydges says
Amazing tutorial, this is exactly what I have been looking for!
Thank you for creating this content :)