¿Quieres añadir un icono de carrito de compras de WooCommerce en las barras de menú?
Añadir un icono de carrito de compras de WooCommerce en tu menú ayuda a los compradores a ver su carrito y a pagar más rápido, especialmente cuando incluye un recuento de artículos en tiempo real. Es una de las formas más sencillas de mejorar la experiencia de compra y reducir el abandono del carrito.
Cuando tienes una tienda online, crear la mejor experiencia de usuario es crucial. Si no satisfaces las necesidades de los compradores, abandonarán tu sitio en busca de una alternativa mejor y más fácil de usar.
Para facilitar las compras en tu tienda, puedes añadir un icono de carrito a tu menú de WooCommerce con un recuento de artículos. De esta manera, los compradores pueden ver el contenido de su carrito y pagar cuando quieran.
Este artículo te mostrará cómo añadir un icono de carrito de compras de WooCommerce en los menús paso a paso.
Probablemente hayas visto iconos de carrito como ese al comprar en Amazon:
El icono permanece en el menú de navegación incluso cuando haces clic en diferentes páginas de productos.
¿Por qué añadir un icono de carrito de compras de WooCommerce en el menú?
El beneficio clave de añadir iconos de recuento de carrito a tu menú de navegación es que ayuda a los compradores a ver cuántos productos añaden al carrito. Además, les da una idea de cuánto costarán las cosas antes de ir a la página de pago.
Además, los iconos de carrito de compras en el menú ofrecen a los usuarios una forma rápida y sencilla de acceder a la página del carrito. Como resultado, el proceso de pago es más fluido, lo que hace más probable que los visitantes no abandonen sus carritos de compra.
Cómo añadir un icono de carrito de WooCommerce a tu menú de WordPress (con recuento de artículos)
WooCommerce no incluye un icono de carrito de compras para menús por defecto. En su lugar, necesitarás instalar un plugin de WooCommerce o codificar esa funcionalidad desde cero.
Si escribir código te parece intimidante, no te preocupes. Aquí tienes 2 formas súper sencillas y sin código para añadir un icono de carrito de compras de WooCommerce a tu menú.
Método 1: Añadir un icono de carrito de WooCommerce al menú usando SeedProd (sin código)
El primer método implica el uso de un potente plugin de WordPress para personalizar tu tienda WooCommerce.
SeedProd es el mejor constructor de sitios web para WordPress, con más de 1 millón de usuarios. Te permite crear temas personalizados de WordPress, sitios web de WooCommerce y páginas de destino de alta conversión sin necesidad de código.
Con más de 200 plantillas predefinidas, empezar es fácil. Puedes personalizar cualquier diseño con el constructor visual de arrastrar y soltar y bloques y secciones responsivos.
De particular interés son los bloques dedicados de WooCommerce. Te permiten personalizar cada parte de tu sitio WooCommerce con solo unos pocos clics.
Sigue los pasos a continuación para agregar un icono de carrito de compras de WooCommerce a los menús con SeedProd.
Paso 1. Instalar el constructor de sitios web SeedProd
Primero, descarga una copia del plugin constructor de sitios web SeedProd.
Nota: existe una versión gratuita de SeedProd que puedes usar. Sin embargo, usaremos el plan SeedProd Elite para las funciones de WooCommerce que necesitamos.
Después de descargar SeedProd, deberás instalar y activar el plugin en tu sitio web de WordPress. Puedes seguir esta guía para instalar un plugin de WordPress si necesitas ayuda.
A continuación, ve a SeedProd » Ajustes desde tu menú de administración de WordPress. Ahí es donde puedes introducir tu clave de licencia de SeedProd y desbloquear las funciones de tu plugin Pro.
Puedes encontrar tu clave de licencia yendo al sitio web de SeedProd e iniciando sesión en tu cuenta. Desde allí, copia tu clave de licencia de la sección “Descargas”.
Ahora pega tu clave en el campo de texto y haz clic en el botón Verificar clave.
Paso 2. Crear un nuevo tema de WooCommerce
El siguiente paso es ir a la página SeedProd » Constructor de temas . Aquí es donde puedes crear un nuevo tema personalizado para tu sitio web de WooCommerce.
Recomendamos esta opción porque reemplazará tu tema de WordPress existente con un tema rápido y ligero que puedes personalizar fácilmente con arrastrar y soltar. También significa que no necesitarás crear un tema hijo separado ni instalar plugins adicionales de WordPress.
Hay 2 formas de crear un tema con el constructor de temas de SeedProd:
- Tema preconstruido: importa un tema de WooCommerce listo para usar que crea automáticamente todas las páginas que necesitas para tu tienda online.
- Partes individuales del tema: construye las diferentes partes de tu tienda WooCommerce individualmente.
Usaremos el método de tema preconstruido para esta guía porque hace todo automáticamente. Haz clic en el botón Temas para ver una lista de temas prefabricados de WordPress y WooCommerce.
Cada tema es 100% compatible con dispositivos móviles y fácil de editar con el constructor de páginas de arrastrar y soltar de SeedProd.
Coloca el cursor del ratón sobre cualquier tema y haz clic en el icono de marca de verificación para importarlo al constructor de temas.
Usaremos el tema Tienda de Ropa Deportiva para este tutorial.
Después de importar tu tema, verás todas las plantillas que componen el diseño de tu sitio web de WooCommerce. Puedes personalizar cada plantilla individualmente para adaptarla a las necesidades de tu sitio con el constructor de páginas de SeedProd.
A continuación, te mostraremos cómo personalizar la plantilla "Navegación de encabezado".
Paso 3. Personaliza tu menú de navegación de WooCommerce
Muchos de los temas prefabricados de SeedProd vienen automáticamente con un icono de carrito de compras de WooCommerce en la barra de navegación. Abramos la plantilla de navegación del encabezado para ver cómo funciona.
Busca la plantilla "Navegación de encabezado" en tu lista de plantillas y haz clic en el enlace Editar diseño para abrirla en el constructor de páginas visual.
Verá el diseño de su encabezado en el lado derecho al abrir la página. A la izquierda hay bloques y secciones que puede agregar a su diseño.
Para agregar un bloque a su página, arrástrelo desde la izquierda y suéltelo en su diseño.
Como puede ver, ya hay 3 bloques en el encabezado:
- Imagen del logotipo del sitio web
- Menú de navegación de WordPress
- Bloque de carrito del menú
El bloque Carrito del menú muestra un icono de carrito, cuántos artículos hay en el carrito y el subtotal. Puede cambiar la apariencia y la funcionalidad en el panel de configuración del Carrito del menú a la izquierda.
Por ejemplo, puede ocultar el carrito cuando esté vacío, mostrar u ocultar el subtotal y cambiar la alineación del carrito.
Puede encontrar más configuraciones haciendo clic en la pestaña Avanzado. Por ejemplo, puede cambiar el color del carrito y la insignia del carrito, ajustar el espaciado e incluso ocultar la insignia en dispositivos móviles o de escritorio.
Cuando esté satisfecho con la apariencia del icono de su carrito del menú, haga clic en el botón verde Guardar.
Paso 4. Personaliza tu tema de WooCommerce
Ahora puede personalizar las otras plantillas que componen su tema de WooCommerce. El proceso es similar al paso anterior, pero si necesita ayuda, aquí tiene algunas instrucciones paso a paso:
- Cómo personalizar la página de tu tienda WooCommerce
- Cómo personalizar las páginas de categorías de productos de WooCommerce
- Cómo mostrar productos destacados en WooCommerce
Paso 5. Habilita el tema de WooCommerce de SeedProd
Después de personalizar su tema de WooCommerce con SeedProd, está listo para publicarlo en su sitio web.
Para ello, vaya a SeedProd » Theme Builder. Luego, en la esquina superior derecha, active el interruptor "Habilitar tema de SeedProd" a la posición Sí .
Ahora puede previsualizar el icono de su carrito del menú para ver cómo queda.
Cuando los compradores hagan clic en el icono del carrito del menú, irán a la página del carrito de compras. También puede personalizar su carrito de compras de WooCommerce con SeedProd.
Aquí tienes un ejemplo del carrito del menú de Amazon que también hicimos con SeedProd:
Método 2: Añadir icono de carrito de menú de WooCommerce con un plugin gratuito
A continuación, se presenta una solución que puede utilizar si no desea cambiar su tema de WordPress existente. En su lugar, puede usar un plugin gratuito de WooCommerce para agregar un icono a los elementos de su menú de navegación de WordPress.
El plugin que utilizaremos se llama WooCommerce Menu Cart. Funciona con WooCommerce, Easy Digital Downloads y muchas otras plataformas de comercio electrónico de WordPress, y solo tarda unos minutos en configurarse.
Paso 1. Instalar el plugin WooCommerce Menu Cart
Primero, vaya a Plugins » Añadir nuevo desde su panel de WordPress y escriba "WooCommerce Menu Cart" en el cuadro de búsqueda.
A continuación, haga clic en el botón Instalar y haga clic en Activar para que el plugin esté activo.
Paso 2. Configurar el icono del carrito de compras de WooCommerce
Después de instalar el plugin, vaya a WooCommerce » Configuración del carrito del menú desde su panel de administración de WordPress. En esta página, puede elegir su plataforma de comercio electrónico, seleccionar un menú para mostrar su icono de carrito de woo, elegir un icono de carrito y más.
Configura los ajustes de tu icono de carrito y, a continuación, haz clic en el bot ilde{o}n Guardar Cambios .
Ahora puedes visitar tu sitio y ver el men ilde{u} del icono del carrito de compras de WooCommerce.
Preguntas frecuentes sobre los iconos de carrito de WooCommerce en los menús
A ilde{n}adir un icono de carrito de compras de WooCommerce a tu men ilde{u} facilita que los visitantes completen la compra, lo que se traduce en m ilde{a}s ventas completadas para ti.
Tanto si utilizas el constructor de arrastrar y soltar de SeedProd como un plugin gratuito, no necesitas c ilde{o}digos ni configuraciones complicadas para que funcione. Solo unos pocos clics y listo.
A continuaci ilde{o}n, podr ilde{i}as querer consultar estas gu ilde{i}as para seguir personalizando tu tienda WooCommerce:
- Cómo Personalizar la Pestaña de Información Adicional de WooCommerce
- Cómo Añadir el Botón Ver Carrito en WooCommerce
- Cómo Cambiar el Título de la Página de Tienda en WooCommerce
- Cómo Crear una Impresionante Galería de Imágenes de Producto en WooCommerce
- Cómo añadir valoraciones de estrellas a las páginas de productos de WooCommerce
- Cómo mostrar productos relacionados en WooCommerce
- Cómo mostrar categorías y etiquetas de productos en WooCommerce
- Cómo obtener y mostrar descripciones de productos en WooCommerce
- Cómo solucionar que la vista del carrito de WooCommerce no funcione
- Cómo ocultar productos sin stock en WooCommerce
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
