Muchos de los temas se hacen hoy día compatibles con WooCommerce, especialmente aquellos generalistas o destinados específicamente a comercio electrónico. Es normal, no ser compatible con el sistema de ecommerce más extendido sería estar abocado al fracaso.
Sin embargo, no todos los temas compatibles con WooCommerce incluyen un carrito en el menú o la cabecera. Ya sabes, ese «mini-carrito» con un resumen de los artículos que el usuario tiene en su cesta y el total hasta el momento. Así que, si te encuentras con que tu plantilla no lo incluye, vamos a ver qué alternativas tienes para añadir el carrito a tu menú.
Tabla de contenidos
El widget de carrito de WooCommerce
La tendencia es que todos los temas compatibles ya ese resumen de carrito en alguna parte del menú o de la cabecera, pero aún hay algunas plantillas generalistas que no lo hacen, algunas bastante populares, como GeneratePress (más de 60.000 instalaciones activas entre las propias y las de temas hijo, como Statement o Freelancer).
En estos casos, la primera alternativa que tienes para añadir el carrito de WooCommerce en un lugar permanentemente a la vista y accesible de forma cómoda es, evidentemente, el widget que el propio WooCommerce te genera para eso.
Para tenerlo no tienes que instalar nada más, simplemente vas a Apariencia > Widgets y allí lo tienes: Carrito de WooCommerce. Listo para meterlo en cualquier widget area de que disponga tu plantilla.
Lo malo es que esas widget areas suelen estar o bien en la barra lateral o bien en el footer. En ocasiones podrás encontrar plantillas que tengan una widget area en la parte derecha de la cabecera, aunque no es lo más habitual. Curiosamente GeneratePress sí tiene una widget area en la cabecera.
En todo caso da igual. El widget de carrito de WooCommerce no está pensado para eso sino para la barra lateral, ya que muestra una lista de los productos que tienes en él, y si lo pones en la cabecera te romperá todo el layout de la plantilla.
Widget del carrito con un par de productos en la cabecera de GeneratePress
Así que ahí lo tienes como opción si te vale en la barra lateral, pero me temo que no es lo que buscamos.
Mediante un plugin: WooCommerce Menu Cart
Afortunadamente, como de costumbre, hay un plugin que viene al rescate. Esta vez se trata de WooCommerce Menu Cart, un plugin que te permite añadir el carrito de WooCommerce a cualquier menú de tu web.
Y no sólo de WooCommerce: WooCommerce Menu Cart también funciona con Easy Digital Downloads y otros sistemas minoritarios de comercio electrónico para WordPress, como WP eCommerce y Jigoshop. Y, para poner las cosas en su justa medida, hablar de «minoritario» aquí puede significar hablar de más de 40.000 usuarios, como es el caso de WP eCommerce.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
Además no creas que vas a tener que sudar tinta para configurarlo. Sólo tienes que activar el plugin e ir a WooCommerce > Configuración Menu Cart, seleccionar con qué sistema de ecommerce lo vas a usar (sólo se te mostrarán los que tengas instalados) y en cuál de los menús que tengas creados quieres que se muestre.
También tienes opciones para seleccionar si quieres que esté siempre visible o sólo cuando haya artículos en el carrito, si quieres que muestre sólo el precio, sólo el número de artículos o ambas cosas, y si quieres situarlo a la izquierda, a la derecha o junto al resto del menú. Y hala, a por un café.
Carrito de WooCommerce en el menú de GeneratePress con WooCommerce Menu Cart
La funcionalidad básica ya la tenemos, pero no estaría de más ir un paso más allá, aunque esto depende ya de cada uno y de cómo de simple quiera mantener su plantilla. Vamos a ver un par de pequeños trucos.
El carrito en el menú principal está bien, sí, pero hay una ubicación idónea para él y es la parte superior de la página, por encima de la cabecera. Y hay un motivo para esto: los móviles.
En dispositivos móviles el menú principal se cambia por el típico «menú hamburguesa» (el de las tres líneas horizontales), al que hay que hacer click para ver el contenido. Y claro, si pones el carrito en ese menú el usuario tendrá que hacer click cada vez que quiera ver el contenido, y de nuevo para ocultarlo y seguir navegando por la web. Como ves, no es lo ideal.
No todos los themes cuentan con ella (el que he estado usando de ejemplo hasta ahora, GeneratePress, no la tiene), pero algunas plantillas sí tienen una ubicación de menú por encima de la cabecera, el menú superior. En ella debe ir, cuando está disponible, el menú que contenga los enlaces de comercio electrónico (mi cuenta, checkout, etc.) y también el carrito, por la razón que te acabo de comentar.
El menú superior es la ubicación ideal para el carrito, debido al comportamiento de los dispositivos móviles
Ocúltalo en determinadas páginas
No tiene sentido que se muestre el menú superior en determinadas páginas, como por ejemplo el checkout… o la propia página de carrito ¿verdad? Ya hemos visto cómo se puede configurar la visibilidad de otros elementos según la página, como por ejemplo para los widgets o los elementos de menú:
Pero eso no nos sirve de nada en este caso, porque ni estamos usando un widget ni tenemos control alguno sobre el carrito de menú (el plugin WooCommerce Menu Cart utiliza un filtro para mostrarlo, no un elemento real del menú).
La solución está, como tantas otras veces cuando se trata de la visualización, en un poco de CSS. El código necesario para ocultar el carrito del menú en las páginas de carrito y de checkout es:
.woocommerce-cart .wpmenucartli, .woocommerce-checkout .wpmenucartli {display:none}
Basta con que pegues ese código en Apariencia > Personalizar > CSS Adicional, y listo.
Usa una cabecera flotante
Adicionalmente puedes querer usar una cabecera flotante para este menú, de forma que en los ordenadores esté visible (y con él el carrito) en todo momento, incluso cuando el usuario hace scroll hacia abajo.
Esto lo puedes implementar fácilmente gracias al plugin Sticky Header. Sólo tienes que activarlo e ir a Apariencia > Sticky Header para configurar qué menú quieres que muestre (el que contiene el carrito, lógicamente) y unas cuantas opciones de estilo, y listo.
Y si eres de los que prefiere coger palomitas y mirar un vídeo, pues que no falte, aquí lo tienes. Pero recuerda echar también un vistazo rápido al artículo, porque no todo lo explicado se ve en el vídeo:
Muy buenas,
Soy un poco novato en esto, tengo un problema con el WP Menu Cart, al configurar para que aparezca en la barra superior haga lo que haga nunca consigo que se vea. POr favor os ruego un poco de ayuda.
Muhas gracias
Un saludo
Hola Roberto
Así es imposible saber por qué no se ve. Comprueba la configuración, que lo estés añadiendo en un menú con ubicación, etcétera. Quizá mirar el código fuente que se genera te ayude a localizar el problema.
Un saludo.
Buenas Enrique,
Estoy configurando en el menú de la parte superior en la plantilla Jessica de Génesis. No sé si con esta plantilla este plugin puede funcionar de todo bien. Este menú lo he creado yo en apariencia/menú y lo he utilizado en la configuración del lugin del carrito. El códgo fuente que se ve cuando guardo la configuración es el mismo. Lo que si me hace correctamente es en el menú que tengo encima del slider en ese caso si me crea un enlace con la palabra productos, el carro y el numero de productos. la web si quieres verla es **************
Muchas gracias
Jn saludo
Hola de nuevo Roberto
Como te decía, sin poder examinarlo todo es imposible saber la causa. Lo que sí puedo confirmarte es que el plugin funciona perfectamente con Jessica, ya que es una plantilla con la que trabajo regularmente y lo he usado en ella. Activa el modo debug de WordPress, es posible que te dé pistas de lo que está pasando.
Un saludo.
Hola, deseo saber como hacer para que el cliente compre directamente cuando se le desprenden todos los productos, sin que lo lleve a otra ventana cuando este le dé añadir producto.
Es decir, que si está haciendo scroll a los productos y decide añadir un producto, esta acción no lo saque a otra ventana y siga haciendo scroll.
Quedo atento
Hola Esteban
Para eso debes activar AJAX, en WooCommerce > Ajustes > Productos > Mostrar > Activar botones AJAX de añadir al carrito en los archivos.
Un saludo.
hola tengo un problema en mi plantilla tengo que agregar el botón de añadir carrito instale un pluing pero no me aparecen por ningún lado la opción en mi plantilla tengo un botón de cotizar y quiero agregar el botón de carrito pero no puedo me puedes ayudar.
Buenos dias,
Tengo una curiosidad, estoy aprendiendo todavia a manerjar el WooCommerce y me gustaria añadir en los productos mas opciones, como que el cliente pueda elegir tamaño/color etc.. y en relacion a eso cambie el precio. Me podrian ayudar con este asunto¿?
Gracias y un saludo!
Hola Rubén
Eso lo puedes hacer con productos variables. Échale un vistazo a este artículo.
Un saludo.
Hola Enrique, tengo el plugin instalado en una tienda con GeneratePress, en un menú superior. En Desktop se ve perfectamente pero en movil resulta que ambos menús (tanto el menú normal como el superior con el carrito) se convierten en menú hamburguesa y claro… yo no quiero que el superior sea hamburguesa sino que salga el importe del carrito y listo. ¿Cómo puedo hacerlo?
Gracias, un gran post
Hola como estas? estoy intentando poner las categorias de productos en los widget me aparecene n todas las paginas menos en la del carrito y productos, como puedo solucionarlo, ? El tema que estoy usando es Ashe
Hola Enrique.
Tengo una duda, ¿cómo podría quitar el texto que acompaña al icono del carrito (número de productos/precio), para mostrar solamente el icono?
¿Es posible sin tener la versión pro?
Muchas gracias por tus aportes!!
Un saludo. Angelo
Hola Enrique,
¿Cómo podría hacer un carrito desplegable en el menú secundario?
Un saludo
Hola. Yo tengo el carrito en generate press en el lateral derecho pero al abrirlo es una página transparente y se ve el texto de detrás.Como ponerla en primer plano?
Hola me gustaria saber como hago para que mi carrito tambien se vea responsivo, cuado sale el menu hamburguesa en dispositivos mobiles no sale el carrito, solo en las computadoras, como hago para que aparezca en responsive?