Cómo agregar un carrito de compras de WooCommerce en menús

¿Le gustaría agregar un carrito de compras de WooCommerce en las barras de menú? Al conducir una tienda en línea, es crucial crear la mejor experiencia de usuario. Si no satisface las necesidades de los compradores, dejarán su sitio para una alternativa mejor y más fácil de usar. Para facilitar sus compras en su tienda, puede agregar el carrito de compras total al menú de navegación de WooCommerce. De esta manera, los compradores pueden ver su contenido del carrito y verificar en cualquier momento. Este artículo le mostrará cómo agregar un carrito de compras de WooCommerce en menús de paso por paso.
¿Qué es un ícono de miembro del carrito de compras? Un icono de cesta de menú es un pequeño icono que se encuentra en su menú principal en WooCommerce. A menudo, mostrará la cantidad de artículos en la canasta y actualización de los compradores a medida que pongan más artículos en el carrito. Probablemente hayas visto tales íconos de canasta cuando compras en Amazon:

El icono permanece en el menú de navegación incluso si hace clic en diferentes páginas de productos. ¿Por qué agregar el carrito de compras de WooCommerce al menú? La ventaja clave de agregar los iconos de conteo de recuento a su menú de navegación es que ayuda a los compradores a ver cuántos productos agrega. 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 íconos del menú del carrito de compras ofrecen a los usuarios una manera rápida y fácil de llegar a la página del carrito de compras. Como resultado, el proceso de completar la compra es más fácil, lo que hace que los visitantes no abandonen los carritos de compras. Cómo agregar el ícono de la canasta de WooCommerce al menú WoCommerce no incluye un carrito de compras para menús de forma predeterminada. En cambio, tendrá que instalar un complemento de WooCommerce o codificar la funcionalidad desde cero. Si escribir el código suena aterrador, no se preocupe. Aquí hay 2 modos súper chocantes, sin códigos para agregar un carrito de compras de WooCommerce a su menú.
¿Qué es un ícono de miembro del carrito de compras?
¿Por qué agregar el carrito de compras de WooCommerce al menú?
Cómo agregar el icono de WooCommerce Coș al menú
Método 1: Uso del bloque de carrito de menú Seedprod
Método 2: Uso del carrito de menú del complemento WooCommerce
Método 1: El uso del bloque de carrito de menú Seedprod El primer método implica el uso de un potente complemento de WordPress para personalizar su tienda WooCommerce.
Seedprod es el mejor constructor de sitios web de WordPress con más de 1 millón de usuarios. Le permite crear temas personalizados de WordPress, sitios web de WooCommerce y páginas de conversión sin codos.

Con más de 200 plantillas prefabricadas, es fácil de comenzar. Puede personalizar cualquier aspecto con el generador visual de deslizamiento y colocación y bloques y secciones receptivas. Vale la pena señalar los bloques dedicados de WooCommerce. Permitirle personalizar cada lado de su sitio de WooCommerce con solo unos pocos clics. Siga los pasos a continuación para agregar un carrito de compras de WooCommerce en menús con SeedProd. Paso 1. Instale el constructor de sitios web de Seedprod primero, descargue una copia del complemento para el generador de sitios web Seedprod. Comience con Seedprod hoy
Nota: Hay una versión gratuita de SeedProd que puede usar. Sin embargo, utilizaremos SeedProd Pro para las funciones de WooCommerce que necesitamos.
Después de la descarga de Seedprod, deberá instalar y activar el complemento en su sitio de WordPress. Puede seguir esta guía para instalar un complemento de WordPress si necesita ayuda. Luego acceda a la configuración de SeedProd »desde su menú de administración de WordPress. Aquí puede ingresar la clave de licencia SeedProd y desbloquear las funciones de complementos Pro.
Puede encontrar la clave de licencia accediendo al sitio web de SeedProd y conectándose a su cuenta allí, copie la clave de licencia en la sección “Descargas”.
Ahora inserte la tecla en el campo de texto y haga clic en el botón de verificación de la tecla. Paso 2. Cree un nuevo tema de WooCommerce El siguiente paso es acceder a la página Seedprod »Builder de temas. Aquí puede crear un nuevo tema personalizado para su sitio web de WooCommerce.

Recomendamos esta opción porque reemplazará su tema de WordPress con un tema rápido y fácil que puede personalizar fácilmente deslizando y colocación. También significa que no tendrá que crear un tema infantil separado o instalar complementos adicionales de WordPress. Hay 2 formas de crear un tema con el generador de temas Seedprod: tema preconstruido: Importar un tema de WooCommerce listo para usar, que crea automáticamente todas las páginas que necesita para su tienda en línea.

