Cómo editar la página del carrito de WooCommerce

¿Quieres aprender a editar la página del carrito de WooCommerce?

WooCommerce es una excelente herramienta para crear sitios web de comercio electrónico. Es fácil de configurar, súper extensible y altamente escalable. Tan pronto como lo instales en tu sitio web de WordPress, te guiará a través del proceso de configuración e incluso generará las páginas de comercio electrónico esenciales sin que tengas que crearlas desde cero.

A pesar de sus muchos aspectos positivos, hay mucho margen de mejora. Por ejemplo, el abandono del carrito es un problema común que enfrentan la mayoría de las empresas de comercio electrónico porque el diseño de la página del carrito no se centra en las conversiones.

Afortunadamente, existen varias formas de aumentar la tasa de conversión y reducir el abandono del carrito en una tienda WooCommerce.

En este artículo, le mostraré los pasos exactos que debe seguir para mejorar el diseño y la funcionalidad de su página de carrito WooCommerce.

Profundicemos en el tutorial.

Cómo editar la página del carrito de WooCommerce

Hay un par de formas de editar y personalizar la página del carrito de WooCommerce.

Puede utilizar los bloques predeterminados de WooCommerce, los creadores de páginas de WordPress o los complementos de WooCommerce de terceros, o puede agregar código CSS manualmente para personalizar la página.

Desafortunadamente, estos métodos no siempre son eficientes y pueden terminar causando más problemas de los que resuelven.

Por ejemplo, los códigos CSS personalizados pueden dañar su sitio, los creadores de páginas y otros complementos pueden ralentizar su sitio, y solo puede hacer mucho con los bloques predeterminados de WooCommerce.

Sin embargo, se ha creado un complemento de comercio electrónico bien diseñado, como Botiga Pro, para agregar funciones potentes a las tiendas WooCommerce y al mismo tiempo garantizar una velocidad de carga rápida.

En este tutorial, le mostraré cómo usar Botiga Pro para realizar personalizaciones que han demostrado reducir el abandono del carrito y aumentar las ventas. Estaremos realizando los siguientes pasos:

• Mejora del diseño de la página del carrito
• Exhibición de un minicarro lateral fuera del lienzo
• Permitir a los clientes aumentar la cantidad de producto en el mini carrito.
• Mostrando un ícono de mini carrito flotante
• Mostrar el botón "Continuar comprando" en la página del carrito

Comencemos instalando Botiga para su sitio de WordPress.

1. Instale el tema Botiga

Botiga es un tema gratuito de WooCommerce, mientras que Botiga Pro es un complemento premium. Para poder utilizar el complemento, debe instalar el tema gratuito en su sitio web.

En esta sección, cubriré cómo instalar el tema gratuito y, en la siguiente, te mostraré cómo instalar y activar el complemento premium.

Primero, descargue el tema Botiga gratuito desde el repositorio de temas de WordPress o desde nuestro sitio web.

Luego, vaya a su panel de WordPress, navegue hasta Apariencia → Temas → Agregar temas , y cargue y active el tema:

Alternativamente, puedes ir a Apariencia → Temas → Agregar temas , escribir Botiga en la barra de búsqueda e instalar y activar el tema:

2. Instale el complemento Botiga Pro

Botiga Pro es un potente complemento de comercio electrónico cargado con funciones que mejorarán su tienda WooCommerce.

Después de comprar el complemento, descárguelo en su computadora local, vaya a Complementos → Agregar nuevo y cargue e instale el complemento:

A continuación, debe activar la clave de licencia que se puede encontrar en su cuenta de aThemes.

Vaya a su cuenta de aThemes y copie la clave de licencia.

Luego, abra su panel de WordPress y navegue hasta Botiga → Configuración → General → Licencia Botiga Pro .

Inserte la clave de licencia y haga clic en el botón Activar :

Eso es todo. A estas alturas, tanto el tema como el complemento están activados en su sitio de WordPress.

Sin embargo, antes de mostrarle cómo editar la página del carrito de WooCommerce, echemos un vistazo rápido a los sitios de inicio que ofrecen Botiga y Botiga Pro y por qué es posible que desee importar uno a su tienda WooCommerce.

3. Importar un sitio inicial (opcional)

Los sitios de inicio son diseños de sitios web prediseñados que se pueden importar a un sitio de WordPress existente.

Vale la pena señalar que instalar un sitio inicial no es un requisito previo de Botiga (también puedes crear un diseño de sitio web desde cero, usando las opciones de tema integradas), pero te recomiendo que importes uno, ya que mejorará tu tienda WooCommerce. significativamente.

Los sitios de inicio de Botiga vienen equipados con diseños limpios y profesionales y páginas prediseñadas que son esenciales para su negocio. Con Botiga Pro, obtiene acceso a múltiples sitios de inicio dirigidos a varios nichos de comercio electrónico, incluidos belleza, indumentaria, muebles, joyería y otros.

Puede obtener una vista previa de los diseños yendo a Botiga → Sitios de inicio y haciendo clic en el botón Vista previa que aparece en la miniatura de cada sitio.

Elija el sitio de inicio que más le guste y luego haga clic en el botón Importar :

Tan pronto como haga clic en el botón Importar , aparecerá una ventana emergente que le pedirá que elija si desea importar todo el sitio web (incluidas todas las imágenes) o solo el diseño con marcadores de posición para los elementos de contenido.

De forma predeterminada, Botiga importa todos los widgets, configuraciones del Personalizador e imágenes del sitio de inicio, pero tienes la opción de anular la selección de cualquiera de ellos si no deseas importarlos.

Cuando haya terminado, haga clic en el botón Siguiente y comenzará el proceso de importación:

Tenga en cuenta que Botiga tardará unos segundos en importar el sitio de inicio.

