Seleccionar página

Woocommerce no incluye ninguna opción relacionada con la personalización o modificación de campos de registro o alta de cliente en la tienda.

En este post vamos a ver un plugin freemium (tiene una versión gratuita) que si nos va a permitir eliminar, personalizar, editar y añadir nuevos campos en el formulario de registro de Woocommerce que se muestra en el checkout o proceso de finalización de compra. Te recuerdo que un plugin Freemium, es aquel que tiene una versión gratuita más limitada y una versión de pago con más opciones

 

APÚNTATE A MI PLATAFORMA DE CURSOS. ACCEDE A TODOS LOS CURSOS POR SOLO 10 €/MES


VER CURSOS

 

 

 

 

 

1.- Opciones de personalización de campos que nos permite el plugin Woocommerce Checkout Field Editor

 

El plugin Woocommerce Checkout Field Editor, en su versión gratuita, nos va a permitir:

 

i.- Eliminar o desactivar campos: el plugin nos permite eliminar y desactivar campos existentes en el formulario de registro de Woocommerce, en el proceso de checkout.

ii.- Modificar campos: el plugin en su versión gratuita permite personalizar determinados aspectos de un campo existente en Woocommerce. Como, por ejemplo, hacer que sea o no  sea “requerido” (obligatorio de rellenar)

iii.- Añadir campos: podremos crear nuevos campos en el checkout de Woocommerce. En la versión gratuita podremos utilizar campos de texto y de tipo desplegable.

iv.- Resetear campos formulario: podemos volver al estado inicial o por defecto del formulario de registro de Woocommerce.

v.- Recoger nuevos campos: podremos elegir si queremos que los datos aportados por el cliente en los nuevos campos que hayamos creado se muestren en los datos de pedido e incluso emails.

 

Plugin Woocommerce checkout editor manager

IR AL PLUGIN

Si estás buscando cómo adaptar tu tienda Woocommerce a la RGPD, aquí tienes un post específico sobre el tema: RGPD Woocommerce

 

2.- Pantalla principal del plugin WooCommerce Checkout Field Editor

 

Una vez hayas instalado el plugin, podrás acceder a su pantalla de gestión desde: “WooCommerce > Checkout Form”.

La interface está dividida en 3 pestañas fundamentales:

 

i.- Billing Fields: en esta pestaña podremos personalizar, editar o añadir nuevos campos al formulario de Facturación en el checkout de Woocommerce. Es decir, lo que se conoce como la dirección de facturación del registro de Woocommerce o detalles de Facturación.

ii.- Shipping Fileds: en esta pestaña podremos editar o añadir nuevos campos al formulario de envío en el checkout de Woocommerce.  Es decir, podremos gestionar los campos del formulario de dirección de envío de Woocommerce (Nota: este formulario ya no aparece en el checkout en las últimas versiones de Woocommerce).

iii.- Additional Fields: con esta pestaña podremos personalizar los campos que aparecen en el formulario de registro como “Información Adicional”.

Por defecto, el único campo de información adicional que se incluye en Woocommerce es un área de texto dedicado a dar la posibilidad al cliente de añadir información adicional al pedido.

 

formulario dirección envio y facturación Woocommerce

Pestañas de selección de formulario a editar

 

 

2.1.- Formulario de dirección de facturación y de dirección de envío en Woocommerce

 

En anteriores versiones de Woocommerce era posible mostrar u ocultar el formulario para establecer la dirección de envío. Estas opciones estaban en: “Woocommerce > Ajustes > Envio > Opciones de envio” y luego en el apartado: “Destino de envio”.

  • Si marcábamos la opción: “Por defecto la dirección de envío del cliente”, se mostraban dos formularios en el registro de Woocommerce (Dirección de facturación y de envío).
  • Si marcábamos la opción: “Por defecto la dirección de facturación del cliente”, se mostraba solo el formulario para establecer la dirección de facturación.

 

En las últimas versiones de Woocommerce, ya solo aparece en el registro del checkout el formulario para establecer la dirección de facturación.

Una vez en el área de cliente (mi cuenta), ya si es posible establecer una dirección de envío diferente a la dirección de facturación. Pero los campos que añadamos o personalicemos no se verán aquí ya que el plugin sirve para personalizar los campos de registro del checkout o finalización de compra.

 

 

3.- Elementos de un campo de registro en Woocommerce con Checkout Field Editor

 

