Añadir una sticky bar en los productos de WooCommerce

Después de mi tutorial de cómo debe ser una ficha de producto en una tienda online me llegaron muchas preguntas de cómo meter esta funcionalidad en un WooCommerce.

Antes que nada os pongo en contexto: esta funcionalidad permite que en cualquier zona en la que no esté visible el botón de añadir al carrito se muestre persiguiendo al cliente, os dejo un ejemplo visual:

En móvil el efecto es mucho mejor:

Una vez que ya lo tenemos claro vamos a instalar el plugin para conseguir este efecto.

Sticky Product Bar for WooCommerce

Lo podemos encontrar en el repositorio oficial de WordPress o haciendo clic en este enlace. Ofrece las siguientes opciones:

• Duración en la que sale el efecto.
• Elegir si mostrarla en ordenador, en móvil o en ambos.
• Mostrarla arriba o abajo de la pantalla. Prefiero abajo en los dos.
• También lo puedes mostrar en el carrito y en la página de finalizar compra. No lo recomiendo activar.
• Mostrarlo siempre visible o no mostrarlo cuando se vea el botón habitual de añadir al carrito.
• Puedes elegir que elementos mostrar el producto en la barra como la foto principal, título, valoraciones, precio, cantidad restante de productos…

El único problema del plugin es que no se pueden personalizar los estilos fácilmente, así que aquí os dejo un fragmento de CSS para que lo podáis personalizar como queráis desde apariencia o el fragmento que te deja el plugin para añadirlo:

/* Cambiar el color de la letras y fondo del botón */
.wc-sticky-product-bar-displayed .wc-sticky-product-bar section.button button, .wc-sticky-product-bar-displayed .wc-sticky-product-bar section.button a.action-button {
    color: #fff;
    background: #af806c;
}
/* Cambiar el color del fondo de la barra y la opacidad */
.wc-sticky-product-bar {
    background: #fff;
    opacity: 0.8;
}

Cambiad los colores por los de vuestra web.

Sticky Add To Cart Bar For WooCommerce

Es otro plugin que podemos usar, trae muchas más funcionalidades que el anterior de personalización. Para mi trae demasiadas cosas para lo que necesito, pero os invito a probar los dos y quedaros con el que más os guste.

Está disponible también gratis en el repositorio de WordPress.

En algunas plantillas como Generatepress u OceanWP viene incluido por defecto en el theme. Si no sabes de qué te hablo puedes pásate por el tutorial de mejores themes para WooCommerce

¿Qué beneficios tiene esta funcionalidad?

• Ayuda a aumentar la tasa de conversión.
• Mejora la usabilidad de nuestra tienda online, al ser el botón de fácil acceso para el cliente.
• Te diferencia de las webs de tu competencia

Cualquier duda como siempre os leo en comentarios 😉