El otro día un cliente nos solicitó que obligáramos a su tienda virtual bajo WooCommerce a que le solicitara de forma obligatoria a sus clientes la introducción del código postal para poder calcular correctamente los gastos de envío a través de nuestro plugin WooCommerce – APG Weight and Postcode/State/Country Shipping.

En el checkout es muy fácil hacerlo, sólo hay que añadir una pequeña porción de código en el archivo functions.php del tema principal o del tema hijo que estemos usando. Además es fácilmente deducible a partir de nuestra entrada ¿Cómo añadir un campo NIF o CIF a WooCommerce 2.1?. El código PHP es el siguiente:

//Código postal obligatorio en el checkout
function codigo_postal( $campos ) {
    $campos['postcode']['required'] = true;
    $campos['postcode']['class'][0] .= ' update_totals_on_change';

    return $campos;
}
add_filter( 'woocommerce_default_address_fields', 'codigo_postal' );

El problema surge al tratar de hacer lo mismo en el campo Código Postal del carro de la compra, ya que hay que hacerlo con JavaScript en combinación con PHP.

Para ello utilizamos jQuery Validation Plugin, que cargamos remotamente desde un CDN, y un pequeño script PHP que se asegura de introducirlo exclusivamente en el carro. Obviamente hay que añadirlo también al archivo functions.php.

//Código postal obligatorio en el carro de la compra
function codigo_postal_carro() {
    if ( is_cart() ) {
        wp_enqueue_script( 'jquery' );
?>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery( function( $ ) {
    $( 'form.shipping_calculator' ).validate( {
        rules: {
            calc_shipping_postcode: "required"
        },
        messages : {
            calc_shipping_postcode : {
                required : 'Introduzca un código postal'
            }
        }
    } );
} );
</script>
<?php
    }
}
add_action( 'wp_footer', 'codigo_postal_carro', 50 );

¿Cómo hacer obligatorio el campo Código Postal tanto en el carro como en el checkout de WooCommerce?

Captura de pantalla del resultado del código PHP y JavaScript empleado

Con estas simples y sencillas líneas de código conseguiremos forzar a WooCommerce para que obligue a todos nuestros clientes a introducir el código postal tanto para obtener el importe de los gastos de envío, como para poder realizar el pedido.

Esperamos que os resulte útil y funcional.

P.D: si quieres personalizar el resultado visual del mensaje que se muestra, sólo tendrás que añadir al archivo style.css de tu tema principal o tema hijo la regla label.error para personalizar sus atributos: color, tamaño, fuente…