How to Move Shipping Calculator to The Top of the Cart Totals in WooCommerce?

Are you looking to move your shipping calculator on your cart page from the default position to a new one? This snippet is the solution for you.

add_filter( 'woocommerce_shipping_show_shipping_calculator', '__return_false' );

add_action( 'woocommerce_cart_totals_before_shipping', function(){
	$packages = WC()->shipping()->get_packages();
	$first_package = array_shift( $packages );
	$formatted_destination = WC()->countries->get_formatted_address( $first_package['destination'], ', ' );
	?>
	<tr>
		<td colspan="2">
			<p>
			<?php
				if ( $formatted_destination ) {
					// Translators: $s shipping destination.
					printf( esc_html__( 'Shipping to %s.', 'woocommerce' ) . ' ', '<strong>' . esc_html( $formatted_destination ) . '</strong>' );
					$calculator_text = esc_html__( 'Change address', 'woocommerce' );
				} else {
					echo wp_kses_post( apply_filters( 'woocommerce_shipping_estimate_html', __( 'Shipping options will be updated during checkout.', 'woocommerce' ) ) );
				}
				?>
			</p>
			<?php woocommerce_shipping_calculator(); ?>
		</td>
	</tr>
	<?php
} );

Output

When the customer views the cart page, the default shipping calculator moves from down to the top of the cart totals section as shown below.

Solution:  Remove the ‘Calculate Shipping’ Link and Display the Shipping Calculator Already Open in WooCommerce

In our previous section, we saw how to move the WooCommerce Shipping Calculator to the top of the cart total for better visibility. Now, we’re taking it a step further by removing the default “Calculate Shipping” text and link, and instead, displaying the shipping fields directly.

This tweak is especially useful for stores that sell to registered users only (where the customer’s address gets pre-filled), offer flat-rate shipping for local deliveries, or sell exclusively to one predefined region.

In this post, we’ll show you how to eliminate that extra click by keeping the shipping fields always visible on the cart page and removing the “Calculate Shipping” link.

// Remove the default shipping calculator
add_filter( 'woocommerce_shipping_show_shipping_calculator', '__return_false' );

// Display the shipping calculator at the top of the cart totals, fully open
add_action( 'woocommerce_cart_totals_before_shipping', function() {
    $packages = WC()->shipping()->get_packages();
    $first_package = array_shift( $packages );
    $formatted_destination = WC()->countries->get_formatted_address( $first_package['destination'], ', ' );
    ?>
    <tr class="custom-shipping-calculator">
        <td colspan="2">
            <p>
                <?php
                if ( $formatted_destination ) {
                    printf( esc_html__( 'Shipping to %s.', 'woocommerce' ) . ' ', '<strong>' . esc_html( $formatted_destination ) . '</strong>' );
                } else {
                    echo wp_kses_post( apply_filters( 'woocommerce_shipping_estimate_html', __( 'Shipping options will be updated during checkout.', 'woocommerce' ) ) );
                }
                ?>
            </p>

            <?php
            // Output the shipping calculator form manually without the toggle
            ?>
            <form class="shipping-calculator-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">

                <section id="calc_shipping_country">
                    <select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state" rel="calc_shipping_state">
                        <?php
                        foreach ( WC()->countries->get_shipping_countries() as $key => $value ) {
                            echo '<option value="' . esc_attr( $key ) . '" ' . selected( WC()->customer->get_shipping_country(), $key, false ) . '>' . esc_html( $value ) . '</option>';
                        }
                        ?>
                    </select>
                </section>

                <section id="calc_shipping_state">
                    <?php
                    $current_country = WC()->customer->get_shipping_country();
                    $states = WC()->countries->get_states( $current_country );
                    if ( is_array( $states ) && ! empty( $states ) ) {
                        echo '<select name="calc_shipping_state" id="calc_shipping_state">';
                        foreach ( $states as $state_key => $state_value ) {
                            echo '<option value="' . esc_attr( $state_key ) . '" ' . selected( WC()->customer->get_shipping_state(), $state_key, false ) . '>' . esc_html( $state_value ) . '</option>';
                        }
                        echo '</select>';
                    } else {
                        echo '<input type="text" class="input-text" value="' . esc_attr( WC()->customer->get_shipping_state() ) . '" placeholder="' . esc_attr__( 'State / County', 'woocommerce' ) . '" name="calc_shipping_state" id="calc_shipping_state" />';
                    }
                    ?>
                </section>

                <section id="calc_shipping_city">
                    <input type="text" class="input-text" value="<?php echo esc_attr( WC()->customer->get_shipping_city() ); ?>" placeholder="<?php esc_attr_e( 'City', 'woocommerce' ); ?>" name="calc_shipping_city" id="calc_shipping_city" />
                </section>

                <section id="calc_shipping_postcode">
                    <input type="text" class="input-text" value="<?php echo esc_attr( WC()->customer->get_shipping_postcode() ); ?>" placeholder="<?php esc_attr_e( 'Postcode / ZIP', 'woocommerce' ); ?>" name="calc_shipping_postcode" id="calc_shipping_postcode" />
                </section>

                <button type="submit" name="calc_shipping" value="1" class="button"><?php esc_html_e( 'Update', 'woocommerce' ); ?></button>
                <?php wp_nonce_field( 'woocommerce-cart' ); ?>
            </form>
        </td>
    </tr>
    <?php
});
add_action( 'wp_enqueue_scripts', 'hide_shipping_destination_text', 20 );
function hide_shipping_destination_text() {
    if ( is_cart() ) {
        wp_add_inline_style( 'woocommerce-inline', '
            .woocommerce-shipping-destination {
                display: none !important;
            }
        ' );
    }
}

Output 

When a customer visits the cart page, the shipping address form is displayed with the saved address automatically filled in with Country, State, City, and Postcode values. The ‘Calculate Shipping’ text with its link is removed to reduce unnecessary clicks and to simplify the cart experience.

When a guest user visits the cart page and no address is pre-filled, the message ‘Shipping options will be updated during checkout’ will be displayed.”

In this post, we have shown how to replace the shipping calculator at a different location of cart totals. But in smaller devices, showing fewer elements on the mobile page can result in faster loading times. In such cases, you can also remove the WooCommerce Shipping Calculator on Mobile Device.

Read Related: How to Create TextField In WooCommerce Checkout Page?