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:

plugin sticky bar woocommerce

En móvil el efecto es mucho mejor:

woocommerce barra pegajosa anadir al carrito

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 😉

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 5)

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes suscribirte a mi newsletter para no perderte ninguna novedad

Reader Interactions

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *