Como seguramente ya sepas, WooCommerce es una de las principales plataformas de ecommerce en Internet. Teniendo en cuenta que más del 25% de todas las páginas web están desarrolladas con WordPress, se entiende la popularidad que WooCommerce, un plugin para este CMS, ha alcanzado en los últimos años. Dentro del proceso de compra en una tienda con WooCommerce encontramos distintos pasos: entrar a la ficha del producto, añadir al carrito y proceder al pago o checkout. Es precisamente en este paso del checkout donde, por defecto, WooCommerce nos solicita que rellenemos campos como el nombre y apellidos, dirección, país, código postal, teléfono… Pero ¿y si no queremos que pida tantos datos? A continuación te explico cómo puedes modificar los campos del checkout en WooCommerce.

Web Hosting

Razones para quitar los campos del checkout

Son muchas las razones por las que podemos querer modificar y quitar los campos que aparecen en el checkout o proceso de finalizar compra de WooCommerce, pero existen dos principales, entre las que seguramente te encuentras:

  1. No necesitas algunos campos porque vender productos o servicios digitales

    Esto suele ocurrir cuando vendes productos o servicios digitales (p. ej. un ebook, una imagen o una hora de consultoría), y algunos campos como la dirección de envío, el país o el nombre de la empresa son totalmente irrelevantes para lo que vendes. Pedirle a tu cliente que complete toda esa ristra de campos irrelevantes para lo que vender puede terminar en una de las situaciones más temidas para cualquiera con una tienda online: el abandono del carrito. Precisamente por esta razón, para evitar que el cliente abandone su compra dejándola a medias porque le pedimos demasiados datos, puede ser muy conveniente reducir los datos que le solicitamos al mínimo imprescindible, y aquí vamos a la siguiente posible razón.

  2. Queremos reducir el porcentaje de abandono del carrito

    Cuando detectamos que un alto porcentaje de nuestros clientes visitan la tienda online, añaden productos a su carrito y durante el proceso de pago deciden cerrar la ventana y cancelar su compra, significa que algo no le está encajando. Esto nos lleva al punto clave de que debemos ser nosotros quienes busquemos y determinemos por qué el cliente ha abandonado ese carrito, y para ello podemos utilizar herramientas que nos ayuden a descubrirlo, tal y como puedes encontrar en otros post de este blog. Al margen de otras razones importantes como la sensación de inseguridad o falta de confianza o la imagen poco profesional, una de las principales razones por la que los clientes abandonan un carrito es porque se les solicita demasiada información. Partamos de un par de premisas: todos somos vagos y a nadie nos gusta contarle cosas que no vienen a cuento a un desconocido. ¿Todos somos vagos? En lo sustancial sí, ¡pero no lo entendamos como algo negativo! Las personas tendemos a optimizar casi todo lo que hacemos, sobre todo en lo que a esfuerzo por nuestra parte se refiere, por lo que si podemos hacer algo en 2 pasos en lugar de en 3, bienvenido sea. Esto, aplicado a un carrito de una tienda online, significa que si podemos hacer que nuestro cliente compre el producto o servicio en 2 pasos en lugar de en 3, la probabilidad de que lo haga aumentará. Por otra parte, que a la mayoría no nos gusta contarles cosas que no vienen a cuento a desconocidos parece bastante asumible. En este caso, debemos aplicarlo y ser conscientes de que si estamos pidiéndole a un potencial cliente que ponga su código postal, dirección, piso, puerta y talla de zapato para comprar un ebook que se va a poder descargar 15 segundos después, es bastante probable que el cliente desconfíe del motivo por el que le solicitamos tantos datos personales. Puede que no tengamos ninguna intención maligna en ese proceso, pero lo más probable es que el cliente piense que algo no cuadra. Y ya se sabe, si algo no cuadra en Internet, mejor no fiarse, a ver si voy a poner el número de la tarjeta de crédito en un sitio raro y después tengo problemas (lo cual supone mucho esfuerzo posterior para solucionarlo, ¡así que optimicemos! 😀 ).

Una vez visto que hay razones poderosas para quitar algunos campos que vienen por defecto en el checkout de WooCommerce, pongámonos manos a la obra para ver cómo hacerlo.

Cómo quitar campos del checkout

