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">';
}