Los elementos o atributos de un campo de registro en Woocommerce nos van a dar una idea de las acciones que podremos realizar sobre los mismos:

  • i.- Name: identificador del campo (este texto no aparece en el formulario)
  • ii.- Type: tipo de campo. Campo de texto, área de texto, checkbox, radio button, etc.
  • iii.- Label: Nombre del campo (este nombre SI aparecerá en el formulario).
  • iv.- Placeholder: texto que aparecerá en el campo. Habitualmente es un texto de ejemplo que se pone en algunos campos de texto.
  • v.- Validation rules: regla de validación del campo. Es decir, si en el campo se incluye una regla de validación de email, no se permitirá introducir ningún contenido en el campo que no concuerde con la estructura de un correo electrónico.
  • vi.- Required: si el campo es obligatorio de rellenar para poder validar el formulario de Woocommerce.
  • vii.- Clear row: esta opción obliga a la plantilla que se esté utilizando a mostrar el campo en una sola fila. Es decir, no permite compartir la misma fila con otro campo.
  • viii.- Enlabled: activa o desactiva el campo (Enabled = Activado)
  • ix.- Edit: el botón de editar nos permitirá cambiar o editar algunas de las características o atributos de un campo.
  • x.- Display in Emails: el campo rellenado por el cliente se mostrará en emails.
  • xi.- Display in Order Detail Pages: el campo rellenado por el cliente se mostrará en los detalles del pedido en “Woocommerce > Pedidos”.

 

 

4.- Modificar campos de registro con Woocommerce en el checkout

 

Para editar un campo, tendrásprimero que seleccionar, en la parte superior, la pestaña correspondiente al campo que quieres editar: Billing Fields (dirección facturación), Shipping Fields (dirección envio) y Additional Fields (campos adicionales)

Es interesante que abras otra navegador y pongas la página de registro a través de checkout, para ir viendo los cambios que vayas haciendo.  Cuando hagas un cambio, simplemente haz clic en F5 para actualizar los cambios en el navegador donde estés visualizando los campos del registro en Woocommerce

 

En este post puedes ver como modificar campos de registro con Prestashop

 

A continuación, haz clic en el botón “Edit” correspondiente al campo que quieras editar y te aparecerá una ventana emergente. Realiza la modificación que quieras y haz clic en el botón “Edit Field”.

Si es un campo original de Woocommerce, habrá algunas características que no podrás modificar.

 

Editar campos registro woocommerce

Modificar campos registro Woocommerce

 

Los aspectos más interesantes a modificar de los campos existentes serán:

 

 

4.1.- Eliminar campo registro de Woocommerce en el Checkout

 

Para eliminar un campo, simplemente desmarca el checkbox de nombre “Enabled” y el checkbox: “Required”. A continuación, haz clic en el botón “Edit Field”.

A continuación, haz clic en «Save Changes»

 

 

4.2.- Hacer campo de registro Woocommerce NO obligatorio

 

Para hacer que un campo no sea obligatorio de rellenar para poder formalizar el formulario de registro. Es decir, para que el campo no sea requerido, desmarcaremos el checkbox: “Required” y dejaremos marcado el checkbox: “Enabled”

A continuación, haz clic en el botón “Edit Field” y en «Save Changes».

 

 

4.3.- Cambiar posición de los campos en el registro de Woocommerce

 

Para cambiar la posición de los campos en el formulario de registro de Woocommerce, pon el ratón en sobre el icono de “tres rayas horizontales” (a la izquierda) correspondiente al campo cuya posición quieras cambiar.

A continuación, cuando el cursor del ratón se transforme en una “cruz”, haz clic con el botón izquierdo del ratón y arrastra el campo (sin soltar el botón del ratón) hasta su posición definitiva.

Cuando lo tengas situado, suelta el botón del ratón.

A continuación, haz clic en el botón: “Save Changes” para guardar los cambios

 

cambiar posición campos resgitro checkout woocommerce

Mover campos registro Woocommerce

 

 

5.- Crear un nuevo campo en el registro de Woocommerce

 

Al igual que en el apartado anterior, lo primero que debemos hacer es seleccionar, en la parte superior, la pestaña correspondiente al campo que quieres editar: Billing Fields (dirección facturación), Shipping Fields (dirección envio) y Additional Fields (campos adicionales)

