Move Shipping and payment metods options after Billing/Shipping info

  • Resolved dimi993

    (@dimi993)


    1 month, 1 week ago

    Hello,
    I’m trying to redesign a website’s checkout. I want to move all the payment and shipping options under the billing information form (in column to the left) and keep the order review (products, subtotal, final total) and the coupon form in a seperate column to the right.

    So far, I have added the following lines to my functions.php
    remove_action( ‘woocommerce_checkout_order_review’, ‘woocommerce_checkout_shipping’, 10 );
    remove_action( ‘woocommerce_checkout_order_review’, ‘woocommerce_checkout_payment’, 20 );

    In form-checkout.php, I have added:
    do_action( ‘woocommerce_checkout_shipping’ );
    do_action( ‘woocommerce_checkout_payment’ );

    However, the payment methods have been removed from the order_review, but they do not display where the do_action is.
    Also, the shipping methods are still under the order_review and in place of the do_action, I see the shipping details form. I guess woocommerce_checkout_shipping is about the form.

    How do I change checkout in order to create the layout I want?
    In short, the order is:
    left Column: Billing details – Shipping details – Shipping methods – payment methods – Pay button
    Right column: Order review – Coupon input

    My woocommerce version is 9.0.2

    Thank you in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter dimi993

    (@dimi993)

    Hey,
    I figured out hgow to move them using the action hooks and functions.
    Now, my problem is that when I change the region or Zip code, the shipping methods rae not refreshed.

    Any ideas?

    Plugin Support Reynier C. (woo-hc)

    (@reynierc)

    Hi @dimi993 ,

    We’re you’ve figured out the first concern.

    Now, my problem is that when I change the region or Zip code, the shipping methods rae not refreshed.

    For shipping methods to refresh when the region or zip code changes, you’ll need to include some additional JS to trigger an update. However, please note that custom code falls outside our scope of support. We recommend asking your development questions in the WooCommerce Community Slack. Or you can also get help from the WooExperts or Codeable.io.

    If you’re looking to avoid code snippets, you can opt for a plugin that offers more control over the checkout process. The Conditional Checkout Fields & Edit Checkout Fields plugin might offer this functionality, allowing you to reorganize checkout fields based on conditions without the need for code. This should help you adjust the checkout flow according to your preferences.

    Hope this helps!

    Plugin Support Feten L. a11n

    (@fetenlakhal)

    Hello! Since we haven’t received a response, I’ll mark this conversation as complete. We’re here to help whenever you’d like to pick things back up.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Tags