Skip to content

Instantly share code, notes, and snippets.

@ouija
Created August 11, 2019 22:49
Show Gist options
  • Save ouija/17edfd3a6a4b01cb3ecc739adf9ca603 to your computer and use it in GitHub Desktop.
Save ouija/17edfd3a6a4b01cb3ecc739adf9ca603 to your computer and use it in GitHub Desktop.
WooCommerce: Remove checkout field descriptions 'slideUp and hide' animations
<?
// 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');
@lowegreg
Copy link

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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment