• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Añadir un icono de carrito estilo Outfitter Pro al menú de Genesis Sample

Aprende a insertar un icono de carrito en el menú de Genesis Sample que al hacer clic abra una ventana que ocupe todo el ancho de página con este tutorial.

En una web con WooCommerce contar con icono que muestre el carrito en la parte superior de la web mejora la experiencia de usuario (UX), ya que permite a los clientes acceder a él en cualquier momento.

Aunque esta funcionalidad se puede implementar de distintas maneras, una de las más visuales e intuitivas es la que utiliza el tema Outfitter Pro:

Tiene un icono en forma de carrito y cuando pinchas en él se visualizan los elementos agregados al carrito en una ventana que ocupa todo el alto y ancho de la página.

De esta forma, genera un espacio amplio para que el cliente pueda ver los elementos que ya ha añadido, modificarlos y seguir adelante con el proceso de compra.

¿Quieres conseguir este mismo efecto en el child theme Genesis Sample?

Descubre cómo a continuación.

Pasos para insertar el carrito de Outfitter Pro en Genesis Sample mediante código

1. Modifica el fichero functions.php

Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

Con estas líneas consigues:

  • Reposicionar el menú para mostrar el carrito al final.
  • Encolar el script encargado del comportamiento del icono del carrito (woocommerce-cart-icon.js).
  • Encolar el script encargado de cargar los ionicons.
  • Añadir y mostrar el icono de carrito en la cabecera.

De hecho, el código se podría dividir en distintos ficheros, pero aquí lo tienes en uno solo para que te sea más fácil aplicar los pasos de una vez.

2. Crea un fichero woocommerce-cart-icon.js

Introduce este snippet en un nuevo archivo woocommerce-cart-icon.js dentro de la carpeta /woocommerce/js/ del child theme:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

Este script se encarga de gestionar los efectos derivados de la interacción con el icono del carrito.

3. Modifica el archivo style.css

Por último, introduce el siguiente código al final del fichero style.css:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

Con este paso consigues aplicar los estilos para que todo se vea bien.

Dependiendo del número de elementos que tengas en el menú es posible que necesites que ajustar un poco el CSS.

4. Desactiva el efecto ajax en WooCommerce

Por último, en WooCommerce > Ajustes > Pestaña de «productos» asegúrate de que la casilla «Activar botones AJAX de añadir al carrito en los archivos» no está clicada.

Así deberían quedar los ajustes de comportamiento al añadir al carrito.

Ya lo tienes.

Conclusiones

Mostrar el carrito de la compra en la parte superior de la página favorece una buena experiencia de usuario y puede mejorar las conversiones del ecommerce.

Si tú o tu cliente os habéis enamorado de cómo funciona el carrito del tema Outfitter Pro y quieres aplicarlo a otro child theme de Genesis, puedes conseguirlo basándote en este tutorial.

Y ahora, ¿quieres hacerme alguna pregunta o darme una sugerencia para próximos snippets? Cuéntamela en los comentarios (opción exclusiva para suscriptores).


Cabecera CSS Genesis Framework Genesis Sample HTML Javascript Menú Outfitter Pro PHP WooCommerce

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?