Cómo personalizar la página del carrito de WooCommerce en un sitio de WordPress

Un sitio de comercio electrónico estándar tiene algunas páginas comunes. Hay páginas de productos, páginas de tiendas que enumeran productos y no olvidemos páginas para la cuenta de usuario, el flujo de pago y el carrito.

WooCommerce hace que sea una tarea trivial configurarlos en un sitio de WordPress porque les proporciona plantillas y crea las páginas directamente desde el primer momento. Esto es lo que hace que sea fácil poner en funcionamiento su tienda en unos minutos simplemente configurando algunos productos y sus detalles de procesamiento de pagos. WooCommerce es muy útil en ese sentido.

Pero esta no es una publicación que exalta las virtudes de WooCommerce. En lugar de eso, veamos cómo podemos personalizar partes del mismo. Específicamente, quiero mirar el carrito. WooCommerce es súper extensible en el sentido de que proporciona un montón de filtros y acciones a las que se pueden conectar, además de una forma de anular las plantillas en un tema de WordPress. El problema es que requiere al menos algunas habilidades de desarrollo de nivel intermedio, lo que puede no ser factible para algunas personas. Y, al menos en mi experiencia, la página del carrito tiende a ser la más difícil de similar y personalizar.

Veamos cómo cambiar la página del carrito de WooCommerce implementando un diseño diferente. Así es como se ve una página de carrito predeterminado estándar:

En su lugar, optaremos por algo como esto:

Esto es lo que es diferente:

• Estamos adoptando un diseño de dos columnas en lugar del diseño único de ancho completo de la plantilla predeterminada. Esto nos permite colocar el elemento “Totales del carrito” en la parte superior para que sea más visible en pantallas más grandes.
• Agregamos cierta tranquilidad a los clientes al incluir beneficios debajo de la lista de productos en el carrito. Esto le recuerda al cliente el valor que obtiene con su compra, como envío gratuito, cambios sencillos, atención al cliente y seguridad.
• Incluimos una lista de preguntas frecuentes debajo de la lista de productos en formato acordeón. Esto ayuda al cliente a obtener respuestas a preguntas sobre su compra sin tener que salir y ponerse en contacto con el soporte.

Este tutorial asume que tiene acceso a los archivos de su tema. Si no se siente cómodo iniciando sesión en su servidor de alojamiento y accediendo al administrador de archivos, le sugerimos que instale el complemento WP File Manager. Con sólo la versión gratuita, podrás lograr todo lo que aquí se explica.

Primero, hagamos nuestra propia plantilla.

Uno de los muchos beneficios de WooCommerce es que nos brinda plantillas prediseñadas y codificadas para trabajar. El problema es que esos archivos de plantilla se encuentran en la carpeta del complemento. Y si el complemento se actualiza en el futuro (lo que seguramente sucederá), cualquier cambio que realicemos en la plantilla se perderá. Dado que editar directamente archivos de complementos es un gran no-no en WordPress, WooCommerce nos permite modificar los archivos haciendo copias de ellos que van a la carpeta del tema. Eso funcionará siempre que hagamos esto en nuestro functions.phpcomplemento de funcionalidad en algún lugar:

add_theme_support('woocommerce');

Es una buena idea utilizar un tema secundario al realizar este tipo de cambios, especialmente si utiliza un tema de terceros. De esa manera, los cambios realizados en la carpeta del tema no se perderán cuando se publiquen las actualizaciones del tema.

Para ello, primero tenemos que localizar la plantilla que queremos personalizar. Eso significa ir al directorio raíz del sitio (o dondequiera que guarde los archivos de su sitio si trabaja localmente, lo cual es una gran idea) y abrir el /wp-contentlugar donde está instalado WordPress. Hay varias carpetas allí, una de las cuales es /plugins. Ábrelo y luego salta a la /woocommercecarpeta. Ese es el directorio principal para todo lo relacionado con WooCommerce. Queremos el cart.phparchivo, que se encuentra en:

/wp-content/plugins/woocommerce/templates/cart/cart.php

Abramos ese archivo en un editor de código. Una de las primeras cosas que notará es una serie de comentarios encima del archivo:

/** * Cart Page * * This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php. // highlight * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see     https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce/Templates * @version 3.8.0 */ 

La línea resaltada es exactamente lo que estamos buscando: ¡instrucciones sobre cómo anular el archivo! Qué amable el equipo de WooCommerce al notarlo desde el principio.

Hagamos una copia de ese archivo y creemos la ruta del archivo que sugieren en el tema:

/wp-content/themes/[your-theme]/woocommerce/cart/cart.php

Suelte el archivo copiado allí y estaremos listos para comenzar a trabajar en él.

A continuación, agreguemos nuestro propio marcado.

Las dos primeras cosas que podemos abordar son los beneficios y las preguntas frecuentes que identificamos anteriormente. Queremos agregarlos a la plantilla.

¿A dónde va nuestro marcado? Bueno, para que el diseño se vea como lo presentamos al principio de esta publicación, podemos comenzar debajo de la tabla de cierre del carrito /table, así:

/table!-- Custom code here --?php do_action( 'woocommerce_after_cart_table' ); ?

No cubriremos el HTML específico que crea estos elementos. Lo importante es saber a dónde va ese marcado.

Una vez que hayamos hecho eso, deberíamos terminar con algo como esto:

