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

How to Remove the WooCommerce Shipping Calculator on Mobile Device?

Do you want to remove the WooCommerce shipping calculator on a mobile device on the cart page? Then this snippet is the solution.

function ts_remove_shipping_calculator_mobile() {
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            if ($(window).width() < 768) {
        // Re-run on window resize
        $(window).resize(function() {
            if ($(window).width() < 768) {
            } else {
                // Restore the calculator if it was removed and the window width is greater than or equal to 768 pixels
                if ($('form.woocommerce-shipping-calculator').length === 0) {
                    $('.cart-collaterals').append('<form class="woocommerce-shipping-calculator">' + woocommerce_params.shipping_calculator_message + '</form>');
    <style type="text/css">
        /* Hide the shipping calculator on mobile */
        @media only screen and (max-width: 767px) {
            form.woocommerce-shipping-calculator {
                display: none !important;
add_action('wp_footer', 'ts_remove_shipping_calculator_mobile');


This code snippet makes sure that on smaller screens (like phones), the shipping calculator in a WooCommerce online store won’t show up. It uses a combination of JavaScript and CSS to hide and show the calculator based on the screen width.

How to Remove the WooCommerce Shipping Calculator on Mobile Device? - Tyche Softwares

You can also customize the shipping calculator to the top of the cart totals in WooCommerce that will help to clearly identify the shipping calculator between the subtotal and shipping method options.

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

Share It:

Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x