WooCommerce: Remove checkout field descriptions 'slideUp and hide' animations

functions.php

<?
// WooCommerce has a stupid function in the ./assets/js/frontent/woocommerce.min.js file that hides/shows the 'description' elements
// for the checkout fields both when there is an onclick event on the document body, and when any field input is clicked.
//
// The offending code for this 'feature' is the following:
// i(document.body).on("click",function(){i(".woocommerce-input-wrapper span.description:visible").prop("aria-hidden",!0).slideUp(250)}),i(".woocommerce-input-wrapper").on("click",function(e){e.stopPropagation()}),i(".woocommerce-input-wrapper :input").on("keydown",function(e){var o=i(this).parent().find("span.description");if(27===e.which&&o.length&&o.is(":visible"))return o.prop("aria-hidden",!0).slideUp(250),e.preventDefault(),!1}).on("click focus",function(){var e=i(this).parent(),o=e.find("span.description");e.addClass("currentTarget"),i(".woocommerce-input-wrapper:not(.currentTarget) span.description:visible").prop("aria-hidden",!0).slideUp(250),o.length&&o.is(":hidden")&&o.prop("aria-hidden",!1).slideDown(250),e.removeClass("currentTarget")}),
//
// This doesn't work well with some addons like the Custom Checkout Fields plugin, where the description is show when the page
// loads, but then it hides wheneven the user clicks anywhere on the checkout page.
//
// Or sometimes you might not want this default behaviour to occur at all, and this code will disable it without having to
// edit the actual woocommerce.min.js file.
//
// Add the following code to your theme's functions.php file to disable this stupid feature once and for all!

function disable_woocommmerce_hide_description_checkout_fields() {
    if (is_checkout()) {
        wc_enqueue_js("
            $(function() {
                // Prevent WooCommerce hide description function that is bound to document.body
                $(document.body).off( 'click');
                // Prevent WooCommerce hide description function that is bound to inputs
                $('.woocommerce-input-wrapper :input').off('click focus');
            });
        ");
    }
}
add_action('wp_enqueue_scripts', 'disable_woocommmerce_hide_description_checkout_fields');

Great! Saved me from replacing the woocommerce.min.js file and having to track updates for it in the future. Thanks 👍

Thank you but it disables login form's button on the top of the checkout for guest customers.

This also disables the coupon code part of the checkout form.

Commenting out / removing $(document.body).off( 'click');` seems to do the same job with the descriptions but without disabling the Login and Coupon controls.

This is a better solution. (Make sure your css is not targering the .description class)

$(function() {
    jQuery('body.woocommerce-checkout span.description').removeClass('description');
});

This will prevent you from removeing all event listeners on the body.

Nice work, @ouija . Also, love the color commentary 👌

Another alternative is to force it to be displayed at all times and prevent the slideUp and slideDown jQuery functions from affecting it using CSS rules like these:

.woocommerce form .form-row .woocommerce-input-wrapper .description{
    display:block !important;
    height:auto !important;
    padding: 1em !important;
    margin: 0.5em 0 0 !important;
    overflow: visible !important;
}

The original solution by @ouija has a flaw where it disables buttons that might have been added inside a form field wrapper.

That is because the jQuery selector .woocommerce-input-wrapper :input, more specifically the :input part, targets inputs, select, textarea and also buttons.

In the end, I removed that feature from the woocommerce.js file since I was already replacing it on our WooCommerce checkout plugin. I came across this problem today when adapting our plugin to use on an older project.

What worked for me is to remove the .description class, add a custom class, and replicate the WooCommerce-CSS for both span and span:before for the custom class. Using the same css for the standard and the custom class, there is no diference to be seen when the original class is removed.

Just a heads up, I found this script as I was having the same issue. Be aware that this removes all body click events. I found a simpler solution that doesn't impact other events.

.woocommerce-additional-fields .description { display: inline !important; }

Just a heads up, I found this script as I was having the same issue. Be aware that this removes all body click events. I found a simpler solution that doesn't impact other events.

.woocommerce-additional-fields .description { display: inline !important; }

Should have read the other comments, I'm not the only one to realize this...