Es interesante que abras otra navegador y pongas la página de registro a través de checkout para ir viendo los cambios que vayas haciendo.  Cuando hagas un cambio, simplemente haz clic en F5 para actualizar los cambios en el navegador donde estés visualizando los campos del registro de tu Woocommerce

 

A continuación, haz clic en el botón azul: “+ Add field” situado bajo las pestañas mencionadas anteriormente. Te aparecerá una ventana emergente con las siguientes opciones:

 

i.- Type: selecciona el tipo de campo que quieres añadir al formulario de registro de Woocommerce. En la versión gratuita del plugin contamos con campos de texto (text) y selector desplegable (Select).

ii.- Name: pon un nombre para identificar el campo (no pongas acentos ni eñes)

iii.- Label: pon el nombre del campo que aparecerá en el formulario

iv.- Placeholder: si es un campo de texto y quieres poner un contenido de ejemplo, lo puedes hacer aquí.

v.- Validation: si no marcas ninguna opción el campo no tendrá ninguna regla de validación. Puedes elegir reglas de validación para email, número de teléfono, Provincia y Código postal.

vi.- Options: esta opción te aparecerá si eliges el tipo de campo selector desplegable. Aquí debes poner las diferentes opciones a elegir en el selector, separadas por el signo |

vii.- Varios: a continuación, te aparecerán una serie de checkbox que podrás marcar o no como son: Required (campo obligatorio de rellenar), Clear row (forzar campo solitario en una línea), Enabled (campo activo), Display in Emails (el campo puede aparecer en emails), Display in order detail pages (campo se mostrará en la ficha de pedido de Woocommerce).

A continuación, haz clic en el botón: “Add New Field”.

IMPORTANTE: y a continuación, no te olvides de hacer clic en: “Save changes”.

 

Añadir un nuevo campo al registro Woocommerce checkout

Crear un nuevo campo registro Woocommerce

 

 

6.- Volver a poner todos los campos por defecto en la finalización de compra de Woocommerce

 

Este plugin incluye una opción para volver a poner todos los campos como estaban por defecto con la instalación de Woocommerce.

Para ello tendrás que hacer clic en el botón: “Reset to default fields”, y a continuación debes hacer clic en el botón: “Aceptar” que te aparecerá en una venta emergente de Aviso.

 

 

7.- Añadir nuevos campos al formulario de Woocommerce de otros tipos

 

Te dejo a continuación alguna opción de plugin de pago económico que te sirva para añadir campos diferentes a los que vienen por defecto en este plugin y más opciones de personalización. Es decir, para poder añadir campos diferentes al campo de texto y selector desplegable.

 

Plugin easy checkout field editor

 

En el momento de creación de este post el plugin que te comento a continuación se continúa actualizando constantemente, tiene un precio económico y permite añadir cualquier tipo de campo al registro de Woocommerce. Se llama: “Woocommerce Easy Checkout Field Editor”

IR AL PLUGIN

 

Este plugin te permite TODAS las opciones que hemos estado viendo con el plugin gratuito, más las siguientes opciones:

i.-Opciones Condicionales: es decir, la posibilidad de mostrar campos o no dependiendo de determinadas condiciones.

ii.- Campos en mi cuenta: este plugin te permite mostrar campos en la página de mi cuenta.

iii.- Añadir cualquier campo: permite añadir cualquier tipo de campo al formulario de finalización de compra o checkout de Woocommerce.

iv.- Previsualización: previsualización desde el panel de administración de los cambios realizados

v.- Campos en factura: mostrar campos en las facturas de Woocommerce (con Woocommerce PDF Invoices & Packing Slips)

vi.- Mostrar campos para determinados productos del carrito: el plugin permite mostrar campos de registro en función de si el carrito contiene determinados productos o productos que pertenezcan a una determinada categoría.

 

Compártelo ya!!

RECIBE GRATIS

CURSO PRESTASHOP

(20 vídeos)

Y WOOCOMMERCE

(14 vídeos) y MÁS

 

1.- CURSO PRESTASHOP 1.7 GRATIS (20 VÍDEOS)
2.- CURSO WOOCOMMERCE GRATIS (14 VÍDEOS)
 

3.- Guía para crear una tienda online de éxito
4.- Guía SEO para Prestashop
5.- Training Woocommerce, plugins imprescindibles y recomendados

QUIERO LOS CURSOS Y DEMÁS GRATIS

Mira en tu buzón de correo, para confirmar la suscripción.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com