Configuras tu tienda de WooCommerce, pero los compradores no ven su carrito desde el menú. Añaden un producto y luego tienen que buscar el enlace del carrito antes de poder pagar.
Un icono de carrito de compras de WooCommerce soluciona eso. Muestra un recuento de artículos en vivo que se actualiza a medida que los compradores añaden productos, directamente en el encabezado de tu sitio, por lo que el camino al pago siempre está a un clic de distancia.
En esta guía, te mostraré dos formas sin código de añadir un icono de carrito de compras de WooCommerce a tu menú, cómo personalizar su aspecto y cómo solucionar un icono que no se muestra.
¿Qué es un icono de carrito en el menú (y por qué ayuda)?
Un icono de carrito en el menú es un pequeño carrito de compras que se encuentra en tu menú de navegación principal de WooCommerce y muestra el número de artículos en el carrito de un comprador. El recuento se actualiza a medida que añaden o eliminan productos, y el icono permanece en el menú mientras navegan por diferentes páginas de productos.
Probablemente has visto iconos de carrito como este al comprar en Amazon:
Añadir uno a tu tienda hace dos cosas:
- Muestra a los compradores lo que hay en su carrito: El recuento de artículos y el subtotal dan un total provisional antes de que lleguen a la página de pago.
- Acelera el proceso de pago: Un acceso con un clic al carrito mantiene el proceso fluido, por lo que es menos probable que los visitantes abandonen sus carritos.
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 los menús por defecto. O instalas un plugin de WooCommerce o añades el código tú mismo.
Aquí tienes dos formas de hacerlo sin código. La primera utiliza SeedProd para integrar el icono en el encabezado de tu tema. La segunda utiliza un plugin gratuito si no quieres cambiar tu tema actual.
Método 1: Añadir un icono de carrito de WooCommerce usando SeedProd (sin código)
SeedProd es un constructor de sitios web de arrastrar y soltar para WordPress que te permite crear una tienda WooCommerce personalizada sin tocar código, y sus bloques dedicados de WooCommerce incluyen un bloque de Carrito en el Menú para añadir un icono de carrito a tu encabezado.
Utilizo SeedProd para crear mi propio sitio, y el bloque Carrito en el Menú es la parte que utilizo aquí porque se encarga del recuento de artículos, el subtotal y el estilo en un solo lugar. Con más de 300 plantillas para empezar, puedes tener un encabezado construido en una tarde.
Sigue los pasos a continuación para añadir un icono de carrito de compras de WooCommerce a tu menú con SeedProd.
Paso 1. Instalar SeedProd
Primero, descarga una copia del plugin constructor de sitios web SeedProd.
Después de descargar SeedProd, instala y activa 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 introduces tu clave de licencia de SeedProd para desbloquear las funciones 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
A continuación, ve a la página SeedProd » Theme Builder. Aquí es donde creas un tema personalizado para tu sitio web de WooCommerce.
Recomiendo esta opción porque reemplaza tu tema de WordPress existente por uno rápido y ligero que puedes editar arrastrando y soltando. También te proporciona el bloque de carrito de menú que necesitas para el icono del carrito.
Hay dos formas de crear un tema con el theme builder de SeedProd:
- Tema predefinido: importa un tema de WooCommerce ya hecho que crea todas las páginas que necesitas para tu tienda online.
- Partes individuales del tema: construye cada parte de tu tienda WooCommerce pieza por pieza.
Usaré el método del tema predefinido aquí porque realiza la configuración por ti. Haz clic en el botón Temas para ver la lista de kits de temas de WordPress premontados.
Cada tema es compatible con dispositivos móviles y fácil de editar con el constructor de páginas de arrastrar y soltar de SeedProd.
Pasa el ratón por encima de cualquier tema y haz clic en el icono de marca de verificación para importarlo.
Usaré el tema Tienda de ropa deportiva para este tutorial.
Después de importar, verás todas las plantillas que componen el diseño de tu sitio web de WooCommerce. Puedes editar cada una para que coincida con tu tienda.
A continuación, te mostraré cómo personalizar la plantilla “Navegación de encabezado”, donde se encuentra el icono del carrito.
Paso 3. Personaliza tu menú de navegación de WooCommerce
Muchos de los temas predefinidos de SeedProd ya incluyen un icono de carrito de compras de WooCommerce en la barra de navegación. Abre la plantilla de navegación del encabezado para comprobarla y ajustarla.
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 visual.
Tu diseño de encabezado se muestra a la derecha. A la izquierda están los bloques y secciones que puedes añadir.
Para añadir un bloque, arrástralo desde la izquierda y suéltalo en tu diseño.
El encabezado ya tiene tres bloques:
- Imagen del logotipo del sitio web
- Menú de navegación de WordPress
- Bloque de carrito de menú
El bloque de carrito de menú muestra el icono del carrito, el recuento de artículos y el subtotal. Haz clic en él para abrir la configuración del carrito de menú, donde puedes controlar su apariencia y comportamiento.
Desde el panel de configuración, puedes:
- Ocultar el carrito cuando esté vacío: muestra el icono solo una vez que un comprador añada un artículo.
- Mostrar u ocultar el subtotal: muestra el total acumulado junto al recuento, o solo el recuento.
- Establecer la alineación: posiciona el carrito a la izquierda, al centro o a la derecha en el encabezado.
- Ajustar colores, espaciado y visualización en móvil: abre la pestaña Avanzado para cambiar el color del carrito y la insignia, el espaciado y si la insignia se muestra en móvil.
Cuando estés satisfecho con la apariencia del icono del carrito, haz clic en el botón verde Guardar.
Paso 4. Personaliza tu tema de WooCommerce
Ahora puedes editar las otras plantillas de tu tema de WooCommerce. El proceso es el mismo que para el encabezado. Si necesitas ayuda, aquí tienes algunas guías:
- 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. Habilitar tu tema de WooCommerce de SeedProd
Después de personalizar tu tema, estás listo para publicarlo.
Ve a SeedProd » Theme Builder. En la esquina superior derecha, cambia el interruptor "Enable SeedProd Theme" a la posición Yes.
Ahora previsualiza el icono del carrito de tu menú para ver cómo queda en tu tienda activa.
Cuando los compradores hagan clic en el icono del carrito, irán directamente a la página del carrito. También puedes personalizar tu carrito de compras de WooCommerce con SeedProd.
Aquí tienes un ejemplo de un icono de carrito de menú al estilo de Amazon que también construimos con SeedProd:
Cómo personalizar el icono del carrito
Un icono de carrito predeterminado funciona, pero la mayoría de las tiendas quieren que coincida con su marca. Aquí te mostramos qué puedes cambiar con la configuración avanzada del bloque Menu Cart de SeedProd y qué hacer si usas un tema diferente.
- Mostrar u ocultar la insignia del número de artículos: el pequeño número en el icono puede permanecer visible en todo momento o aparecer solo una vez que el carrito tenga artículos.
- Cambiar el color y el tamaño: haz que el icono y la insignia coincidan con los colores de tu marca y escálalos hacia arriba o hacia abajo en la pestaña Avanzado.
- Cambiar el icono por otro: si no usas SeedProd, la mayoría de los plugins de iconos de carrito te permiten elegir un icono diferente o reemplazarlo con texto como "Carrito" o "Cesta" en su configuración.
Cuando configuré esto en mi propia tienda, ocultar la insignia hasta que el carrito tuviera artículos mantuvo la cabecera más limpia sin perder el recuento cuando importaba.
Método 2: Añadir un icono de carrito en el menú de WooCommerce con un plugin gratuito
Si no quieres cambiar tu tema actual de WordPress, usa un plugin gratuito en su lugar. Añade un icono de carrito a tu menú existente sin tocar los archivos de tu tema.
El plugin que usaré se llama WooCommerce Menu Cart. Funciona con WooCommerce, Easy Digital Downloads y muchas otras plataformas de comercio electrónico de WordPress.
Paso 1. Instalar el plugin WooCommerce Menu Cart
Primero, ve a Plugins » Añadir nuevo desde tu panel de WordPress y escribe "WooCommerce Menu Cart" en el cuadro de búsqueda.
A continuación, haz clic en el botón Instalar y luego en Activar para que el plugin esté activo.
Paso 2. Configurar el icono del carrito de compras
Después de instalar el plugin, ve a WooCommerce » Configuración del carrito de menú desde tu panel de administración de WordPress. Aquí eliges tu plataforma de comercio electrónico y seleccionas en qué menú aparece el icono del carrito.
Configura los ajustes de tu icono de carrito y haz clic en el botón Guardar cambios.
Ahora visita tu sitio para ver el icono del carrito de compras de WooCommerce en tu menú.
Por qué no se muestra tu icono de carrito de WooCommerce
Si añadiste un icono de carrito pero no aparece en tu menú, la causa suele ser una de las siguientes cosas comunes. Soluciona estos problemas antes de cambiar nada más.
- Tu tema no tiene un icono de carrito nativo: la mayoría de los temas estándar de WordPress no añaden uno para WooCommerce, por eso necesitas SeedProd o un plugin en primer lugar.
- El carrito está configurado para ocultarse cuando está vacío: si activaste "ocultar cuando está vacío", el icono solo aparece después de que añades un producto al carrito. Añade un artículo y actualiza para comprobarlo.
- La caché muestra una versión antigua: un plugin de caché o la caché de tu proveedor pueden estar sirviendo la página de antes de que añadieras el icono. Borra tu caché y recarga.
- Si no lo ves, abre la pestaña Avanzado y asegúrate de que la insignia no esté oculta, ni siquiera en el móvil.
Si el icono sigue sin aparecer después de eso, vale la pena comprobar si el enlace del carrito funciona correctamente, ya que una página de carrito rota puede impedir que el icono se muestre.
Preguntas frecuentes sobre los iconos de carrito de WooCommerce en los menús
¿Cómo añado un icono de carrito al menú de WordPress?
Añades un icono de carrito con un plugin o un constructor de sitios web, porque WordPress y WooCommerce no incluyen uno por defecto. Con SeedProd, arrastras el bloque Menu Cart a tu plantilla de cabecera.
Con un plugin gratuito como WooCommerce Menu Cart, lo instalas y eliges a qué menú se adjunta el icono. Ambos métodos no requieren código.
¿Cómo añado el icono del carrito a la cabecera en WooCommerce?
Añade el icono del carrito a tu plantilla de cabecera, no al contenido de la página. En el Theme Builder de SeedProd, edita la plantilla "Header nav" y arrastra el bloque Menu Cart.
Si usas un tema de bloques, abre el Editor de Sitios, edita tu plantilla de cabecera y añade el bloque Mini-Cart en el mismo lugar.
¿Por qué no se muestra mi icono de carrito de WooCommerce en el menú?
La razón más común es que el carrito está configurado para ocultarse cuando está vacío, por lo que solo aparece después de que un comprador añade un artículo. La caché también puede servir una versión antigua de la página, así que borra tu caché y recarga.
Si ninguna de las dos soluciones funciona, es posible que tu tema no admita un icono de carrito nativo, lo que significa que necesitas SeedProd o un plugin para añadir uno.
¿Cómo muestro el recuento de artículos en el icono del carrito de WooCommerce?
El recuento de artículos es la pequeña insignia en el icono del carrito, y la mayoría de las herramientas la muestran por defecto. En la configuración de Menu Cart de SeedProd, el recuento se actualiza automáticamente a medida que los compradores añaden productos.
Si no lo ves, abre la pestaña Avanzado y asegúrate de que la insignia no esté oculta, ni siquiera en el móvil.
Añade Hoy Mismo Tu Icono de Carrito de WooCommerce
Un icono de carrito con un recuento de artículos en vivo ofrece a los compradores un camino claro hacia el pago, lo que significa más ventas completadas para ti. Puedes crear uno ahora mismo con el constructor de arrastrar y soltar de SeedProd, sin necesidad de código.
Empieza con SeedProd y añade tu icono de carrito de compras de WooCommerce en minutos.
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 un 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 productos en WooCommerce
- Cómo Añadir Calificaciones de Estrellas a las Páginas de Producto 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 ocultar productos sin stock en WooCommerce
¡Gracias por leer! Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
