Descubre en este tutorial cómo agregar un carrito de la compra en la cabecera de Genesis Sample o cualquier otro child theme de Genesis mediante código.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes hacer propuestas. El otro día Diego, uno de nuestros suscriptores, preguntaba:
¡Muy interesante, Nahuai!
Me preguntaba si habría algún snippet para que en cualquier tema hijo de Génesis, por ejemplo Genesis Sample, se pudiera añadir un icono de carrito (instalado Woocommerce) que también se viese en dispositivos móviles sin tener que pulsar en menú.
¡Un saludo!
Así que he decidido explicar la forma más sencilla de añadir un carrito de la compra a la cabecera.
Solo tienes que combinar las siguientes instrucciones con el tutorial sobre cómo mostrar siempre los elementos de menú en móviles para Genesis Sample para conseguir exactamente lo que pide Diego.
Ya verás que con realizar un pequeño ajuste en el elemento concreto del menú y ciertas modificaciones de CSS te quedará, por ejemplo, así:
¿Vamos a ellos?
Snippet para introducir un icono de carrito de la compra en la cabecera de Genesis
Antes de insertar ningún código aplica el siguiente cambio en el ítem que deseas destacar:
Para ver este código y los otros 1953 snippets de esta web,
identifícate o suscríbete aquí.
¡Ya lo tienes! Ahora se mostrará el icono de carrito en la cabecera.
De esta forma aprovechas que los Dashicons ya vienen de serie con WordPress y te ahorras instalar otra librería entera como FontAwesome o Ionicons solo para este icono.
Si eres igual de perfeccionista que yo, es posible que quieras alinear el carrito con el resto de elementos del menú.
Para ello introduce el siguiente código en el apartado Site Navigation o al final del fichero style.css:
Para ver este código y los otros 1953 snippets de esta web,
identifícate o suscríbete aquí.
Y recuerda combinar estos pasos con este otro tutorial si también quieres que el icono se muestre en dispositivos móviles.
Conclusiones
Ya ves qué fácil es insertar un icono de carrito en el menu superior de Genesis Sample.
Y aunque este snippet está creado para un tema hijo concreto, puedes usarlo de guía para modificar otros child themes de Genesis.
Esta sería la forma más sencilla de hacerlo, aunque existen otras alternativas algo más complejas que también podrías implementar si fuera necesario.
¿Tienes necesidades diferentes? Cuéntamelo en los comentarios para que prepare un tutorial a medida.
Ventajas de ser suscriptor. 😉
