¿Me ayudas a llegar a más gente?

Una de las cosas que más se echan de menos en la instalación básica de WooCommerce es la posibilidad de personalizar el formulario de la página de pago de nuestra tienda online. El formulario que trae WooCommerce por defecto incluye campos con la información mínima necesaria para poder enviar correctamente el pedido al cliente. Sin embargo, si quieres información extra del cliente, como por ejemplo, el número NIF (necesario en España para generar facturas), no te queda más remedio que añadir un nuevo campo al formulario. En esta entrada voy a explicarte 2 métodos diferentes con los que insertar un campo en la página de pago de WooCommerce.

Ambas opciones voy a explicarlas usando un ejemplo en el que voy a añadir el campo NIF al formulario. Ni que decir tiene que lo que te voy a explicar se puede aplicar a cualquier tipo de campo que desees añadir y que te ayude a recabar información extra del cliente, como por ejemplo, su fecha de cumpleaños.

Opción 1. Añadir campos personalizados en WooCommerce con un plugin.

Una forma muy sencilla de agregar tus propios campos personalizados a la página de pago de WooCommerce es usando el plugin gratuito “WooCommerce Checkout Manager“. Si no has trabajado antes con los códigos snippet de WooCommerce, entonces este método es el más indicado para ti. No necesitas tener ningún tipo de conocimiento técnico de WooCommerce, basta con que sepas instalar plugins de WordPress. A continuación te explico paso a paso cómo usar este sencillo plugin para añadir el campo NIF a tu formulario de pago.

  1. Instala y activa el plugin. Para ello entra “Plugins > Añadir nuevo“, escribe en el buscador “woocommerce checkout manager” y haz clic en “Instalar ahora” en el primer resultado de la búsqueda. Cuando haya finalizado la instalación, haz clic en “Activar plugin“.
  2. Para acceder al panel de administración del plugin entra en “Ajustes > WooCommerce Pedido Director“. Si, lo sé, la traducción del nombre deja mucho que desear jeje.
  3. Una vez dentro del panel de administración, abajo en el apartado “Añadir Nueva Sección Campo” haz clic en “Agregar nuevo campo” y completa los huecos con la información necesaria. En este caso voy a mostrar un ejemplo de cómo añadir el campo NIF a nuestro página de pago.
    • Etiqueta: NIF
    • Marcador de posición: Ej: 99999999D
    • Elija tipo de: Text input
    • Abreviatura: nif
    • Atributo obligatorio: sin marcar (el NIF sólo es necesario para los clientes que deseen factura, así que no tiene sentido ponerlo como obligatorio)

    Los campos “Opción A” y “Opción B” puedes dejarlos por defecto, ya que sólo se muestran si usamos una lista de opciones. Para el caso del NIF usamos un campo de tipo texto

  4. Por último, haz clic en “Guardar cambios” y vuelve a cargar la página de pago para ver si se ha añadido el nuevo campo correctamente. Debería aparecer algo así: Nuevo campo NIF página pago WooCommerce

El plugin te permite también añadir campos de tipo checkbox, lista de opciones o incluso un calendario para seleccionar fechas. Además puedes editar las etiquetas de los campos por defecto que trae el formulario de WooCommerce o eliminarlos si no necesitas tantos datos del cliente.

Como desventaja, creo que está un poco limitado en cuanto a personalización de los campos, por ejemplo, no puedes elegir el lugar donde insertarlos en el formulario, siempre se insertan al final. Tampoco puedes añadirles etiquetas HTML, ni insertar campos de tipo área de texto o de contraseña. Otra cosa que no me convence es que antes de los campos personalizados te añade un título con el texto “información adicional” (ni siquiera muestra la primera letra en mayúscula) seguido de una línea horizontal, y esto no se puede eliminar. Para poder eliminarlo y tener acceso a más opciones, necesitas comprar la versión premium del plugin.

Opción 2. Añadir campos personalizados en WooCommerce usando funciones hook.

Esta opción es algo más complicada que la anterior, ya que por lo menos deberías tener alguna experiencia previa usando funciones hook. No te asustes, eso no quiere decir que tengas que saber programar ni nada por el estilo, simplemente necesitas saber donde insertar los códigos snippets y cómo editar algunas líneas en función del tipo de campo que vayas a añadir.

Todos los códigos que te voy a mostrar a partir de ahora debes de copiarlos y pegarlos al final del archivo “function.php” de la plantilla que estés usando en tu tienda online. Puedes encontrar este archivo en “Apariencia > Editor > Funciones del tema“. Cuando hayas pegado los códigos no olvides hacer clic en “Actualizar archivo“.

Al igual que en el ejemplo anterior, voy a mostrar el código necesario para añadir el campo NIF al formulario, pero puedes usarlo para añadir cualquier tipo de campo simplemente editando las líneas que te explicaré más abajo.

Con este código añades un campo de tipo texto para el NIF después del apartado “Notas del pedido” que se encuentra al final del formulario. Insertar campo personalizado en WooCommerce Si quieres cambiar el tipo de campo, puedes hacerlo cambiando el valor de la propiedad “type“. Estos son los posibles valores que puede tener:

  • text‘. Campo de tipo texto
  • text-area‘. Área de texto
  • password‘. Campo para contraseñas. Se muestra un asterisco por cada carácter que se introduce.
  • select‘. Lista de opciones.

Con el atributo “label” defines el nombre que quieres mostrar en el campo.

Guardar los datos del campo personalizado en WooCommerce.

El código anterior sólo muestra el campo NIF en el formulario para que el cliente pueda introducir sus datos, pero no almacena el número NIF en ningún lado. El siguiente código almacena el número NIF introducido por el clientes junto con los demás datos del formulario.

Mostrar el valor del nuevo campo en la página de edición del pedido de WooCommerce.

Una vez hemos almacenado los datos del cliente incluido el nuevo campo NIF, ya podríamos dar el trabajo por finalizado. Sin embargo, aunque el dato introducido en el nuevo campo está guardado en la base de datos de WooCommerce, no podemos visualizarlo desde la página de edición del pedido. Para que WooCommerce muestre en la página de edición del pedido el nuevo campo que hemos creado, necesitamos añadir este código.

El resultado sería algo así: Mostrar campo NIF en la página de edición del pedido en WooCommerce

Incluir el nuevo campo personalizado de WooCommerce en el email de notificación.

Como bien sabrás, cuando un cliente realiza un pedido, se le envía de forma automática un email con todos sus datos y el resumen del pedido. Pues bien, para que ese email también incluya el dato del nuevo campo NIF, debemos de usar el siguiente código.

Como ves, esta segunda opción requiere algo más de soltura técnica con WooCommerce y WordPress, pero una vez tienes claro donde insertar los códigos, el proceso es rápido.

Con este método tienes la ventaja de que el campo o los campos que insertes son totalmente personalizables. Además evitas tener que añadir un plugin más a tu web con el ahorro en rendimiento que eso supone, más aún si lo vas a instalar para añadir un sólo campo al formulario. En mi opinión, siempre que puedas ahorrarte instalar un plugin, mucho mejor. Esto mejorará los tiempos de carga de tu web y tus clientes te lo agradecerán, créeme.

Con este artículo espero haberte aclarado las diferentes opciones que tienes a la hora de insertar un campo en la página de pago de WooCommerce. Ambas son igual de útiles, de ti depende decantarte por una u otra.

Si te ha gustado, por favor ayúdame a difundirlo. ¡Gracias!

Uso de cookies

Este sitio web utiliza cookies para que disfrutes de una mejor experiencia de usuario. Si continúas navegando estarás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, clica en el enlace para mayor información.

ACEPTAR