Vamos a ver en este post, cómo mostrar un icono en forma de carrito en el menú del header de wordpress, con un enlace a la página del carrito de Woocommerce.
Disponer de un enlace a la página del carrito es fundamental para mejorar la experiencia de usuario de cualquier tienda online. Si, además, se muestra el número de artículos e importe total del carrito en tiempo real, pues mucho mejor. Ya que el cliente podrá acceder fácilmente al carrito en todo momento para formalizar su compra y se le mostrarán en tiempo real datos importantísimos, para el cliente, como el importe actual de su pedido y el número de productos.
Este icono en forma de carrito será un enlace a la página de carrito de la tienda online. Por lo que esto tiene sentido, si estamos usando Woocommerce con WordPress.
En muchas plantillas compatibles con Woocommerce ya se muestra un carrito en la zona del menú. Pero, seguramente, éste no muestre el importe total y número de productos. Podremos elegir no mostrar ese carrito por defecto que se muestra en la plantilla, que es lo habitual.
Utilizaremos un plugin gratuito que nos permitirá añadir y realizar una serie de acciones de personalización. Luego, existe también, una versión de pago del plugin que nos incluye más opciones de personalización.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE AÑADIR CARRITO MENÚ TIENDA WOOCOMMERCE
El plugin gratuito WP Menu Cart nos va a permitir:
a.- añadir el icono del carrito al menú de wordpress con enlace al carrito de la tienda
b.- Podremos mostrar el número de productos añadidos al carrito, el importe total del carrito o ambos indicadores
c.- Podremos mostrar o no, el icono del carrito, junto a los indicadores mencionados en el apartado anterior.
d.- Alinear icono el menú a izquierda o derecha.
Puedes ir a la página del plugin desde aquí: Plugin WP Menu Cart
Con la opción premium del plugin podrás:
a.- Elegir entre diferentes iconos diferentes para el carrito
b.- Podrás añadir el icono a varios menús (con la opción gratuita solo puedes añadirlo a un menú)
c.- Añadir CSS para personalizar el diseño
d.- Shortcode para mostrar el carrito en cualquier posición.
Puedes ir a la versión premium del plugin aquí
Una vez instalado y activado el plugin WP Menu Cart, iremos a: “WooCommerce > Configuración de Menú Cart” en el menú lateral izquierdo del panel de administración de WordPress.
También podríamos acceder a esta página de configuración desde: “Plugins > Plugins instalados” y haciendo clic en el enlace: “Ajustes” del plugin WP Menu Cart, que seguramente se te mostrará como: “WooCommerce Menu Cart”.
Configuraremos las siguientes opciones:
a.- Elige con qué plugin de e-commerce te gustaría que funcione Menu Cart: puesto que este plugin sirve para funcionar con varios plugins de ecommerce para WordPress, no solo Woocommerce. Debemos asegurarnos de que aparece seleccionada la opción: “Woocommerce”
b.- Hide theme shopping cart icon: debemos marcar esta opción para que no se muestre el icono tipo carrito por defecto que aparece en la plantilla, y que por tanto sea suprimido por el que incluye el plugin WP Menu Cart. Por lo tanto, debes marcar esta opción.
c.- Elige el/los menú/s en el/los que deseas mostrar Menu Cart: en el primer selector elegiremos el menú en el que queremos mostrar el carrito.
Nota Importante: debes haber creado un menú en wordpress previamente a seleccionar esta opción.
Elegir en qué menú mostrar el carrito Woocommerce
En la misma pantalla de configuración del plugin, situada en: “WooCommerce > Configuración de Menu Cart” en el menú lateral, encontrarás opciones de personalización como las siguientes:
a.- Mostrar siempre el carrito, incluso si está vacío: si marcamos esta opción, siempre se mostrará el icono del carrito, aunque no se haya añadido ningún producto.
b.- Visualizar icono del carrito compras: si marcamos esta opción, se mostrará el carrito en el menú. Si no la marcamos, no se mostrará el carrito (se mostraría solo el importe y/o número de productos).
c.- ¿Qué te gustaría mostrar en el menú?: en este selector podremos elegir las siguientes opciones:
i.- Solo los productos: si marcamos esta opción se mostrará solo el número de productos
ii.- Solo precio: si marcamos esta opción solo se mostrará el importe total del pedido actual del carrito.
iii.- Tanto el precio como los productos: al marcar esta opción se mostrarán tanto el número de productos añadidos al carrito, como su importe total.
d.- Elige la alineación que se vea mejor en tu menú: con estas opciones podremos modificar la localización del carrito en el menú: Alinear a la izquierda, alinear a la derecha o alineación de menú por defecto.
f.- Price to display: en este selector podemos elegir entre:
i.- Cart total (including discounts): si elegimos esta opción, el importe que se mostrará correspondiente a los productos añadidos al carrito, tendrá en cuenta los posibles descuentos que sean de aplicación.
ii.- Subtotal (total of products): si elegimos esta opción, el importe que se muestre no tendrá en cuenta descuentos.
Personalizar / Configurar plugin para mostrar carrito menú
4.- Widget carrito Woocommerce
Hablando del carrito, ya sabes que Woocommerce incluye, por defecto, un widget denominado: “Carrito”, que puedes añadir a la barra lateral o al footer. Este widget mostrará los productos añadidos al carrito, un enlace a dichos productos, el importe total, un enlace al carrito y otro a la página de finalizar compra.
Carrito en menú header y en widget barra lateral
En este post tienes más información sobre los diferentes widgets por defecto que incluye Woocommerce
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola Joaquín gracias por la info. es de gran ayuda.
Quería preguntarte como redireccionar a la página del carrito haciendo doble click en el icono.
Comentarte que en la web que gestiono, antes, al hacer 1 click se desplegaba el carrito con todos los productos y abajo del todo aparece la opción «ver carrito» y » finalizar compra»
Y al hacer doble click te dirigía directo a la página del carrito.
Pero de pronto ha dejado de hacerlo ahora solo despliega el carrito en «corbata»
Me podrías indicar como reconfigurarlo…si hay un shortcode…o función concreta, para que desde el icono lleve a la pagina del carrtio??
Espero respuesta. Gracias. Un saludo
Muy buenas
seguramente tendrás alguna opción en las opciones del tema que hayas modificado y haya cambiado el comportamiento del carrito.
Mira a ver en las opciones del tema (plantilla)
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso Blog WordPress, Curso seguridad y actualizaciones en wordpress, Curso como crear una tienda online de éxito, Curso Woocommerce, Curso seguridad y actualizaciones en WordPress, Curso Divi, Curso Flatsome, Curso Elementor, Curso Prestashop, Curso Shopify, Curso alta e indexación web en google, cursos Analytics ecommerce, Curso como gestionar un blog, SEO general, SEO tiendas online, Curso copywriting, plantillas wordpress como flatsome, etc… (Más de 30 cursos)
Hola, muchas gracias por la información, descargué el plugin y lo instalé. Perfecto. las funciones gratuitas me sirven más que de sobra.
Muy buenas
perfecto Vicente, me alegro que te sirviera.
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso DIVI, Curso diseñador web Freelance, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Hola Joaquín, muy interesante el post. Lo he probado en un ecommerce en el que se venden productos por unidades y productos por peso, pero la cantidad que muestra el carrito no refleja la suma de los items, sino la suma de las cantidades introducidas en cada uno de ellos, hay alguna manera de configurar el plugin para ello? Muchas gracias.
Buenas Beatriz,
no creo que tenga opciones para gestionar los productos por peso. Pero, puedes acudir al foro de soporte del plugin a ver que te dicen los desarrolladores: https://wordpress.org/support/plugin/wp-menu-cart/
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Curso Woocommerce, Curso Prestashop, Curso Shopify, Curso alta e indexación web en google, cursos Analytics ecommerce, SEO general, SEO tiendas online, Curso copywriting, plantillas wordpress como flatsome, Divi, Astra pro, Curso Prestashop, Curso Shopify, , etc. etc.
Muchas gracias Joaquín por tu respuesta, echaré un vistazo al foro que me comentas del plugin. En relación a la plataforma de curso tienda online, estuve suscrita durante unos meses para hacer diferentes cursos el año pasado, y la verdad es que están genial porque se ve mucha vocación por tu parte, se los recomiendo a todo el mundo, en concreto el curso de Woocommerce y el de Formularios de suscripción con Mailchimp y Bloom, buenísimos!!! 🤗🤗
Hola se puede poner o insertar otro icono de carrito que no sean los que proporciona WordPress ???
Me refiero a un carrito tipo Amanzon !!!
Gracias !!!
Hola Noly.
Con este plugin solo se pueden utilizar los carritos que te vienen en las opciones.
Algunas plantillas para wordpress específicas para woocommerce tienen otras opciones de iconos de carrito. También tiene la opción de buscar un plugin que te permita insertar un icono de carrito personalizado, que imagino es lo que buscas.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, Curso alta e indexación web en google, cursos Analytics ecommerce, SEO general, SEO tiendas online, Curso copywriting, plantillas wordpress como flatsome, Divi, Astra pro, curso Shopify, etc. etc.
hola, estoy creando mi web, use el icono de carrito pero cuando esta vacio y se le da click se va directo a la tienda, y quiero que vaya a una pagina personalizada donde se puede hacer seguimiento a los pedidos cuanto este vacio y cuando este lleno, no que se vaya a la tienda, ayuda pls.
Buenas.
Con las opciones por defecto del plugin wp menu cart no es posible cambiar el enlace del carrito. Pero, puedes consultar al soporte del plugin a ver si hay alguna posibilidad de hacerlo: Soporte plugin Menu cart
Gracias. Super útil.
Buenas tardes, Joaquín…
Estoy intentando personalizar la barra del menú móvil para que en lugar de aparacer únicamente el icono del menú hamburguesa aparezca también el icono del carrito de WooCommerce y el icono de Mi cuenta , también de WooCommerce.
¿Cómo se puede hacer esto?
Gracias…
Un saludo…
Buenas.
Ese va a depender principalmente de si la plantilla que estás utilizando permite mostrar esos elementos. Porque te va a ser difícil encontrar un plugin que implemente esa funcionalidad
Buenas!
Me pasa lo mismo, no consigo mostrar la cesta en la cabecera del móvil, uso DIVI.