How to keep the Calculate Shipping block of WooCommerce Cart always visible

I don’t know about you but I found that the hidden “Calculate Shipping” block quite annoying. It was more logical for me to keep this block always open. It’s just below the WooCommerce Cart, on the left of Cart Totals.

This can be solved by a couple of quick changes. There are 2 files that we will change.

  • \wp-content\plugins\woocommerce\assets\js\frontend\cart.min.js
  • \wp-content\plugins\woocommerce\templates\cart\shipping-calculator.php

Open \wp-content\plugins\woocommerce\assets\js\frontend\cart.min.js. There you have this code:

1
jQuery(document).ready(function(e){e(document).on("click",".shipping-calculator-button",function(){e(".shipping-calculator-form").slideToggle("slow");return!1}).on("change","select#shipping_method, input[name=shipping_method]",function(){var t=e(this).val();e("div.cart_totals").block({message:null,overlayCSS:{background:"#fff url("+woocommerce_params.ajax_loader_url+") no-repeat center",backgroundSize:"16px 16px",opacity:.6}});var n={action:"woocommerce_update_shipping_method",security:woocommerce_params.update_shipping_method_nonce,shipping_method:t};e.post(woocommerce_params.ajax_url,n,function(t){e("div.cart_totals").replaceWith(t);e("body").trigger("updated_shipping_method")})});e(".shipping-calculator-form").hide()});

Replace this with:

1
jQuery(document).ready(function(e){e(document).on("click",".shipping-calculator-button",function(){e(".shipping-calculator-form").slideToggle("slow");return!1}).on("change","select#shipping_method, input[name=shipping_method]",function(){var t=e(this).val();e("div.cart_totals").block({message:null,overlayCSS:{background:"#fff url("+woocommerce_params.ajax_loader_url+") no-repeat center",backgroundSize:"16px 16px",opacity:.6}});var n={action:"woocommerce_update_shipping_method",security:woocommerce_params.update_shipping_method_nonce,shipping_method:t};e.post(woocommerce_params.ajax_url,n,function(t){e("div.cart_totals").replaceWith(t);e("body").trigger("updated_shipping_method")})});});

Save and upload.

Next, open \wp-content\plugins\woocommerce\templates\cart\shipping-calculator.php

Around line #22 you have this line:

1
<h2><a href=&quot;#&quot; class="shipping-calculator-button"><?php _e( 'Calculate Shipping', 'woocommerce' ); ?> <span>&amp;darr;</span></a></h2>

Replace that with

1
<h2><?php _e( 'Calculate Shipping', 'woocommerce' ); ?></h2>

Save and upload.

DISCLAIMER: Do it at your own risk, and check twice before doing anything. Download and save a backup copy of any file you are modifying in the server as a standard procedure. Test this live at Prêt à Porter Femme by adding a product in the cart. I don’t take responsibility of any problem in your site that may arise if you do anything wrong. If you are not comfortable with codes, please consult a professional. All the best.