Para empezar, quiero que sepas que vamos a tocar algo de código para quitar los campos. No te preocupes, no hace falta ser desarrollador para la operación que vamos a realizar, porque vas a ver paso a paso cómo hacerlo. Antes de nada, vas a necesitar utilizar algún editor de código. Podrías utilizar algo tan simple como el bloc de notas de Windows, pero quiero recomendarte un editor gratuito que hace todo más fácil. Se llama Sublime Text y puedes descargarlo aquí. Una vez descargado, instálalo y ábrelo.

El siguiente paso es descargar el archivo .php de WordPress que tenemos que modificar. Para poder hacerlo, necesitamos conectarnos a nuestro servidor o hosting (alojamiento), y para poder conectarnos vamos a usar un cliente FTP llamado FileZilla. Es gratuito y de código abierto. Descárgalo, instálalo y ábrelo. Si nunca has usado FileZilla, no tienes ni idea de lo que es un cliente FTP y quieres aprender a manejarlo, échale un vistazo antes a esta entrada del tutorial básico sobre cómo instalar y usar FileZilla (pronto disponible).

Una vez conectados a nuestro servidor FTP, debemos ir al directorio en el que tenemos instalado WordPress. Tomando ese directorio como base, accedemos a la siguiente ruta:

/wp-content/themes/NombreDeTuTema/includes/function.php

Debes sustituir ‘NombreDeTuTema’ por el nombre del tema para WordPress que estés usando. Por ejemplo, si estás usando el tema Avada, debes sustituirlo por ‘Avada’.

En esa ruta buscaremos el archivo function.php. Lo arrastramos hasta nuestro ordenador (recomiendo ponerlo en el escritorio, para encontrarlo rápidamente) y lo abrimos con Sublime Text, que previamente hemos instalado. Nos aparecerá una imagen parecida a la de abajo (el contenido depende del tema que estés editando).

Personalizar WooCommerce con Sublime Text

Ahora vamos a la última línea del archivo, en la que debe aparecer el símbolo:

?>

La etiqueta ?> es la etiqueta de cierre del código en lenguaje PHP. Vamos a escribir justo antes de ese cierre, añadiendo un bloque de código que modificará los campos que aparecen en nuestra página de checkout en WooCommerce. Copia y pega el siguiente bloque de código en ese lugar:

/* ELIMINACION DE CAMPOS DEL CHECKOUT WOOCOMMERCE */

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
 
function custom_override_checkout_fields( $fields ) {
 
 unset($fields['billing']['billing_company']);
 unset($fields['billing']['billing_address_1']);
 unset($fields['billing']['billing_address_2']);
 unset($fields['billing']['billing_city']);
 unset($fields['billing']['billing_postcode']);
 unset($fields['billing']['billing_state']);
 unset($fields['order']['order_comments']);
 
 return $fields;
}

En la primera línea puedes ver un texto que va entre los símbolos /* y */. Esto es un comentario, y lo ponemos simplemente para saber que en esa parte del código hemos hecho una modificación. Es importante, porque si en un futuro volvemos a modificar el archivo es bueno saber dónde hemos hecho los cambios y qué hace ese trozo de código que hemos puesto.

