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.

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?