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) {
                $('form.woocommerce-shipping-calculator').remove();
            }
        });
        // Re-run on window resize
        $(window).resize(function() {
            if ($(window).width() < 768) {
                $('form.woocommerce-shipping-calculator').remove();
            } 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>');
                }
            }
        });
    </script>
    <style type="text/css">
        /* Hide the shipping calculator on mobile */
        @media only screen and (max-width: 767px) {
            form.woocommerce-shipping-calculator {
                display: none !important;
            }
        }
    </style>
    <?php
}
add_action('wp_footer', 'ts_remove_shipping_calculator_mobile');

Output

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.

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.