CODEWITHSUNDEEP
phpwordpresspaypalwoocommercecheckout
Dino9
Dino9

Reputation: 95

Move payment methods in Woocommerce checkout page

I have to move the payment methods in the checkout page of a Woocommerce website above the order review, but I don't know how. The problem is, that I tried using the following code:

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 ); 
add_action( 'woocommerce_after_order_notes', 'woocommerce_checkout_payment', 20 );

But also the "Terms and Conditions" text and the "Place order" button are moving with that. I need to have the payment options, then the order review, and in the end the "Terms and Conditions" text and the "Place order" button.

How can I do that?

Upvotes: 6

Views: 13265

Answers (3)

SolaceBeforeDawn
SolaceBeforeDawn

Reputation: 1053

I was looking for a way to do something similar - to move the Ts&Cs above the payment methods. But there's something odd going on with Woo checkout Ts&Cs. There appears to be a hook for the privacy text and a hook for terms text, but no hook for the actual tickbox, so you can use hooks for the first two, but not the actual tickbox which is annoying. Seems like the entire "woocommerce-terms-and-conditions-wrapper" div - that contains all three, should be hookable.

Anyway, I found it easier with jQuery to move my div - and as I was not able to find an easy way to move the terms div - instead, I moved the Payment Div - (which is what you've asked for, so I'm sharing here in case it's useful).

Add this snippet to functions file. Amend insertBefore to whichever div you want to move it. In my example, it's going after the terms and conditions. Tested and working.

function stacko_woomove_paymentmethods() { 
    if (is_checkout() ) { ?>
        <script>
            jQuery(function($) {
              $(document).ready(function(){
$('.wc_payment_methods.payment_methods.methods').detach().insertBefore('button#place_order');
$('.wc_payment_methods.payment_methods.methods').before('<h3 class="note">Select Payment</h3>');
    });
  });
</script>
<? }
}
add_action( 'woocommerce_checkout_init', 'stacko_woomove_paymentmethods');

Upvotes: 0

Khairul
Khairul

Reputation: 890

Original WC Hook

// includes/wc-template-hooks.php:214
add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

Your Hook

This will be in your theme or plugin.

// make sure the priority value is correct, running after the default priority.
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
add_action( 'woocommerce_after_order_notes', 'woocommerce_checkout_payment', 20 );

Your hook should run after WC has loaded; so that you can remove it.

function theme_wc_setup() {
  remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
  add_action( 'woocommerce_after_order_notes', 'woocommerce_checkout_payment', 20 );
}
add_action( 'after_setup_theme', 'theme_wc_setup' );

EDIT: Thanks all, didn't know this is still actively searched. Vote up to help other devs!

Upvotes: 17

Mikel
Mikel

Reputation: 1

Template override is necessary (not possible editing functions.php only).

One possible way to achieve what you want is:

  1. Copy payment.php from woocommerce plugin folder to your_child _theme/woocommerce/checkout/ folder.

  2. Open the newly created payment.php file, and add a custom hook just before the line <div class="form-row place-order">. For example:

    <?php do_action( 'woocommerce_review_order_and_proceed' ); ?>

  3. In your child theme's functions.php, add the code below to unhook woocommerce_order_review action from it's original place, and hook it to the newly created hook:

    remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );

    add_action( 'woocommerce_review_order_and_proceed', 'woocommerce_order_review', 20 );

Upvotes: -2

Related Questions