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?
Is there away to have this on a product page
Calculate shipping button with 1 box which is for postal code since its calculating by postal code (shipping calculated weight and postal via a shipping plugin at checkout)
Hi Marc,

To calculate shipping costs based on the shipping zone on the product page, I suggest you to try the plugin Shipping Cost on Product Page Calculator for WooCommerce .This plugin allows customers to change the delivery location and see updated costs and shipping methods as configured in the shipping zones settings.
Oh yeah i got the shipping pro with them
Problem is black theme and that plugin makes it for white theme wise so i have to use css but even when i put it in the CSS styles in the theme it just ignroes it unless i change it Dev mode on firefox/chrome etc… and octolize just repeats with “just use css”
Hi Marc,

When you’re trying to override the plugin’s CSS styles, it’s crucial to use selectors that match the specificity of those used by the plugin. Since this issue is specific to the plugin, I recommend checking the CSS styles that you have applied directly with the plugin’s author or support team.
Ja so i had to go into file manager and download and exit in notepad++ their app.css now works correctly basicalyl made the hex codes inerit etc.
Good to know you managed to fix it by editing the app.css file of the plugin.