Revisado por Abres tu página de lista de deseos en UX Builder de Flatsome para que coincida con el resto de tu tienda. Añades una fila, un encabezado, quizás un banner. Luego haces clic en Actualizar, cargas la página y la lista de deseos ha desaparecido.
No hay errores ni advertencias. Los compradores que guardaron productos para más tarde llegan a una página vacía y es posible que no te lo digan. Es fácil de pasar por alto, y es por eso que creamos un elemento de lista de deseos de Flatsome.
Se incluye en el plugin gratuito SaveTo Wishlist Lite como un elemento nativo de Guardar en la lista de deseos para UX Builder. A continuación, te mostraré por qué la página se queda en blanco y cómo colocar el elemento. También cubriré el único lugar al que no puede acceder.
Saltar a:
- Por qué tu página de lista de deseos de Flatsome se queda en blanco en UX Builder
- Lo que hace realmente la integración SaveTo Wishlist de Flatsome
- Qué necesitas antes de empezar
- Cómo añadir la lista de deseos a una página de Flatsome con UX Builder
- Qué página debe contener el elemento de lista de deseos
- La única ubicación a evitar: Bloques UX
- Cómo confirmar que tu lista de deseos de Flatsome funciona
- ¿Qué pasa con el botón Guardar en la lista de deseos en Flatsome?
- Preguntas frecuentes
- ¿Listo para añadir tu lista de deseos a Flatsome?
Por qué tu página de lista de deseos de Flatsome se queda en blanco en UX Builder
La página de lista de deseos llega al navegador de una sola manera. WordPress ejecuta el shortcode [saveto_wishlist] almacenado en el cuerpo de la página, y ese shortcode muestra la lista de deseos.
Una página de UX Builder almacena su propio diseño. Al guardar, UX Builder escribe ese diseño como sus propios shortcodes, como [row] y [col]. Reconstruye la página de la lista de deseos sin nuestro elemento, y el diseño guardado no tendrá ningún shortcode de lista de deseos.
Ese es el comportamiento normal de un page-builder, no un error de Flatsome. Cualquier constructor que posea el cuerpo de la página decide qué se muestra allí, por lo que la lista de deseos necesita una pieza que el constructor entienda.
Flatsome es un tema popular, por lo que esta configuración es común. Según el listado de Flatsome en ThemeForest, el tema tiene 270.319 ventas. El listado lo llama el tema WooCommerce más vendido. También aparece en recopilaciones de temas, incluida la lista de Wholesale Suite de temas de WooCommerce para tiendas mayoristas.
Una página de lista de deseos en blanco cuesta más de lo que parece. Según la investigación de páginas de producto del Baymard Institute, el 21% de los 1.193 encuestados del estudio confían en las funciones de "Guardar". La misma investigación encontró que el 89% de los sitios no facilitan el acceso y uso de las funciones de Guardar. Una página que no muestra nada es el extremo de ese problema. Anula el valor de conversión que añade una lista de deseos.
Lo que hace realmente la integración SaveTo Wishlist de Flatsome
La integración añade una cosa: un elemento Guardar en la Lista de Deseos en el selector de elementos de UX Builder. Se incluye en SaveTo Wishlist Lite 1.1.3 y versiones posteriores. No hay página de configuración ni interruptor para activar.
- Mismo shortcode subyacente: El elemento adjunta las opciones de UX Builder al shortcode existente
saveto_wishlisten lugar de crear uno nuevo. Por lo tanto, se muestra exactamente como el shortcode, con el mismo manejo de invitados, clientes y listas compartidas. - Dos configuraciones opcionales: ID de la lista de deseos y Mostrar solo la lista de deseos predeterminada. Se corresponden directamente con los atributos
idydefaultonlydel propio shortcode, por lo que nada puede diferir entre ambos. - Un marcador de posición seguro en el editor: Dentro de UX Builder, ves una caja estática, no tu lista de deseos en vivo. De esa manera, un clic accidental en el editor no puede cambiar tus propios artículos guardados.
- Scripts que se cargan donde se necesitan: El plugin escanea el contenido de una página en busca del shortcode antes de cargar su aplicación de lista de deseos. Dado que el elemento utiliza la misma etiqueta, cualquier página que la contenga obtiene los scripts y estilos que necesita.
Esa comprobación evita que la aplicación completa de la lista de deseos se cargue en páginas que no muestran una lista de deseos. Nuestra prueba de velocidad mide lo que SaveTo Wishlist añade a una página de producto. En cualquier otro tema, la integración no hace nada. Su hook de constructor solo se activa dentro de una solicitud de UX Builder, y el marcador de posición comprueba primero si es Flatsome.
Lo que la integración no hace
El alcance es intencionadamente limitado. Aquí es donde termina el trabajo del elemento.
| Área | ¿Cubierto por la integración de Flatsome? |
|---|---|
| Una lista de deseos dentro de una página que editas en UX Builder | Sí, a través del elemento Guardar en la Lista de Deseos |
| Una lista de deseos dentro de un Bloque UX insertado en un pie de página, menú o diseño de producto | No. Los scripts y estilos de la lista de deseos no se cargan allí |
| Estilo del botón Guardar en la lista de deseos específico de Flatsome | No. El botón sigue la configuración normal de Ubicación y Estilos de Botón |
| La pestaña de lista de deseos de Mi Cuenta | No es necesario. Flatsome no dibuja esa pestaña a través de UX Builder |
| Una página de configuración o un interruptor de encendido/apagado | Ninguno. El elemento está ahí siempre que Flatsome esté activo |
Esa es una forma diferente a nuestras integraciones de temas para Woostify y Blocksy, que reestilizan el botón en sí. La integración de Flatsome se trata de la página de la lista de deseos. Es lo más parecido a nuestro módulo Divi Builder, que coloca la lista de deseos en los diseños de Divi de la misma manera.
Qué necesitas antes de empezar
Necesitas tres cosas en su lugar, y probablemente ya tienes dos de ellas.
- El tema Flatsome: Con UX Builder habilitado para la página que deseas editar.
- SaveTo Wishlist Lite 1.1.3 o posterior: La versión actual es 1.1.6, así que actualiza primero si tienes una anterior.
- Una página para construir: Normalmente la página de lista de deseos que el plugin creó cuando la activaste.
El elemento es parte del plugin gratuito. No necesitas SaveTo Wishlist Pro para él, aunque las tiendas Pro también lo obtienen.
Una nota rápida y honesta sobre las versiones. Nuestros desarrolladores verificaron el elemento a mano en Flatsome 3.15.5, y Flatsome está en 3.20.11 en el momento de escribir esto. Flatsome es un tema de pago, por lo que no forma parte de nuestro sitio de prueba automatizado. El elemento utiliza las funciones del constructor de Flatsome, pero échale un vistazo rápido después de cualquier actualización importante del tema.
Cómo añadir la lista de deseos a una página de Flatsome con UX Builder
Aquí tienes la configuración completa. Lo haces una vez por página y no implica ningún código. Los pasos coinciden con nuestra guía de base de conocimientos de Flatsome.
- Abre tu página de lista de deseos en UX Builder.
- Haz clic en Añadir elementos, luego busca Guardar en la lista de deseos en el grupo Contenido. Busca el icono del corazón, o escribe "guardar en la lista de deseos" para buscar.
- Arrastra el elemento a la fila o columna donde debe aparecer la lista de deseos.
- Haz clic en el elemento para abrir su panel de opciones.
- Deja ambas opciones en sus valores predeterminados a menos que necesites una lista específica. La tabla a continuación explica cada una.
- Haz clic en Aplicar, luego en Actualizar para guardar la página.
- Abre la página fuera del constructor para ver la lista de deseos en vivo.
Configura las dos opciones del elemento
Puedes dejar ambas tranquilas. Entonces el elemento se comporta exactamente como el shortcode [saveto_wishlist] en una página de lista de deseos estándar.
| Opción | Lo que hace | Por defecto |
|---|---|---|
| ID de la lista de deseos | Fija el elemento a una lista de deseos específica, por su ID numérico. Déjalo en blanco para una página de lista de deseos normal. | Vacío |
| Mostrar solo la lista de deseos predeterminada | Cuando se establece en Sí, un cliente conectado ve una lista, su lista predeterminada, en lugar de la tabla completa de listas múltiples. Sin una lista predeterminada establecida, recurre a su primera lista publicada. | No |
Ambas opciones dan forma a lo que ven los clientes conectados. Un invitado siempre obtiene la vista de lista de deseos para invitados, independientemente de lo que establezcas. Los enlaces de listas de deseos compartidas se comportan de manera diferente para cada opción, lo que el diagrama a continuación describe.
Hay una trampa que conviene conocer. Un ID de Wishlist fijado tiene prioridad sobre un enlace compartido. Si abres una lista compartida en esa página, se mostrará la lista fijada en su lugar. Deja el ID de Wishlist en blanco en tu página principal de wishlist, donde se abren los enlaces compartidos.
Mostrar solo la wishlist por defecto es la misma función que el atributo defaultonly="yes" del shortcode. Explicamos por qué una página de una sola lista se adapta a la mayoría de los clientes cuando se lanzó ese atributo.
Lo que verás dentro del constructor
En el editor, el elemento dibuja un cuadro simple con una nota de que la wishlist aparece en la página en vivo. Eso es lo esperado y no es un problema de estilo.
La wishlist real es una aplicación en vivo que se guarda en tu cuenta. Renderizarla en el lienzo permitiría que un clic accidental agregara o eliminara elementos de tu propia lista. Por lo tanto, el marcador de posición solo se muestra dentro del constructor, y solo para los usuarios conectados que pueden editar publicaciones.
🔍️ Lo que hemos visto: El marcador de posición se confunde fácilmente con una wishlist rota o sin estilo. Es tentador empezar a solucionar problemas desde dentro de UX Builder, pero el elemento probablemente esté bien. Comprueba la página en vivo en su lugar, y compruébala dos veces: una desconectado y otra como cliente.
Qué página debe contener el elemento de lista de deseos
Para la mayoría de las tiendas, la respuesta es la página de wishlist que el plugin creó al activarse. Ya está conectada al resto del plugin, por lo que no necesita cambiar nada más.
También puedes colocar el elemento en una página nueva, o en más de una. Funciona en cualquier página que UX Builder edite directamente. Nuestros desarrolladores comprobaron específicamente una página que no era la página de wishlist, y la wishlist también se cargó allí.
Si mueves la wishlist a una página nueva, actualiza una configuración. En SaveTo Wishlist > Settings, apunta el menú desplegable Redirect page a la página nueva. Ahí es donde los compradores aterrizan después de guardar un producto cuando el botón está configurado para redirigirlos.
Mantén la URL de la página de wishlist estable una vez que los clientes comiencen a usarla. Algunos la marcarán en favoritos y otros pegarán enlaces de wishlist compartidos en mensajes a amigos y familiares.
La única ubicación a evitar: Bloques UX
Coloca el elemento directamente en la página. No lo pongas dentro de un Bloque UX reutilizable que otra parte de tu sitio importe.
Flatsome puede incrustar un Bloque UX indirectamente con una referencia [block id="..."]. Encontrarás estos en los pies de página de las opciones del tema, pies de página por página, bloques de elementos de menú y diseños de productos personalizados.
El plugin decide si cargar la aplicación de wishlist escaneando el contenido propio de la página. Sin embargo, no puede ver dentro de un bloque almacenado en otro lugar. El elemento todavía se imprime, pero los scripts y estilos de la wishlist no se cargan con él. Sin ellos, la wishlist no puede funcionar correctamente.
¿Quieres una lista de deseos en un lugar visible de todo el sitio, como el encabezado o el pie de página? En su lugar, añade un enlace de menú a la página de la lista de deseos. Es un solo elemento de menú y funciona en todas las páginas.
Cómo confirmar que tu lista de deseos de Flatsome funciona
Realiza estas comprobaciones una vez después de la configuración y de nuevo después de cualquier actualización importante de Flatsome. Reflejan los escenarios que nuestros desarrolladores verificaron manualmente.
- Cerrada la sesión: Abre la página en una ventana privada. Deberías ver la lista de deseos de invitados, siempre que las listas de deseos de invitados estén activadas.
- Como cliente: Inicia sesión con una cuenta de cliente de prueba, guarda un producto y luego abre la página. El producto debería aparecer en la lista.
- Como administrador, fuera del constructor: Deberías ver la lista de deseos activa, nunca el cuadro marcador de posición.
- Mi cuenta: Abre la pestaña Lista de deseos en Mi cuenta. También debería mostrar la lista de deseos activa.
- Un enlace compartido: Haz pública una lista de prueba, compártela y luego abre el enlace con la sesión cerrada. Debería mostrar esa lista.
Un caso extremo ya está manejado por ti. Los enlaces de vista previa del Constructor UX llevan un parámetro de URL. Un cliente que sigue uno todavía ve su propia lista de deseos. El marcador de posición solo se muestra a los usuarios que pueden editar publicaciones.
Un invitado que aún no ha guardado nada ve un estado vacío, lo cual es normal. Si los invitados no obtienen ninguna lista de deseos, comprueba que Desactivar lista de deseos de invitados esté desactivado. También puedes personalizar la página de la lista de deseos de invitados si parece demasiado escasa.
¿Qué pasa con el botón Guardar en la lista de deseos en Flatsome?
El botón Guardar en la lista de deseos no necesita la integración. Se engancha a las plantillas de producto estándar de WooCommerce, y las plantillas de Flatsome activaron esos ganchos en nuestras pruebas.
Nuestro desarrollador probó esto en Flatsome 3.15.5. El botón se表示ó en las 12 tarjetas de tienda y en la página de producto individual. En esa tienda de prueba, el botón de la tienda se encontraba dentro del área de precio de Flatsome en cada tarjeta. Ahí es donde se adjunta la ubicación Encima del botón Añadir al carrito.
A diferencia de Woostify y Blocksy, Flatsome no recibe estilos de botón específicos del tema. Elige tu ubicación en SaveTo Wishlist > Ajustes > Ubicación y estilos del botón. No hemos probado todas las ubicaciones en Flatsome, así que comprueba la tuya en una página de tienda, una página de producto y un teléfono.
Tener el botón correcto es importante porque la mayoría de los carritos no llegan al pago. Según la investigación de abandono de carritos del Baymard Institute, la tasa media documentada de abandono es del 70,22%, en 50 estudios. Un botón de lista de deseos visible da a esos compradores un lugar donde guardar un producto. Eso te da una manera de recuperar algunas de esas ventas.
¿Una ubicación abarrota tus tarjetas de Flatsome? Puedes ocultar el botón en un tipo de página y mantenerlo en la otra.
Preguntas frecuentes
¿La integración de Flatsome necesita SaveTo Wishlist Pro?
No. El elemento Guardar en la lista de deseos se incluye en el plugin gratuito SaveTo Wishlist Lite, versión 1.1.3 y posteriores. Instala o actualiza el plugin gratuito. El elemento aparece entonces en el grupo Contenido del Constructor UX mientras Flatsome está activo.
¿Por qué mi página de lista de deseos está en blanco después de editarla en UX Builder?
Una página de UX Builder guarda su propio diseño, compuesto por shortcodes del constructor. Si reconstruyes la página sin nuestro elemento, ese diseño no tendrá el shortcode [saveto_wishlist] para mostrar la lista de deseos. Añade el elemento Guardar en Lista de Deseos desde el selector de elementos y luego guarda la página de nuevo.
¿Todavía puedo usar el shortcode de la lista de deseos en una tienda Flatsome?
Sí, en páginas que no editas con UX Builder. El shortcode funciona en el editor de bloques como de costumbre, como muestra nuestra guía de shortcode de lista de deseos. Dentro de un diseño de UX Builder, usa el elemento en su lugar. Ejecuta el mismo shortcode internamente, con un panel de opciones adecuado.
¿Verán mis clientes alguna vez el marcador de posición del constructor?
No. El marcador de posición solo aparece dentro de UX Builder, y solo para los usuarios conectados que pueden editar publicaciones. Todos los que vean la página en vivo, incluyéndote a ti, verán la lista de deseos real.
¿Listo para añadir tu lista de deseos a Flatsome?
Una página de lista de deseos solo vale la pena si realmente se renderiza. En Flatsome, eso se reduce a una elección. Construye la página con el elemento Guardar en Lista de Deseos, no con un shortcode que UX Builder reescribirá.
- Entiende por qué la página se queda en blanco antes de reconstruir nada.
- Añade el elemento Guardar en Lista de Deseos a tu página de lista de deseos en UX Builder.
- Mantenlo fuera de los Bloques UX y enlaza a la página desde tu pie de página en su lugar.
- Realiza las cinco comprobaciones como invitado, cliente y administrador.
Tu lista de deseos de Flatsome está a un elemento de funcionar. Instala o actualiza SaveTo Wishlist Lite y añádelo a tu página de lista de deseos hoy mismo.
