• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

Use Woocommerce to create an invoice payment page

Create an Invoice Payment Page with WooCommerce

November 16, 2016 by Pat Fortino

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

  1. Go to Products and click Add Product.
    WooCommerce displays the Edit Product screen.
  2. Enter a title of Invoice Payment.
  3. Enter some descriptive text.
  4. 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.
  5. From the Product Data menu, click General.
    WooCommerce product screen for invoice payment page
  6. Select Simple Product.
  7. Check Virtual.
  8. In the Regular price field, enter 00.00
  9. From the Tax Status field, select None.
  10. From the Product Data menu, click Advanced.
  11. Uncheck Enable Reviews. Most likely, you don’t want reviews on an invoice payment page.
  12. From the Product Data menu, click Add-Ons
    WooCommerce product addon for invoice page
  13. Click New Addon Group
  14. Create an Invoice Number field: From the Group list, select Only letters and numbers.
  15. Name it Invoice Number.
  16. Check Required fields.
    Note: Depending on how your invoice numbers are structured, you might need to use Only Numbers or Any Text
  17. From the Group list, select Custom Price.
  18. Check Required fields
  19. Check Global Addon Exclusion. The option excludes any global Product Add0ons you created for other products.
  20. 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.
  21. Click Publish and review the invoice product.
    Notice that the Invoice product shows “Free!” on the single product page and on the category page.
    Pay Invoice Product
  22. 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 '';
    }
  23. That’s it. You now have an invoice payment page. Make sure you create a test invoice payment to make sure everything works.

Filed Under: Ecommerce, WooCommerce, WordPress 1 Comment

Previous Post: « Create a Donation Page with WooCommerce
Next Post: WooCommerce Custom Product Emails »

Reader Interactions

Comments

  1. Rob Brydges says

    August 23, 2018 at 1:44 pm

    Amazing tutorial, this is exactly what I have been looking for!

    Thank you for creating this content :)

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...