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.

 

 

 

VER CURSOS

 

 

1.- Características del plugin gratuito WP Menu Cart para mostrar icono carrito en 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í

 

 

2.- Cómo añadir el carrito al menú de WordPress o Woocommerce

 

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.

 

en qué menú mostrar carrito woocommerce

Elegir en qué menú mostrar el carrito Woocommerce

 

 

3.- Opciones de personalización del carrito en el menú WordPress

 

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.

 

configurar plugin mostrar carrito en menú wordpress

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ú wordpress y barra lateral

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

 

Compártelo ya!!

RECIBE GRATIS

CURSO PRESTASHOP

(20 vídeos)

Y WOOCOMMERCE

(14 vídeos) y MÁS

 

1.- CURSO PRESTASHOP 1.7 GRATIS (20 VÍDEOS)

2.- CURSO WOOCOMMERCE GRATIS (14 VÍDEOS)

3.- Guía para crear una tienda online de éxito
4.- Guía SEO para Prestashop
5.- Training Woocommerce, plugins imprescindibles y recomendados

QUIERO LOS CURSOS Y DEMÁS GRATIS

Mira en tu buzón de correo, para confirmar la suscripción.