Support » Plugin: WooCommerce » How to move Shipping section to the top of the checkout page

  • Resolved hamzatopo17

    (@hamzatopo17)


    Hello everyone .

    The situation is as follows ,I have a checkout page with all the sections bellow :
    -Client contact informations .
    -REVIEW ORDER(with shipping sub-section)
    -Confirmation adn pay .

    Im trying now to make shipping section at the top of the checkout page before the user start filling informations etc, if any one have a script to do that via hooks or a plugin
    i will apreciate that .
    extrat :You can use those images to understand (
    https://ibb.co/0MTRTL8
    https://ibb.co/L0MfnnZ
    )

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Claudio Sanches

    (@claudiosanches)

    Hello @hamzatopo17,

    Im trying now to make shipping section at the top of the checkout page before the user start filling informations etc, if any one have a script to do that via hooks or a plugin

    Note that by default shipping options comes after all the address because shipping options may change based on billing or shipping addresses, so moving it to the top could cause some issues in case there’s many shipping options, for example if the customer selects one of 3 options, but after all addresses get filled those options could change, and maybe getting by default another options get selected, making hard for the customer to notice it at the bottom of the page while is clicking the “Place order” button.

    Anyway, if you like to change it, you need to override WooCommerce’s templates into your theme.

    You should copy those files to your theme:

    • wp-content/plugins/woocommerce/templates/checkout/review-order.php to wp-content/themes/YOUR-THEME/woocommerce/checkout/review-order.php
    • wp-content/plugins/woocommerce/templates/checkout/form-checkout.php to wp-content/themes/YOUR-THEME/woocommerce/checkout/form-checkout.php

    You’ll find the shipping options inside YOUR-THEME/woocommerce/checkout/review-order.php, you should be able to cut that block of code and move to any place you like in YOUR-THEME/woocommerce/checkout/form-checkout.php.

    This is how the shipping options code looks like:

    <?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
    
    	<?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
    
    	<?php wc_cart_totals_shipping_html(); ?>
    
    	<?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
    
    <?php endif; ?>
    

    I hope it helps you.

    Thread Starter hamzatopo17

    (@hamzatopo17)

    I totaly agree with you b but this is what the client wanted by the end …btw The answer helped me so much Thank you for the fast reply !

    Thomas

    (@goldenshawarma)

    im having the same issue. I want to move the shipping options at the start of the checkout but then only the needed checkout fields is displayed based the shipping method selected

    i mean it makes sense if i choose pickup then I should only be asked for my name and mobile number, but then i got the point that an address to needs to be supplied first to determine the shipping methods for a particular address.

    i know that third party plugins does this but im wondering why the core woo functions doesnt offer this kind of dynamic set up.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to move Shipping section to the top of the checkout page’ is closed to new replies.