Añadir un campo de checkbox opcional en el checkout de WooCommerce y mostrar en el admin del pedido

En este post te mostraré el código necesario para que puedas añadir un campo de tipo «checkbox» en el checkout de tu WooCommerce.

La finalidad puede ser variada pero para este ejemplo vamos a suponer que queremos ese campo de tipo checkbox para que el cliente indique si quiere que le enviemos el manual de instrucciones por email. Como digo, este es sólo un ejemplo y puede que no sea muy real pero seguro que hay muchísimas posibilidades para este campo.

Para ponernos en situación, a continuación te muestro una captura de un checkout sin el campo que te acabo de comentar:

Añadir un campo de checkbox opcional en el checkout de WooCommerce

Pues bien, ahora te muestro el resultado que vas a obtener tras añadir el código necesario:

Añadir un campo de checkbox opcional en el checkout de WooCommerce

Como puedes observar en ésta última imagen, hay un nuevo campo de tipo «checkbox» que reza: «¿Quieres que te enviemos las instrucciones por email?».

Ahora te muestro el código que hace esto y algo más. Ese algo más te lo muestro en un momento. El código:

Vale, una vez que ya tienes el código para añadir a tu plugin de funciones u otro sitio que más te guste, te indico otra de las cosas que hace este código.

El código recoge el contenido de ese checkbox al «Realizar el pedido» y muestra el resultado de dicha selección en el pedido en cuestión, en la parte de administración. Te muestro un ejemplo a continuación:

Añadir un campo de checkbox opcional en el checkout de WooCommerce

Ya ves que este cliente quiere que le enviemos las instrucciones por email. Habrá otros que no querrán que se la enviemos.

Como decía al inicio, esta funcionalidad daría para un buen número de cosas que podamos tener en mente y no sólo con campos de tipo checkbox sino con otros tipos de campos.

Bueno, espero que este post te sea útil.

Pero espera… que nos falta…

El video

Esto es todo por ahora.

Nos vemos en el siguiente.

Mucho ánimo!

Desactivar la verificación del código postal en el checkout de WooCommerce

Seguro que ya te habías dado cuenta de que en el checkout o «finalizar compra» de WooCommerce hay varios campos que son requeridos y el Código Postal es uno de ellos.

En la siguiente captura de imagen puedes ver que el campo Código Postal es obligatorio.

WooCommerce Snippet: Campo Código Postal checkout opcional

Hay diferentes motivos por los que necesitemos desactivar ese comportamiento del campo Código Postal de WooCommerce pero eso es lo de menos. Si estás leyendo este post es que esto te interesa de una manera o de otra. Bien para desactivar ese comportamiento o bien para quitar el campo del Código Postal del formulario de la página de finalizar compra de WooCommerce.

Voy a explicarte de manera sencilla ambos casos.

Desactivar la verificación del campo «Código Postal»

En este caso lo que vamos a hacer es desactivar la verificación del Código Postal haciendo que ese campo no sea obligario. Es decir, haremos que el campo sea opcional de manera que si el cliente lo rellenga, bien. Si no, también.

Para esto utilizaremos el siguiente código:

Aplicando este código conseguiremos que el campo no sea obligatorio como podemos observar en la siguiente captura de pantalla:

WooCommerce Snippet: Campo Código Postal checkout opcional

Perfecto, si esto es que buscabas, ya lo tienes.

Te recuerdo que este código lo deberías incluir en un plugin de funciones o en su defecto, utilizar el plugin «Code Snippets» y como último recurso añadirlo en el fichero functions.php del tema activo.

Pasamos a la segunda opción…

Quitar el campo Código Postal del formulario de la página «Finalizar compra»

En este caso, como dice claramente el título, vamos a eliminar el campo Código Postal del formulario del checkout de manera que no se muestre, que no aparezca, ¿ok?

Pues no se hable más, para ese caso utilizaremos el siguiente código:

Sencillo…

WooCommerce Snippet: Campo Código Postal checkout opcional

Y para no ser menos, en este caso también te he preparado un video en el que implemento ambos casos.

El video

Bueno, hasta aquí hemos llegado. Espero que todo esto te sea de utilidad.

Saludos y mucho ánimo!

Ir al contenido