Ahora tenemos todos los elementos que queremos en la página. Todo lo que queda es darle estilo a las cosas para que tengamos el diseño de dos columnas.

Muy bien, ahora podemos anular el CSS.

Podríamos haber agregado más marcas a la plantilla para crear dos columnas separadas. Pero el marcado existente ya está bien organizado de manera que podemos lograr lo que queremos con CSS... ¡gracias a flexbox!

El primer paso consiste en convertir el .woocommerceelemento en un contenedor flexible. Es el elemento que contiene todos los demás elementos, por lo que es un buen padre. Para asegurarnos de que solo lo estamos modificando en el carrito y no en otras páginas (porque otras plantillas sí usan esta clase), debemos limitar los estilos a la clase de página del carrito, que WooCommerce también pone a disposición.

.woocommerce-cart .woocommerce {  display: flex;}

Estos estilos pueden ir directamente al archivo style.css de su tema. Eso es lo que sugiere WooCommerce. Sin embargo, recuerde que hay muchas formas de personalizar estilos en WordPress, algunas más seguras y fáciles de mantener que otras.

Tenemos dos elementos secundarios en el .woocommerceelemento, perfectos para nuestro diseño de dos columnas: .woocommerce-cart-formy .cart-collaterals. Este es el CSS que necesitamos para dividir las cosas y termina luciendo así:

/* The table containing the list of products and our custom elements */.woocommerce-cart .woocommerce-cart-form {  flex: 1 0 70%; /* 100% at small screens; 70% on larger screens */  margin-right: 30px;}/* The element that contains the cart totals */.woocommerce-cart .cart-collaterals {  flex: 1 0 30%; /* 100% at small screens; 30% on larger screens */  margin-left: 30px;}/* Some minor tweak to make sure the cart totals fill the space */.woocommerce-cart .cart-collaterals .cart_totals {  width: 100%;  padding: 0 20px 70px;}

Eso nos da un diseño bastante limpio:

Se parece más a la página de carrito de Amazon y a otras tiendas de comercio electrónico populares, lo cual no es nada malo.

Mejores prácticas: resaltar los elementos más importantes

Uno de los problemas que tengo con los diseños predeterminados de WooCommerce es que todos los botones están diseñados de la misma manera. Todos son del mismo tamaño y el mismo color de fondo.

No existe una jerarquía visual sobre las acciones que los usuarios deben realizar y, como tal, es difícil distinguir, por ejemplo, cómo actualizar el carrito y cómo proceder al pago. Lo siguiente que debemos hacer es aclarar esa distinción cambiando los colores de fondo de los botones. Para eso, escribimos el siguiente CSS:

/* The "Apply Coupon" button */.button[name="apply_coupon"] {  background-color: transparent;  color: #13aff0;}/* Fill the "Apply Coupon" button background color and underline it on hover */.button[name="apply_coupon"]:hover {  background-color: transparent;  text-decoration: underline;}
/* The "Update Cart" button */.button[name="update_cart"] {  background-color: #e2e2e2;  color: #13aff0;}/* Brighten up the button on hover */.button[name="update_cart"]:hover {  filter: brightness(115%);}

De esta manera creamos la siguiente jerarquía:

1. La opción "Continuar con el pago" se deja prácticamente como está, con el color de fondo azul predeterminado para que se destaque, ya que es la acción más importante del carrito.
2. El botón "Actualizar carrito" tiene un fondo gris que se mezcla con el fondo blanco de la página. Esto le quita prioridad.
3. "Aplicar cupón" es menos un botón y más un enlace de texto, lo que la convierte en la acción menos importante del grupo.

El CSS completo que debes agregar para realizar este diseño está aquí:

@media(min-width: 1100px) {  .woocommerce-cart .woocommerce {    display: flex;  }  .woocommerce-cart .woocommerce-cart-form {    flex: 1 0 70%;    margin-right: 30px;  }      .woocommerce-cart .cart-collaterals {    flex: 1 0 30%;    margin-left: 30px;  }}
.button[name="apply_coupon"] {  background-color: transparent;  color: #13aff0;}
.button[name="apply_coupon"]:hover {  text-decoration: underline;  background-color: transparent;  color: #13aff0;}
.button[name="update_cart"] {  background-color: #e2e2e2;  color: #13aff0;}
.button[name="update_cart"]:hover {  background-color: #e2e2e2;  color: #13aff0;  filter: brightness(115%);}

¡Eso es un envoltorio!

No está tan mal, ¿verdad? Es bueno que WooCommerce sea tan extensible, pero sin una guía general, puede ser difícil saber cuánto margen de maniobra tienes para personalizar las cosas. En este caso, vimos cómo podemos anular la plantilla de carrito del complemento en un directorio de temas para protegerlo de futuras actualizaciones, y cómo podemos anular estilos en nuestra propia hoja de estilos. También podríamos haber considerado el uso de ganchos de WooCommerce, la API de WooCommerce o incluso usar las condiciones de WooCommerce para agilizar las personalizaciones, pero tal vez sean buenas para otra publicación en otro momento.

Mientras tanto, diviértase personalizando la experiencia de comercio electrónico en su sitio de WordPress y siéntase libre de dedicar un poco de tiempo a los documentos de WooCommerce; hay muchas ventajas allí, incluidos fragmentos prediseñados para todo tipo de cosas.