The WooCommerce “Order Pay” page is a hidden gem within the checkout process. It’s not typically encountered during a standard customer purchase journey – it comes into play when a store admin creates a manual order in the WooCommerce backend and sets it to “Pending” order status, often for scenarios like phone orders or custom quotes. WooCommerce generates a unique URL that can be shared with the customer for secure online payment.
TLDR: the “Order Pay” page serves a specific purpose – allowing customers to complete payment for manually created orders.
If you’ve seen the “Order Pay” page before, you know it only contains the order items table, and the payment form. Nothing else. So, let’s add some HTML content above the table, like a heading, some text, a banner, or whatever you may need to help the customer submit their payment asap!
PHP Snippet: Add HTML Content @ WooCommerce Order Pay Page
/**
* @snippet Add Content To WooCommerce Order Pay Page
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 8
* @community https://businessbloomer.com/club/
*/
add_action( 'before_woocommerce_pay_form', 'bbloomer_add_content_order_pay_page', 10, 3 );
function bbloomer_add_content_order_pay_page( $order, $order_button_text, $available_gateways ) {
echo '<h3>This is a nice heading</h3>';
echo '<p>This is some content with a <a href="">link</a>.</p>';
echo '<img src="banner.jpg">';
}
Hey Rodolfo,
I just saw this blog post about customizing the order pay page. We’re currently using a Request a Quote plugin where the customer has to pay later using that “Order pay” page.
Problem is, that we need to add a custom field there (input field for text/numbers) where the customer has to enter his purchase order in order to be able to order via invoice. I wasn’t been able to insert this custom field on the order pay page. Do you have a code snippet or help for me?
Best regards
I don’t have anything specific at the moment. You could hook into ‘woocommerce_pay_order_before_payment’, which is inside the form, place there a text input, and then enable/disable the Pay button based on such information (via Ajax). It’s doable!