Cómo limitar los caracteres en los campos del Checkout en WooCommerce

Desarrollando un plugin personalizado de WooCommerce para conectar Navision, nos encontramos con la necesidad de limitar el número de caracteres en los campos del checkout para evitar problemas al enviar los datos de los pedidos a Navision.

En esta publicación, veremos cómo limitar los caracteres en los inputs del checkout de WooCommerce de dos formas: con JavaScript o con PHP. Al final, compartiremos nuestra recomendación basada en nuestra experiencia.

Limitar caracteres en los campos del Checkout de WooCommerce con JavaScript

Para limitar el número de caracteres en los campos de la página de pago usando JavaScript, primero debemos identificar los inputs que queremos restringir. A continuación, se presenta un ejemplo sencillo de cómo hacerlo:

jQuery(document).ready(function($) {
    $('#billing_first_name, #billing_last_name, #billing_address_1').on('input', function() {
        var maxlength = 50; // Límite de caracteres
        if($(this).val().length > maxlength) {
            $(this).val($(this).val().substr(0, maxlength));
        }
    });
});

En este script, utilizamos jQuery para seleccionar los campos de nombre, apellido y dirección de facturación. Establecemos un límite de 50 caracteres, y recortamos el texto si excede este límite. Este método es rápido y sencillo de implementar, ideal para aquellos que prefieren no tocar el código PHP.

Cómo añadir el JavaScript al Checkout

Una de las mejores formas de insertar el JavaScript que hemos visto antes en la página de checkout de WooCommerce, es añadirlo con el hook wp_footer, solo en la página de checkout. Esto garantiza que el código no afecte el rendimiento, ni afecta a otras partes de la web.

Para hacerlo, puedes añadir el siguiente código a tu archivo functions.php:

add_action('wp_footer', 'custom_checkout_script');
function custom_checkout_script() {
    if (is_checkout()) {
        ?>
        <script type="text/javascript">
            // ... código JavaScript
        </script>
        <?php
    }
}

En este código, utilizamos el hook wp_footer para insertar el JavaScript en el pie de página. El condicional is_checkout() asegura que el script solo se cargue en la página de checkout, evitando así cualquier impacto en el rendimiento y en el código de otras partes del sitio.

Limitar el número de caracteres en los inputs del Checkout con PHP

Limitar el número de caracteres en los campos del Checkout de WooCommerce también se puede hacer usando PHP. Esta es una excelente opción si prefieres gestionar la restricción desde el lado del servidor.

A continuación, se muestra un ejemplo de cómo hacerlo:

// Limitar el número de caracteres en el campo de ciudad de facturación y envío
add_filter('woocommerce_checkout_fields', 'bk_override_checkout_fields');
function bk_override_checkout_fields($fields) {
    // Establece el límite máximo de caracteres para el campo de ciudad de facturación
    $fields['billing']['billing_city']['maxlength'] = 30;
    // Establece el límite máximo de caracteres para el campo de ciudad de envío
    $fields['shipping']['shipping_city']['maxlength'] = 30;
    return $fields;
}

En este código, utilizamos el filtro woocommerce_checkout_fields para modificar los campos del checkout. Establecemos un límite de 30 caracteres para los inputs de ciudad de facturación y de envío. Esto asegura que los datos insertados por los usuarios no excedan el límite permitido, evitando posibles inconvenientes al procesar los pedidos.

Lista de campos en el Checkout de WooCommerce

Puedes limitar el número de caracteres en todos los campos que mostramos de este listado de la página de pago de WooCommerce. Puedes utilizarlo tanto con JavaScript, como con PHP.

Como siempre, es aconsejable hacer estos cambios en el child theme, y previamente guardar una copia de seguridad del archivo functions.php.

Cómo cambiar el texto de los campos del checkout de WooCommerce

Además de limitar el número de caracteres, también puedes cambiar el texto de los campos en la página de pago de WooCommerce. A continuación, se muestra un ejemplo de cómo hacerlo:

// Cambiar el texto de la población en la página de pago.
add_filter('gettext', 'bk_text_strings', 20, 3);
function bk_text_strings($translated_text, $text, $domain) {
    switch ($translated_text) {
        case 'Población' :
            $translated_text = esc_html__('Población (max. 30 caracteres)', 'woocommerce');
            break;
    }
    return $translated_text;
}

En este código, utilizamos el filtro gettext para cambiar el texto de la etiqueta del campo de población en la página de pago. Especificamos que el nuevo texto será «Población (max. 30 caracteres)» para indicar claramente el límite de caracteres a los usuarios.

Nuestra recomendación para limitar caracteres en WooCommerce

Mi recomendación es hacerlo con PHP porque no añade más JavaScript a la página, lo cual es mejor para la optimización y evita que cualquier error de JavaScript afecte esta funcionalidad. Limitar caracteres en checkout de WooCommerce mediante PHP proporciona una solución más robusta y segura.

De todas formas, si te sientes más cómodo con JavaScript, o vas a añadir más funcionalidades al checkout de WooCommerce, también es una forma válida. Ambas opciones son efectivas, pero PHP ofrece una solución más confiable a largo plazo.

Si necesitas asistencia adicional, o tienes alguna pregunta específica sobre cómo limitar caracteres en checkout de WooCommerce, no dudes en visitar nuestra página de servicios de desarrollo para WordPress.

Estamos aquí para ayudarte a optimizar tu tienda online, y resolver cualquier problema técnico que te puedas encontrar.