CODEWITHSUNDEEP
wordpresswoocommercehook-woocommerce
H. Frederick
H. Frederick

Reputation: 139

Moving Woocommerce Order Review to Top of Checkout

I'm trying to move the order review section to the top of Woocommerce checkout page and this is working:

remove_action( 'woocommerce_checkout_order_review',    'woocommerce_order_review', 10 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_order_review', 20 );

But when Checkout opens it scrolls down to the order review section, rather than to the top of the page.

Upvotes: 7

Views: 5535

Answers (2)

Arun Basil Lal
Arun Basil Lal

Reputation: 481

Moving the review form doesn't automatically move the Your Order heading. This is what I added to functions.php

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
add_action( 'woocommerce_before_checkout_form', 'prefix_wc_order_review_heading', 3 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_order_review', 4 );

/**
 * Add a heading for order review on checkout page. 
 * This replaces the heading added by WooCommerce since order review is moved to the top of the checkout page.
 */
function prefix_wc_order_review_heading() {
    echo '<h3>Your Order</h3>';
}

And to hide the existing Your Order heading (and some spacing for the credit card form), I added this to style.css

.woocommerce-checkout #order_review_heading {
    display: none !important;
}

.woocommerce-checkout #order_review {
    margin-top: 2rem !important;
}

Upvotes: 0

H. Frederick
H. Frederick

Reputation: 139

This works:

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
add_action( 'woocommerce_after_checkout_billing_form', 'woocommerce_order_review', 20 );

Upvotes: 5

Related Questions