Ecommerce

Cómo personalizar campos del checkout de WooCommerce

25/11/2019

WooCommerce trae por defecto una página de checkout con los campos básicos, cabe recordar que uno de los aspectos fundamentales con el fin de conseguir una conversión es que el formulario contenga el mínimo indispensable de campos a rellenar.

En el caso de que se necesite editar o añadir nuevos campos, Woocommerce no incluye ninguna opción relacionada que permita modificar o añadir campos de la página de checkout. Para esto podemos usar el plugin Checkout Field Editor for WooCommerce.

El plugin permite personalizar campos del checkout de WooCommerce de una manera bastante completa y entre las opciones podemos tanto añadir como quitar los campos que no queremos que se muestren. También podemos indicar si el campo ocupa una fila completa o media mediante clases de css.

Instalar el plugin Checkout Field Editor for WooCommerce

Para instalar Checkout Field Editor for WooCommerce nos dirigimos a la sección de Plugins > Añadir nuevo. Buscamos el plugin mediante el buscador, instalamos y lo activamos.

Para personalizar campos del checkout de WooCommerce nos dirigimos a WooCommerce > formularios de pago.

En la pantalla del editor de campos tenemos tres pestañas:

Billing Fields: En esta pestaña se puede editar o añadir campos al formulario de Facturación en el checkout de Woocommerce.

Shipping Fileds: En esta pestaña podremos editar o añadir campos al formulario de envío en el checkout de Woocommerce.

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

Crear campos del formulario en el checkout

Para crear un nuevo campo primero tienes que seleccionar entre las pestañas Billing Fields, Shipping Fields o Additional Fields de la parte superior dónde quieres hacer los cambios.

En el campo que quieras editar haz clic en el botón azul “Añadir un campo” y se abrirá una ventana emergente con las opciones para configurar:

  • Tipo: Desde aquí elegimos el tipo de campo que queremos añadir al formulario. Entre las opciones tenemos: Texto, Contraseña, Correo Electrónico, Teléfono, (Seleccionar) Desplegable, Área de Texto y Radio.
  • Nombre: Para identificar el campo le damos un nombre (sin acentos).
  • Etiqueta: Nombre del campo que aparecerá en el formulario.
  • Marcador de posición: Podemos indicar un texto para que aparezca dentro de un campo de texto por defecto.
  • Default Value: Podemos establecer un estado predeterminado para algunos tipos de campo.
  • Validation: Podemos crear reglas de validación para que los campos email contengan una dirección de correo correcta o que en el campo número de teléfono solo se pueda introducir números y no letras.
  • Class: Podemos darle una clase de css al campo con el fin de hacer que ocupe toda la fila (form-row-wide), la primera mitad de la fila (form-row-first) o la última mitad de la fila (form-row-last)
  • Opciones: Si el tipo de campo es selector desplegable o radio aparecerá esta casilla donde definir las opciones del desplegable.

Después de estos campos aparecen una serie de checkbox para marcar o desmarcar:

  • Obligatorio (campo obligatorio de rellenar)
  • Activado (campo activo para mostrar o desactivado para ocultar)
  • Display in Emails (Si está activado el campo aparecerá en emails)
  • Display in order detail pages (Si está activado el campo se mostrará en la ficha de pedido de Woocommerce)

Haz click en “Save” y a continuación haz clic en “Guardar los cambios” en la pantalla de “Formularios de Pago”.

Modificar campos del formulario en el checkout

Para personalizar campos del checkout de WooCommerce primero tienes que seleccionar entre las pestañas Billing Fields, Shipping Fields o Additional Fields de la parte superior dónde quieres hacer los cambios.

En el campo que quieras editar haz clic en el botón azul “Añadir un campo” y se abrirá una ventana emergente con las opciones para configurar. Si el campo ya venía creado por defecto con WooCommerce hay algunas opciones que no se pueden modificar.

  • Tipo: Desde aquí elegimos el tipo de campo que queremos añadir al formulario. Entre las opciones tenemos: Texto, Contraseña, Correo Electrónico, Teléfono, (Seleccionar) Desplegable, Área de Texto y Radio.
  • Nombre: Para identificar el campo le damos un nombre (sin acentos).
  • Etiqueta: Nombre del campo que aparecerá en el formulario.
  • Marcador de posición: Podemos indicar un texto para que aparezca dentro de un campo de texto por defecto.
  • Default Value: Podemos establecer un estado predeterminado para algunos tipos de campo.
  • Validation: Podemos crear reglas de validación para que los campos email contengan una dirección de correo correcta o que en el campo número de teléfono solo se pueda introducir números y no letras.
  • Class: Podemos darle una clase de css al campo con el fin de hacer que ocupe toda la fila (form-row-wide), la primera mitad de la fila (form-row-first) o la última mitad de la fila (form-row-last)
  • Opciones: Si el tipo de campo es selector desplegable o radio aparecerá esta casilla donde definir las opciones del desplegable.

Después de estos campos aparecen una serie de checkbox para marcar o desmarcar:

  • Obligatorio (campo obligatorio de rellenar)
  • Activado (campo activo para mostrar o desactivado para ocultar)
  • Display in Emails (Si está activado el campo aparecerá en emails)
  • Display in order detail pages (Si está activado el campo se mostrará en la ficha de pedido de Woocommerce)

Haz click en “Save” y a continuación haz clic en “Guardar los cambios” en la pantalla de “Formularios de Pago”.

Eliminar, Mostrar u Ocultar campos del formulario

Primero tienes que seleccionar entre las pestañas Billing Fields, Shipping Fields o Additional Fields de la parte superior dónde quieres hacer los cambios.

Después seleccionamos el campo que queremos editar y clicamos sobre “Desactivar” si lo queremos ocultar o sobre “Activar” si lo queremos volver a mostrar.

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

Para eliminar campos el primer paso vuelve a ser el mismo de seleccionar entre las pestañas Billing Fields, Shipping Fields o Additional Fields de la parte superior dónde quieres hacer los cambios.

Después seleccionamos el campo que queremos eliminar y clicamos sobre “Eliminar”.

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

Cambiar posición de los campos en el registro de Woocommerce

Podemos jugar con la posición de los campos del formulario, para ello ponemos el cursor sobre el icono de la izquierda de tres rayas del campo que queremos cambiar de orden. El cursor cambiará a una forma de “cruz” y haciendo clic en el botón izquierdo y sin soltar, podremos arrastrar toda la fila y ponerla en el orden que queramos.

Suelta el botón del ratón para colocarlo en su nueva posición.

Recuerda hacer clic en el botón: “Save Changes” para guardar los cambios.

Conclusión

Son varias las razones por las que modificar y quitar campos de la página de checkout de WooCommerce. Puede ser que vendas productos digitales por lo que campos como la dirección de envío son irrelevantes para lo que vendes o puede que ocurra el caso contrario y necesites tener campos específicos que no se contemplan en una instalación básica de WooCommerce.

Espero que te haya resultado útil. Puede dejarnos un comentario con tus dudas o comentando tu experiencia con este u otro plugin similar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


* Campo obligatorio.

Suscríbete y recibe nuestra newsletter GRATUITA con novedades en nuestro Hosting y consejos de WordPress para hacer tu negocio más rápido, más fuerte y más seguro