Piezas temáticas individuales: construya las diferentes partes de su tienda WooCommerce individualmente.
Usaremos el tema preconstruido para esta guía, porque hace todo por usted automáticamente. Haga clic en el botón Tema para ver una lista de temas prefabricados de WordPress y WooCommerce.
Cada tema es 100% amigable con dispositivos móviles y fácil de editar con el generador de ayuda arrastrando y caída de Seedprod. Pase el mouse sobre cualquier tema y haga clic en el icono BIF para importarlo en el generador de temas.
Usaremos el tema de la tienda de ropa deportiva para este tutorial. Después de importar el tema, verá todas las plantillas que componen el diseño de su sitio de WooCommerce. Puede personalizar cada plantilla individual para adaptarla a las necesidades de su sitio con el generador de páginas Seedprod.
A continuación, le mostraremos cómo personalizar la plantilla “Show Late”.

Paso 3. Personalice su menú de navegación de WooCommerce, muchos de los temas de SeedProd prefabricados automáticamente con un carrito de compras de WooCommerce en la barra de navegación. Abra la plantilla de navegación de encabezado para ver cómo funciona. Encuentre la plantilla “Nav Ehet” en la lista de plantillas y haga clic en el diseño de edición de enlace para abrirlo en el generador visual. Vea el aspecto del encabezado a la derecha cuando abra la página. A la izquierda hay bloques y secciones que puede agregar al diseño. Para agregar un bloque a su página, tírelo de la izquierda y colóquelo en su diseño.

Como puede ver, ya hay 3 bloques en el encabezado:

Imagen para el logotipo del sitio

Menú de navegación de WordPress

Bloque de licenciatura con menú

El bloque de menú de canasta muestra un icono de canasta, cuántos artículos hay en la canasta y el subtot. Puede cambiar el aspecto y la funcionalidad en la configuración de la cesta del menú de ala izquierda. Por ejemplo, puede ocultar la canasta cuando está vacía, puede mostrar u ocultar el subtotal y cambiar la alineación de la canasta.
Puede encontrar más configuraciones haciendo clic en la pestaña Avanzada. Por ejemplo, puede cambiar el color del carro y la canasta, puede ajustar la distancia e incluso ocultar la insignia en el móvil o el escritorio.
Cuando esté satisfecho con la forma en que se ve el icono de la cesta del menú, haga clic en el botón Verde Salva. Paso 4. Personalice su 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í hay algunas instrucciones paso a paso:
Cómo personalizar la página de su tienda WooCommerce

Cómo personalizar las páginas de las categorías de productos de WooCommerce

Cómo mostrar productos recomendados en WooCommerce

Paso 5. Active el tema SeedProd WooCommerce Después de haber personalizado su tema de WooCommerce con SeedProd, está listo para hacerlo en vivo en su sitio web. Para hacer esto, vaya a Seedprod »Temor Builder. Luego, en la esquina superior derecha, gire el interruptor “Habilite el tema Seedprod” en la posición DA.
Ahora puede obtener una vista previa del icono de la cesta del menú para ver cómo se ve.
Cuando los compradores hacen clic en el icono de la cesta 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í hay un ejemplo de la canasta de menú de Amazon que hice con SeedProd:
Método 2: El uso del complemento de carrito de menú de WooCommerce sigue una solución que puede usar si no desea cambiar su tema de WordPress existente. En su lugar, puede usar un complemento WooCommerce gratuito para agregar un icono al menú WP NAV.

El complemento que utilizaremos se llama carrito de menú de WooCommerce. Funciona con WooCommerce, descargas digitales fáciles y muchas otras plataformas de comercio electrónico de WordPress y solo tarda unos minutos en configurar. Paso 1. Instale el carrito del menú del complemento WooCommerce primero, acceda a los complementos »Agregue nuevo desde el tablero de WordPress y escriba la” Canasta del menú WooCommerce “en el cuadro de búsqueda. Luego haga clic en el botón de instalación y haga clic en activación para activar el complemento.

Paso 2. Configure el carrito de compras de WooCommerce Después de instalar el complemento, vaya a WooCommerce »Menú Menú de configuración de Menú desde el panel de administración de WordPress. En esta página, puede elegir su plataforma de comercio electrónico, puede seleccionar un menú para mostrar el icono del carrito de WOO, puede elegir un icono de canasta y más. Configurar la configuración del icono de COș y luego hacer clic en Guardar los cambios.

Ahora puede visitar su sitio y ver el menú del carrito de compras de WooCommerce.

¡Eso es todo! Esperamos que este artículo lo haya ayudado a aprender cómo agregar un carrito de compras de WooCommerce a su menú. También puede gustarle esta guía sobre cómo crear una página de WooCommerce, que vendrá pronto antes de lanzar su tienda. Gracias por leer. Síguenos en YouTube, Twitter y Facebook para obtener un contenido más útil para desarrollar su negocio.