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.
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).