En la parte central del bloque de código hay una lista de elementos que empiezan por unset. Esta es la lista de campos del formulario que estamos eliminando con el código, y lo único que debemos hacer ahora es dejar sólo las líneas de aquellos elementos que queremos eliminar. Es decir, si ponemos el unset quiere decir que ese elemento NO aparecerá en nuestro checkout. A continuación puedes ver una lista con el campo que elimina cada elemento:

  • unset($fields[‘billing’][‘billing_first_name’]); | Elimina el campo ‘Nombre’, donde el comprador escribe su nombre.
  • unset($fields[‘billing’][‘billing_last_name’]); | Elimina el campo ‘Apellidos’, donde el comprador escribe sus apellidos.
  • unset($fields[‘billing’][‘billing_company’]); | Elimina el campo ‘Empresa’, donde el comprador escribe el nombre de la empresa al que quiere que vaya la factura.
  • unset($fields[‘billing’][‘billing_address_1’]); | Elimina el campo ‘Dirección’, donde el comprador escribe la dirección de facturación.
  • unset($fields[‘billing’][‘billing_address_2’]); | Elimina el campo adicional de dirección.
  • unset($fields[‘billing’][‘billing_city’]); | Elimina el campo de ‘Ciudad’.
  • unset($fields[‘billing’][‘billing_postcode’]); | Elimina el campo de ‘Código Postal’.
  • unset($fields[‘billing’][‘billing_country’]); | Elimina el campo ‘País’.
  • unset($fields[‘billing’][‘billing_state’]); | Elimina el campo ‘Provincia’.
  • unset($fields[‘billing’][‘billing_email’]); | Elimina el campo ‘Email’.
  • unset($fields[‘billing’][‘billing_phone’]); | Elimina el campo ‘Teléfono’.
  • unset($fields[‘shipping’][‘shipping_first_name’]); | Elimina el campo ‘Nombre’ para el envío.
  • unset($fields[‘shipping’][‘shipping_last_name’]); | Elimina el campo ‘Apellidos’ para el envío.
  • unset($fields[‘shipping’][‘shipping_company’]); | Elimina el campo ‘Empresa’ para el envío.
  • unset($fields[‘shipping’][‘shipping_address_1’]); | Elimina el campo ‘Dirección’ en la dirección de envío.
  • unset($fields[‘shipping’][‘shipping_address_2’]); | Elimina el campo adicional de dirección en la dirección de envío.
  • unset($fields[‘shipping’][‘shipping_city’]); | Elimina el campo ‘Ciudad’ en la dirección de envío.
  • unset($fields[‘shipping’][‘shipping_postcode’]); | Elimina el campo ‘Código Postal’ en la dirección de envío.
  • unset($fields[‘shipping’][‘shipping_country’]); | Elimina el campo ‘País’ en la dirección de envío.
  • unset($fields[‘shipping’][‘shipping_state’]); | Elimina el campo ‘Provincia’ en la dirección de envío.
  • unset($fields[‘account’][‘account_username]); | Elimina el campo ‘Usuario’.
  • unset($fields[‘account’][‘account_password’]); | Elimina el campo ‘Contraseña’.
  • unset($fields[‘account’][‘account_password-2’]); | Elimina el campo ‘Re-escribir contraseña’.
  • unset($fields[‘order’][‘order_comments’]); | Elimina el campo ‘Comentarios del pedido’.

En el ejemplo de código que has copiado, se han eliminado todos los campos innecesarios para la venta de productos/servicios virtuales a particulares, dado que en este caso los datos de facturación no son tan relevantes. Así pues, sólo tienes que añadir o quitar del listado de unset aquellos elementos que quieras quitar o poner en tu formulario de checkout. ¡Así de simple! A continuación tienes la imagen del código que, en mi caso, he añadido al archivo en Sublime Text.

Código para modificar checkout WooCommerce

Una vez añadida la lista, ya estamos listos. Guarda el documento con Sublime Text, vuelve a FileZilla y copia el documento desde tu ordenador hasta la carpeta de tu alojamiento (recuerda, debes copiarlo a la misma ruta desde la que lo habías descargado, la que se indica arriba). Te aparecerá un mensaje preguntando si deseas sobreescribir el archivo. Indícale que sí y ya se habrá completado. Ahora sólo tienes que recargar tu página de checkout en WooCommerce y verás como han desaparecido todos los campos que habías incluido en la lista de unset.

Personalizar checkout de WooCommerce

Como puedes ver en el ejemplo de la imagen superior. En esta página de checkout que he modificado ya no aparecen los campos incluidos en el bloque de código indicado. De esta forma, estamos facilitando que nuestro cliente termine comprando los productos, dado que evitamos tener que completar tantos datos.

Por último, debes tener en cuenta que esta modificación permanecerá funcionando siempre que no modifiques el archivo function.php. Es posible que este archivo se modifique si actualizas el tema que estás usando, en cuyo caso tendrías que volver a copiar el bloque de código en el archivo para hacer la modificación. Otra opción un poco más avanzada, pero sin duda mejor, es crear un tema hijo de tu tema principal, y hacer los cambios sobre es tema hijo. De esta forma, aunque actualices el tema a la última versión, no perderás los cambios realizados.

¡Espero que te haya resultado útil! Recuerda que tienes a tu disposición los comentarios para cualquier duda que te pueda surgir 🙂

Esta entrada pertenece a la serie de publicaciones que realizo sobre WooCommerce, WordPress y programación en general.

¡Compártelo!
Categorías: Programación

Uso de cookies

Me obligan a informarte de que uso cookies para ayudarte a mejorar la experiencia en esta web. Es algo obvio, pero si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies y política de protección de datos.

ACEPTAR
Aviso de cookies