checkout

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

Posted on 3 marzo 20213 marzo 2021 by Óscar Abad Folgueira

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:

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:

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

Posted on 1 marzo 20211 marzo 2021 by Óscar Abad Folgueira

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:

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…

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!

Establecer un país por defecto en el formulario del checkout de WooCommerce

Posted on 27 mayo 202026 mayo 2020 by Óscar Abad Folgueira

WooCommerce nos permite establecer o más bien limitar los páises a los que venderemos. Si sólo seleccionamos un país en los ajustes, ese país estará seleccionado pero si seleccionamos varios o no seleccionamos ninguno para que se pueda vender a todo el mundo, tal vez queramos que el país que se muestra por defecto en el campo de «País» del checkout de WooCommerce sea otro y no el que se muestra.

Como podemos ver en la siguiente imagen, el país por defecto en el campo de «país» de los detalles de facturación es «España«:

WooCommerce - Campo país por defecto en el checkout

Por el motivo que sea, queremos otro país por defecto, pongamos… «Finlandia«.

Antes de nada, necesitamos saber el código de ese país por lo que podemos mirarlo en el siguiente listado:

WooCommerce Country Codes & State Codes List

Bien, comprobamos y vemos que el código para «Finlandia» es «FI», como cabía esperar…

Una vez que ya sabemos el código del país que vamos a establecer por defecto en el campo «país» del formulario de «Detalles de facturación» del checkout, procedemos a añadir el siguiente snippet en el functions.php de nuestro tema activo o mejor en nuestro plugin de funciones:

Sencillo, ¿verdad?

Ahora, si queremos, podemos cambiar el código del país para que sea otro y no Finlandia el que se muestre por defecto.

El video

Espero que este tutorial os sea util.

Os invito a dejar un comentario.

Saludos y ánimo!

WooCommerce Shortcode: Finalizar compra (Checkout) [woocommerce_checkout]

Posted on 2 abril 202018 mayo 2020 by Óscar Abad Folgueira

[woocommerce_checkout]

Este shortcode muestra el checkout o «finalizar compra» de WooCommerce.

Como todos los shortcodes, los podemos poner en cuanquier página o post de nuestra web para mostrar el carrito donde queramos.

Para usarlo, como todos los shortcodes, debemos añadir un bloque de «shortcode» en en editor de bloques de wordpress y añadir el shortcode: [woocommerce_checkout].

En el siguiente ejemplo podemos ver cómo lo hemos añadido en una página entre dos encabezados:

Y a continuación vemos el resultado:

WooCommerce Snippet: Añadir texto o html en la parte superior del Checkout (Finalizar Compra)

Posted on 23 febrero 201618 mayo 2020 by Óscar Abad Folgueira

Como parte de los artículos dedicados a snippets de WordPress, hoy traigo uno muy sencillo que podéis implementar fácilmente, en este caso para WooCommerce.

Lo que hace este snippet o trozo de código es añadir un texto o html en la parte superior de la última pantalla de compra, es decir, en la pantalla de «Finalizar Compra» o «Checkout«.

A continuación tenéis el código:

Ya véis que es muy sencillo.

Lo único que hacemos es invocar a una función que en este caso he llamado «add_checkout_top_text()» en el hook «woocommerce_before_checkout_form» que es justo antes del formulario del checkout o finalizar compra.

Y en la siguiente imagen podemos ver lo que ha hecho este código:

oscarabadfolgueira - woocommerce snippet - anadir texto parte superior finalizar compra

Podeís utilizarlo para incluir el texto que os apetezca como reclaro para vuestros clientes.

Saludos y hasta la próxima.