Display order on all steps

I’m glad you enjoy using the plugin ??

You could go to the “WP Admin -> Pages” and open the “Checkout” page for editing. Normally there is only the [woocommerce_checkout] shortcode. You’d need to create two columns in which on is the [woocommerce_checkout] shortcode an in the second column the “Your order” section. See this screenshot.

By default there is no shortcode for the “Your order” section in WooCommerce, but you can quickly write one by adding the following PHP snippet to your child theme’s functions.php file:

add_shortcode( 'woocommerce_your_order', 'woocommerce_your_order' );
function woocommerce_your_order( $atts ) {
    return woocommerce_order_review();
}

• This reply was modified 3 years, 6 months ago by Diana Burduja.

Wow! Thank you so much for your help, Diana ??

I did as you instructed and the order now shows on the Checkout page.

The only issue is the “Your order” section automatically floats to the top of the page regardless of where I put it.

It’s also duplicated on the final step where the payment and the order are displayed together.

I wonder if you have any suggestions for the next steps. I can happily email you a link to a test checkout page I created if you would like. Please let me know.

Thank you so much!

The shortcode PHP snippet is echoing the “Your order” template instead of returning the template’s HTML, which places the “Your order” section above the checkout steps and not inside the right-side column, where it should be. But that can be fixed by replacing the previously mentioned PHP snippet with the following:

add_shortcode( 'woocommerce_your_order', 'woocommerce_your_order' );
function woocommerce_your_order( $atts ) {
    ob_start();
    woocommerce_order_review();
    $content = ob_get_contents();
    ob_clean();
    return $content;
}

As about removing the “Your order” section from within the steps, then that can be achieved by the following PHP snippet:

add_filter( 'wpmc_modify_steps', function( $steps ) {
    unset( $steps['review'] );
    return $steps;
}, 10 );

Also, make sure the “Show the Order and Payment steps together” option on the “WP Admin -> WooCommerce -> Multi-Step Checkout” page is unchecked, otherwise the Payment section will also be removed with the “wpmc_modify_steps” filter.

This is amazing! Thank you so much, Diana!

Your codes worked beautifully.

I also love how you described what each of them does. You must be a teacher. I found that to be very helpful.

Now the only minor tweak that would make everything look perfect would be if the multi-step progress bar spanned the length of the two columns above them.

Right now, the bar is directly above the lefthand column only in a compressed fashion.

I’m not sure if it’s possible to do this, but if it can, that would be awesome.

And I promise I won’t bug you again for anything else ??

Thank you again, Diana.

I’m sorry to disappoint you, but that doesn’t work. We’ve already defined the checkout steps, together with the progress bar, in one column and the “Your order” section in another column. I don’t know of any way for the progress bar to break from its <div> element so it can span up to the length of its parent element.

Ah, I’m not disappointed, Diana. I’m very grateful to you. Thank you for all your help.

After I posted my comment yesterday, I made the entire checkout page wider and then adjusted the width of the columns to make the checkout wider and the order narrower. That and I put a dropshadow box around the order, so it now appears separate from the checkout column.

It all looks really good now.

Again, thank you for your kindness and your help! Have a beautiful weekend!

I’m glad I could help ??