Revisado por Cambias tu tienda a Blocksy, abres la página de la tienda y las tarjetas de producto se ven geniales. Luego pruebas una ubicación diferente para el botón de lista de deseos. Con la opción superior izquierda, el botón puede quedar encima de la insignia de OFERTA. En las páginas de producto, la opción en línea ocupa toda una fila debajo de "Añadir al carrito".
Nada de eso está roto, exactamente. Son dos herramientas bien construidas que toman diferentes decisiones de diseño, y las brechas se notan en los detalles. Esos detalles son lo que un comprador nota cuando decide si guardar algo para más tarde.
Por eso el plugin gratuito SaveTo Wishlist Lite ahora incluye una integración dedicada para listas de deseos de Blocksy. A continuación, te mostraré qué cambia y qué ubicaciones se adaptan mejor a Blocksy. También te mostraré cómo comprobarlo.
Saltar a:
- Por qué los botones de lista de deseos pueden parecer fuera de lugar en Blocksy
- Lo que hace la integración de Blocksy de SaveTo Wishlist
- Qué necesitas antes de empezar
- Cómo elegir las ubicaciones de tu botón de lista de deseos en Blocksy
- Cuándo elegir arriba a la derecha en lugar de arriba a la izquierda
- Cómo confirmar que la integración de Blocksy está funcionando
- Los límites que vale la pena conocer
- Preguntas frecuentes
- ¿Listo para configurar tu lista de deseos de Blocksy?
Por qué los botones de lista de deseos pueden parecer fuera de lugar en Blocksy
Blocksy mantiene el marcado de producto de WooCommerce pero lo presenta con su propia configuración. Así es como Blocksy te da tanto control sobre el diseño de tu tienda. Sin embargo, un botón de plugin insertado en ese diseño no conoce automáticamente las reglas de Blocksy.
Nuestros desarrolladores midieron cuatro puntos específicos donde eso se manifestaba:
- Alineación de la tarjeta: Blocksy alinea el contenido de la tarjeta según su propia configuración de "Alineación de contenido". El botón de lista de deseos se centraba independientemente, por lo que en las tarjetas alineadas a la izquierda era lo único que estaba fuera de línea.
- La esquina de la insignia: Blocksy coloca sus insignias de Oferta y sin stock en la esquina superior izquierda de la tarjeta. Un botón de lista de deseos colocado allí se superponía a la insignia y la ocultaba.
- La galería de productos: En las páginas de productos, la ubicación de la imagen superior izquierda podía quedar en la esquina de la página, alejada de la foto.
- La fila Añadir al carrito: Blocksy expande los elementos adicionales en esa fila a ancho completo. Por lo tanto, un botón de lista de deseos "en línea" terminaba en su propia fila.
Blocksy es una opción popular, por lo que estos detalles llegan a muchas tiendas. Según su listado de WordPress.org, Blocksy tiene más de 300.000 instalaciones activas y una calificación promedio de 5 estrellas en 873 reseñas. Está hecho por CreativeThemes y aparece en recopilaciones como la guía de temas de WooCommerce de Store Owner Tips.
Conseguir que el botón sea correcto es importante porque guardar es un hábito real. Según la investigación de páginas de productos del Instituto Baymard, el 21% de los 1.193 encuestados confían en las funciones de "Guardar". Sin embargo, el 89% de los sitios que Baymard comparó no facilitan el acceso y uso de las funciones de Guardar. Un botón que parece fuera de lugar no ayuda y socava el valor de conversión de una lista de deseos.
Lo que hace la integración de Blocksy de SaveTo Wishlist
La integración es una hoja de estilos adicional. SaveTo Wishlist Lite 1.1.6 la carga automáticamente siempre que Blocksy, o un tema hijo de Blocksy, sea tu tema activo. No hay nada que activar.
| Ubicación | Sin la integración | Con la integración |
|---|---|---|
| Ubicaciones de la tienda, título y añadir al carrito | Botón centrado, incluso en tarjetas alineadas a la izquierda | Sigue la alineación de tu tarjeta Blocksy: izquierda, centro o derecha |
| Tienda, parte superior izquierda de la imagen del producto | Cubre la insignia de oferta o sin stock | Desciende para quedar debajo de la insignia |
| Producto, parte superior izquierda de la imagen del producto | Puede quedar fuera de la galería de productos | Se superpone a la galería, debajo de cualquier insignia |
| Producto, en línea con el botón Añadir al carrito | Ocupa una fila completa propia | Comparte la fila con Añadir al carrito |
La hoja de estilos solo ajusta la posición, el espaciado y la alineación. Los colores, el tamaño y el estilo de tu botón permanecen exactamente como los configuraste en SaveTo Wishlist. También funciona con todos los modos de carga de CSS Frontend. Las tiendas que cargan un estilo mínimo o nulo del plugin obtienen las mismas correcciones.
Nuestra integración con Woostify funciona de la misma manera: una hoja de estilos específica del tema, cargada automáticamente.
Lo que la integración no hace
El alcance es deliberadamente pequeño, lo que también mantiene el riesgo bajo.
- Sin ajustes: No hay ninguna página, interruptor u opción de Blocksy en SaveTo Wishlist.
- Sin JavaScript adicional: Es solo CSS, por lo que no añade scripts. Nuestra prueba de velocidad muestra lo que el propio plugin añade a una página de producto.
- Sin diseño nuevo: No rediseña el botón para que parezca los propios botones de Blocksy. Adapta tu botón existente al diseño de Blocksy.
- No afecta a otros temas: La hoja de estilos solo se carga cuando Blocksy es el tema activo. Nuestras pruebas automatizadas comprueban ambos lados.
Qué necesitas antes de empezar
Necesitas dos cosas, y ambas son gratuitas.
- El tema Blocksy: O un tema hijo creado sobre él. Nuestros desarrolladores midieron las correcciones en Blocksy 2.1.57, y tomamos las capturas de pantalla a continuación en 2.1.58.
- SaveTo Wishlist Lite 1.1.6 o posterior: Las versiones anteriores no incluyen la hoja de estilos de Blocksy. Actualiza primero si tienes una versión anterior.
La integración se encuentra en el plugin gratuito, por lo que no necesitas SaveTo Wishlist Pro para ello. Las tiendas Pro también la obtienen, porque Pro se ejecuta sobre el plugin gratuito.
Blocksy es un tema clásico, por lo que tu tienda y las páginas de productos utilizan las plantillas estándar de WooCommerce. Si creas una página con el bloque Colección de Productos de WooCommerce en su lugar, el botón aún se muestra. Allí, el propio manejo de bloques del plugin lo coloca. ¿Creando páginas de productos con Elementor en su lugar? Nuestra guía de widgets de Elementor cubre esa ruta.
Cómo elegir las ubicaciones de tu botón de lista de deseos en Blocksy
Cada ubicación muestra el botón en Blocksy, por lo que eliges una apariencia, no evitas roturas. Encontrarás ambas en SaveTo Wishlist > Ajustes > Ubicación y Estilos del Botón. Busca en las secciones Página de Tienda y Página de Producto.
Ubicaciones en la página de la tienda
Aquí es donde cada una de las seis ubicaciones de la tienda aparece en una tarjeta de producto de Blocksy:
- Arriba a la derecha de la imagen del producto: La configuración predeterminada del plugin, y la que mejor encaja con Blocksy. La esquina de la etiqueta está a la izquierda, por lo que nada compite por este espacio.
- Arriba a la izquierda de la imagen del producto: En una tarjeta con una etiqueta, el botón se baja para situarse debajo de ella. En una tarjeta sin etiqueta, mantiene su posición normal en la esquina.
- Encima del Título del Producto y Debajo del Título del Producto: Ambas muestran el botón entre la imagen y el título. Eso es porque Blocksy renderiza su propio título.
- Encima del Botón Añadir al Carrito: Muestra el botón justo debajo del título.
- Debajo del Botón Añadir al Carrito: Muestra el botón después del botón Añadir al Carrito.
Las últimas cuatro siguen la configuración de Alineación de Contenido de Blocksy para las tarjetas de producto. Cambia tus tarjetas a centrado o a la derecha, y el botón se mueve con ellas. ¿Prefieres no tener el botón en un tipo de página? Elige No mostrar para ella, como explica nuestra guía para ocultar el botón de la lista de deseos.
🔍️ Lo que hemos visto: Encima del Título del Producto y Debajo del Título del Producto se ven iguales en Blocksy. Si cambias entre ellas esperando que el botón se mueva, no lo hará, y eso es lo esperado. Elige una de las dos, o elige Encima del Botón Añadir al Carrito si quieres el botón debajo del título.
Ubicaciones en la página de producto
Las siete ubicaciones de la página de producto funcionan en Blocksy. Dos de ellas reciben ayuda específica de la hoja de estilos.
En línea con el Botón Añadir al Carrito se sitúa al lado de Añadir al Carrito en escritorio. En pantallas estrechas, se mueve debajo de él, porque el propio botón de Blocksy ya ocupa toda la fila allí.
Arriba a la izquierda de la imagen del producto se superpone a la galería de productos. En un producto con una etiqueta, se sitúa debajo de la etiqueta en lugar de cubrirla.
Las otras cinco ubicaciones no necesitan ningún manejo especial de la hoja de estilos.
Cuándo elegir arriba a la derecha en lugar de arriba a la izquierda
Elige "Arriba a la derecha de la imagen del producto" si tus productos tienen etiquetas grandes o apiladas. El ajuste "Arriba a la izquierda" deja espacio para una etiqueta del tamaño predeterminado de Blocksy, y nada más.
La hoja de estilos reconoce las etiquetas de "Oferta", "Agotado" y las etiquetas personalizadas de Blocksy. Solo mueve el botón en las tarjetas que realmente muestran una. Por eso, una cuadrícula mixta puede tener botones a dos alturas diferentes en la esquina superior izquierda.
Así que, si tus ofertas tienen varias etiquetas en la misma esquina, "Arriba a la derecha" mantiene todas las tarjetas consistentes. También es la opción predeterminada del plugin, por lo que una instalación nueva en Blocksy ya la utiliza.
Algunos compradores guardan un producto para esperar un mejor precio. Para ellos, SaveTo Wishlist Pro puede enviar alertas de bajada de precio cuando un producto guardado se abarata.
Cómo confirmar que la integración de Blocksy está funcionando
Estas comprobaciones tardan unos minutos y cubren las posiciones que la hoja de estilos modifica. Ejecútalas una vez después de actualizar y de nuevo después de una actualización importante de Blocksy.
- Comprueba que la hoja de estilos se carga: Ve al código fuente de una página de tienda y busca
savetowishlist-blocksy.css. Debería estar ahí mientras Blocksy esté activo. Si un plugin de minificación combina tus archivos CSS, es posible que el nombre no aparezca. - Comprueba un producto en oferta: Con la ubicación de imagen "Arriba a la izquierda", el botón debería situarse debajo de la etiqueta "Oferta".
- Comprueba la alineación de tu tarjeta: En las tarjetas de Blocksy alineadas a la izquierda, un título o la ubicación "Añadir al carrito" también deberían alinearse a la izquierda.
- Comprueba la fila "Añadir al carrito": Con la ubicación "Inline", el botón debería compartir la fila en el escritorio. En un teléfono, pasa a la línea inferior.
- Comprueba como invitado: Abre la tienda en una ventana privada. Los invitados ven el mismo botón, siempre que las listas de deseos para invitados estén activadas.
Si algo sigue sin verse bien, es posible que un plugin de caché o de minificación esté sirviendo CSS antiguo. Límpialo y vuelve a cargar. Para más formas de hacer coincidir el botón con tu tema, consulta nuestra publicación sobre opciones de icono para el botón de lista de deseos.
Los límites que vale la pena conocer
La integración cubre las plantillas de tienda, archivo y producto individual. Algunas cosas quedan fuera de ella.
- La página del carrito: Los botones del carrito, como la opción para guardar artículos individuales del carrito, utilizan el estilo normal del plugin.
- Etiquetas grandes: El desplazamiento "Arriba a la izquierda" está dimensionado para una etiqueta predeterminada. Los diseños más grandes deberían usar "Arriba a la derecha".
- Versiones de Blocksy: Las correcciones se midieron en Blocksy 2.1.57. Una futura versión de Blocksy podría cambiar su diseño, así que vuelve a comprobarlo después de las actualizaciones importantes.
- Apariencia del botón: La integración adapta tu botón al diseño de Blocksy. No copia el diseño del botón de Blocksy.
Nuestras pruebas automatizadas se ejecutan en una instalación real de Blocksy. Confirman que la hoja de estilos se carga en Blocksy y no en otro tema. También comprueban que el botón en línea mantiene su fila.
Preguntas frecuentes
¿Necesito activar la integración de Blocksy?
No. SaveTo Wishlist Lite 1.1.6 y versiones posteriores cargan la hoja de estilos de Blocksy automáticamente siempre que Blocksy sea tu tema activo. No hay ninguna configuración, interruptor ni página para ello.
¿Funciona con un tema hijo de Blocksy?
Sí. El plugin comprueba el tema padre, por lo que un tema hijo construido sobre Blocksy obtiene la misma hoja de estilos que Blocksy.
¿Necesito SaveTo Wishlist Pro para la integración de Blocksy?
No. Viene incluido en el plugin gratuito SaveTo Wishlist Lite, versión 1.1.6 y posteriores. Las tiendas Pro lo obtienen automáticamente porque Pro se ejecuta sobre el plugin gratuito.
¿Listo para configurar tu lista de deseos de Blocksy?
Blocksy le da a tu tienda un diseño limpio, y el botón de la lista de deseos ahora encaja en él sin CSS personalizado. La única decisión real que queda es dónde quieres que esté el botón.
- Ver qué cambia la integración en las tarjetas de Blocksy y las páginas de producto.
- Elige tus ubicaciones, empezando por Arriba a la derecha en la página de la tienda.
- Usa Arriba a la derecha para etiquetas grandes para mantener la coherencia de cada tarjeta.
- Realiza las cinco comprobaciones después de actualizar, y después de las actualizaciones importantes de Blocksy.
Tu configuración de lista de deseos de Blocksy está a una actualización de plugin. Instala o actualiza SaveTo Wishlist Lite a la versión 1.1.6 y la hoja de estilos hará el resto.