4. Edite la página del carrito de WooCommerce

Ahora, veamos cómo utilizar las funciones integradas de la página del carrito de Botiga para reducir el abandono del carrito y aumentar su tasa de conversión.

Lo primero que debes hacer es ir a Apariencia → Personalizar → Carrito :

Notarás que algunas de las opciones en el panel del carrito ya están habilitadas. Mantenlos como están y procede a habilitar o modificar las siguientes características:

i. Mejorar el diseño de la página del carrito

El objetivo principal de una página de carrito es llevar a los clientes a la siguiente etapa del embudo de ventas, que es la página de pago.

Una de las mejores formas de empujar suavemente a los visitantes para que pasen al proceso de pago es mostrando el botón de pago en un lugar destacado de la página del carrito.

Sin embargo, la página predeterminada del carrito de WooCommerce muestra el botón de pago debajo de los productos. Esto significa que los clientes deben desplazarse hacia abajo para verlo:

Con Botiga, puedes cambiar la ubicación del botón en el lado derecho de la página, lo que mejora enormemente su visibilidad:

Todo lo que necesitas hacer es ir a Apariencia → Personalizar → Carrito y bajo el encabezado Diseño , seleccionar el segundo diseño:

Tenga en cuenta que esta es una característica del tema gratuito Botiga, por lo que también está disponible sin Botiga Pro.

ii. Muestre un minicarro lateral fuera de la lona

Un mini carrito es una ventana emergente que aparece en la pantalla cuando un cliente hace clic en el ícono del carrito en el menú:

Agregar un mini carrito a su tienda WooCommerce anima a los clientes a ir directamente a la página de pago.

En el panel Carrito en el Personalizador, vaya a Estilo de mini carrito y seleccione el segundo diseño, como se muestra en la imagen a continuación.

Luego, asegúrese de que el botón "Abrir en Ajax Agregar al carrito" esté activado. Esto permitirá a los visitantes agregar productos al mini carrito sin tener que recargar toda la página y causar interrupción en la experiencia de compra:

Luego, haga clic en el botón Publicar y verifique el diseño del mini carrito de su sitio:

Importante: Para que la opción Agregar al carrito de Ajax funcione en el mini carrito, debe tener habilitada la opción Agregar al carrito de WooCommerce Ajax predeterminada.

Para hacerlo, vaya a WooCommerce → Configuración → Productos → Comportamiento Agregar al carrito , marque la opción 'Habilitar botones AJAX para agregar al carrito en archivos' y guarde los cambios:

III. Permitir a los clientes aumentar la cantidad de productos en el mini carrito

Permitir a los clientes aumentar la cantidad de productos en el mini carrito ayudará a impulsar las ventas de su tienda.

Todo lo que necesita hacer es activar la opción Cantidad de mini carrito en el panel Carrito del Personalizador:

Así es como se veía el mini carrito en nuestro sitio de demostración antes de habilitar la opción Cantidad de mini carrito :

Después de habilitar la opción, el mini carrito se ve así:

IV. Mostrar un icono de minicarro flotante

Como sugiere el nombre, un mini carrito flotante es un ícono de carrito que flota en la pantalla y anima a los clientes a ir a la página del carrito:

Para agregar un ícono de mini carrito flotante a su tienda WooCommerce, abra el panel Carrito y asegúrese de elegir el segundo estilo en Estilo de mini carrito.

Luego, active la opción Icono de mini carrito flotante y proceda a configurar el icono haciendo clic en el botón Configuración del mini carrito flotante:

Aparecerán nuevas opciones en el Personalizador donde podrá elegir un ícono de mini carrito, establecer sus reglas de visualización, y modificar su estilo (por ejemplo, color, color de fondo, radio del borde, sombra, etc.), tamaño, posición y distancia desde la esquina de la página:

v. Mostrar el botón "Continuar comprando" en la página del carrito

Como mencioné antes, el objetivo principal de la página del carrito es llevar a los clientes a la página de pago.

Agregar un botón "Continuar comprando" a la página del carrito puede parecer un consejo contradictorio; sin embargo, se sabe que aumenta significativamente las tasas de conversión de algunas tiendas WooCommerce.

Por eso le recomiendo que experimente con el botón Continuar comprando. Habilítelo en su tienda y vea si mejora su tasa de conversión.

Para agregar un botón Continuar comprando a su página Carrito, vaya al panel Carrito en el Personalizador, active la opción Mostrar botón Continuar comprando y proceda a modificar el texto del botón si siente la necesidad de:

Conclusión

Personalizar la página del carrito de tu tienda WooCommerce es una excelente manera de reducir el abandono del carrito y mejorar tu tasa de conversión.

Si bien hay varias formas de personalizar la página del carrito de WooCommerce, no todas las técnicas marcarán la diferencia en sus ingresos.

En este artículo, cubrí cinco personalizaciones de la página del carrito que han demostrado aumentar las tasas de conversión:

1. Utilice un diseño horizontal para la página del carrito para que el botón de pago sea más fácil de encontrar.
2. Muestre un mini carrito lateral fuera del lienzo que incluye un botón de Pagar.
3. Permita a los clientes aumentar la cantidad de producto en el mini carrito.
4. Muestre un ícono de minicarro flotante para alentar a los clientes a ir al carrito o a la página de pago.
5. Experimente con el botón "Continuar comprando" para ver si funciona para su tienda.

Con Botiga Pro, puedes implementar todas estas técnicas fácilmente, sin tener que escribir ningún código.

Pasarán algunas semanas para ver una reducción en el abandono del carrito y un aumento en su tasa de conversión.

Mientras tanto, si tiene alguna pregunta sobre cómo editar la página del carrito de WooCommerce, háganoslo saber en la sección de comentarios a continuación.