Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

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.

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

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?

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x