Woocommerce Review Order before Payment

Question

I am trying to add a review order page on my Woocommerce web shop. Currently, When I add items to the cart, I can proceed to the checkout page where the billing and shipping addresses are required and submitted, then, the next step is the Payment page (with PayPal). I want to add an order review page before it goes to the Payment page, so after the addresses are entered on the checkout page and the user clicks proceed, an order summary/review page should be displayed with the Order totals, and addresses entered previously, and a link to go back if ten user wants to change an address. Like a confirmation page. Then, once the user proceeds, then it goes to the payment page.

I have researched this with no luck. I tried this action in the functions.php, but it doesn't work:

add_action( 'woocommerce_review_order_before_submit','woocommerce_order_details_table');

Is there a way to do this with woocommerce? There are no setting for this in the admin panel either.

Berlioz

Have you solved your problem in the meantime? – Vanzant

Answer 1

I recently came across this issue. My solution was to create a page called 'Review Order' in the back-end of Wordpress and enter the shortcode [woocommerce_checkout] in the content editor. I then create a page-review-order.php in the root of my child theme.

In my page-review-order.php, I set the following definitions:

if ( ! defined( 'THIS_IS_CHECKOUT' ) )
{
  define( 'THIS_IS_CHECKOUT', true );
}
if ( ! defined( 'THIS_IS_REVIEW') )
{
  define( 'THIS_IS_REVIEW', true);
}

From here I was able to go through the typical checkout process and get the information I needed without much hassle, but I could swap out what parts of the process could belong to the checkout page and what parts could belong to the review page with the following:

if (defined( 'THIS_IS_REVIEW'))
{
  $reviewPage = true;
}

Robison

can you explain in more detail how you did this? I want to do the same thing. Thanks! – Mayapple

Answer 2

Looking at a WooCommerce setup that I manage, I can see that you can set a 'Cart' page in the admin through WooCommerce > Settings > Checkout (tab at the top).

Scroll down to 'Checkout Pages' and make sure you have a 'Cart Page' selected. If you don't create a page called, for example, 'Shopping Cart' and add the following shortcode to it: [woocommerce_cart]

Once you've done that, go back to the previous WooCommerce settings page and select that new page you created.

This page is placed before the billing details in the checkout process.

Let me know if this helps.

Lint

All of this is set. Just to clarify the site works, the checkout and payments work. What I want is to add a page between the checkout and the payment page that would ask users to confirm to their billing and shipping addresses entered on the checkout page, if they confirm they move forward to pay, or they move back to the checkout page to edit an address – Berlioz

Answer 3

Although this might not be the perfect solution, here is how I sorted it out.

Please have a look at this stackoverflow thread.

We insert a hidden input confirm-order-flag, telling wether it is to be reviewed or already reviewed.

Then after the validation we use woocommerce_after_checkout_validation to check for this value. If it is to be reviewed, we add a fake error.

In jQuery we check for the number of errors, which will be one if it is to be reviewed and 2 (or more) if it has errors (If it has 0, you are already on the review page).

    $(document.body).on('checkout_error', function () {
    var error_count = $('.woocommerce-error li').length;
    var url_params = form_parameters_to_url();
    if (error_count == 1) { // Validation Passed (Just the Fake Error I Created Exists)
                window.location = "review_page_url";

            }else{ // Validation Failed (Real Errors Exists, Remove the Fake One)
                $('.woocommerce-error li').each(function(){
                    var error_text = $(this).text();
                    if (error_text == 'custom_notice'){
                        $(this).css('display', 'none');
                    }
                });
            }
        });

On the review page url I also insert the [woocommerce_checkout] shortcode, but this time in a container with an id: #confirm_order_page. I use jQuery again, to set the value of the hidden input to 0:

$('#confirmation_form #place_order').click(function () {
    $('#confirm-order-flag').val('');       
});

Then it has no errors, and it passes the validation. I hide the form on the review page from css. It might not be perfect solution, but it might help you to get started with this issue.

Tangier