SaveTo Wishlist para WooCommerce

Información y actualizaciones

Blog de SaveTo Wishlist

Guías y recursos de WordPress para aumentar las ventas con SaveTo Wishlist

¡Nueva función! Opciones de icono para el botón de WooCommerce Wishlist, además de carga de imágenes personalizadas

¡Nueva función! Opciones de icono para el botón de WooCommerce Wishlist, además de carga de imágenes personalizadas

Un corazón tiene sentido en una tienda de regalos. Tiene mucho menos sentido en una tienda que vende sensores industriales, repuestos o equipo de seguridad.

Durante mucho tiempo, el icono de la lista de deseos en SaveTo Wishlist Lite fue un corazón codificado. No había configuración para ello. Si un corazón chocaba con tu marca, tu única opción era CSS personalizado o una anulación de PHP.

Eso cambió en la v1.1.2. El icono del botón de la lista de deseos de WooCommerce es ahora una configuración adecuada. Puedes elegir Corazón, Estrella, Marcapáginas, Signo más o tu propia imagen subida. Mejor aún, lo configuras por separado para tus páginas de producto, páginas de tienda y página de carrito.

¡Lee para ver qué te espera en tu plugin gratuito SaveTo Wishlist Lite hoy mismo!

Saltar a:


Un icono de botón de lista de deseos que coincide con tu tienda

El botón de tu lista de deseos ahora puede llevar el icono que mejor se adapte a tu tienda. La configuración se llama Icono del botón y se encuentra en SaveTo Wishlist > Settings > Button Placement & Styles.

Cada tipo de página tiene su propia copia del campo. Eso significa que tu página de producto y tus archivos de tienda no tienen por qué coincidir.

Lo que necesitas saber:

  • Cinco opciones, el corazón sigue siendo el primero: Corazón, Estrella, Marcapáginas, Signo más e Imagen personalizada. El corazón sigue siendo el predeterminado, por lo que nada en tu tienda cambia hasta que lo modifiques.
  • Configurado por tipo de página: Página de producto, Página de tienda y Página de carrito tienen cada una su propio icono. Un signo más neutral en los archivos de tienda abarrotados y un marcapáginas en las páginas de producto es una combinación válida.
  • Solo forma, no diseño: El campo separado Tipo de botón todavía establece el diseño y el grosor. Cubre los tratamientos de Solo icono, Icono y texto, píldora, sólido y minimalista. Icono del botón cambia el glifo dentro del tipo que hayas elegido.
  • El tamaño tiene su propio campo: Tamaño del icono del botón va de 12px a 40px, con 20px como predeterminado. Se aplica a todas las formas, incluida una imagen subida.
  • Los colores siguen las formas integradas: el Color del icono del botón y el Color del icono del botón al pasar el ratón se aplican a los cuatro glifos. El color al pasar el ratón tiene un valor predeterminado de rojo, #DC2626.

Esta es una de las piezas de personalización de la lista de deseos más pequeñas que hemos lanzado, y provino directamente de un cliente. Tenían una tienda de electrónica y robótica, donde un corazón se leía como "me gusta" en lugar de "guardar para más tarde". Además, el icono se aplica a todos los compradores, incluidos los invitados que guardan sin cuenta.


Cómo cambiar el icono del botón de tu lista de deseos de WooCommerce

Hay un paso que confunde a la gente, así que lo pondré al principio. Los campos de icono solo aparecen una vez que el Modo de configuración se establece en Configuración personalizada.

En el modo Usar preajustes o Predeterminado del tema, todos los campos de estilo se ocultan, incluido el icono del botón. Eso es deliberado, ya que esos dos modos delegan el estilo a un preajuste o a tu tema. Aun así, significa que la configuración parece faltar si la buscas en el modo incorrecto.

Aquí está la ruta completa:

  1. Desde tu panel de WordPress, ve a Guardar en lista de deseos > Ajustes > Colocación y estilos del botón.
  2. Elige el tipo de página que deseas cambiar: Página de producto, Página de tienda o Página de carrito.
  3. Establece el Modo de configuración en Configuración personalizada. Los campos de estilo aparecen debajo.
  4. Busca Icono del botón y elige tu forma en el menú desplegable.
  5. Ajusta el Tamaño del icono del botón si la nueva forma se ve pequeña, luego guarda tus cambios.

La vista previa del botón en vivo se encuentra junto a estos campos, para que puedas ver cada cambio sin desplazarte. Luego, repite los pasos para cualquier otro tipo de página que desees diferenciar. Es un cambio menor que el bloque de lista de deseos que lanzamos en la v1.0.9, pero lo tocarás con más frecuencia.

Nada aquí afecta la colocación. En cambio, mover o ocultar el botón es el menú desplegable Colocación del botón en el mismo panel. Nuestro tutorial de colocación y estilo cubre ese lado con más detalle. Si creas páginas visualmente, también hemos documentado la ruta del botón de lista de deseos de Elementor.


Subir tu propio icono con Imagen personalizada

Puedes proporcionar tu propia imagen cuando ninguna de las cuatro formas se ajuste. Al elegir Imagen personalizada, se revela un cargador de Icono de botón personalizado directamente debajo del menú desplegable.

Un comportamiento que vale la pena conocer antes de empezar: seleccionar Imagen personalizada por sí sola no cambia nada. En cambio, el botón sigue mostrando un corazón hasta que realmente elijas una imagen.

Lo que necesitas saber:

  • Los campos de color desaparecen: Elegir Imagen personalizada oculta tanto el Color del icono del botón como el Color del icono del botón al pasar el ratón. El color no puede alcanzar una imagen subida, y un control que visiblemente no hace nada se lee como un error.
  • Una imagen cubre ambos estados: Tu carga se muestra en el estado de reposo y al pasar el ratón. El cambio de dos tonos que obtienes con las formas integradas no se aplica aquí.
  • Se mantienen las proporciones: Una carga no cuadrada no se aplasta en un cuadrado. El tamaño del icono del botón todavía establece la escala.
  • La imagen se trata como decorativa: Se muestra con un atributo alt vacío a propósito. El botón ya tiene su propio nombre accesible para lectores de pantalla.
  • Eliminar el archivo tiene una consecuencia: Si más tarde eliminas ese adjunto de tu biblioteca de medios, el cargador se leerá como vacío de nuevo. El botón volverá a ser un corazón.

Ese último punto es el que señalaría antes de subir el archivo. Aun así, las limpiezas de la biblioteca de medios son comunes, así que guarda tu archivo de icono en un lugar donde no lo elimines por accidente.


¿Qué icono deberías elegir?

Guardar es un comportamiento de compra generalizado, no uno de nicho. En el estudio del Baymard Institute sobre 1.193 compradores, el 21% dijo que confía en las funciones de guardar. Eso hace que la forma de tu botón merezca un minuto de reflexión.

Los iconos también transmiten significado antes de que alguien lea la etiqueta. Los compradores captan lo que significa cada forma de otras tiendas que utilizan. Como resultado, tu elección establece una expectativa sobre lo que hace el botón.

Diagrama de espectro que coloca los iconos de corazón, estrella, marcapáginas y signo más de la lista de deseos de emocional a neutral, con los tipos de tienda que cada uno se adapta y la imagen personalizada que se muestra por separado.
Cada icono establece una expectativa diferente, desde la lectura emocional de un corazón hasta el signo más neutro (clic para ampliar).

El corazón encaja con regalos, moda y estilo de vida

El corazón es nuestro valor predeterminado, y es una forma que los compradores reconocen de otras funciones de lista de deseos. Transmite calidez, lo que se adapta a tiendas donde desear algo es parte del atractivo.

En la práctica, las tiendas de regalos, la ropa, la joyería y la decoración del hogar encajan cómodamente aquí. También es la opción correcta si los clientes crean listas para compartir con otras personas.

La estrella se lee como favorito en lugar de amor

Una estrella dice “vale la pena volver a por ello” sin el afecto. Es familiar por las calificaciones y las listas de favoritos, por lo que el significado se entiende rápidamente.

En la práctica, funciona bien para catálogos donde la gente compara opciones a lo largo de varias visitas. Mientras tanto, los muebles, electrodomésticos y electrónica son los casos típicos.

El marcapáginas dice guardar para más tarde

El marcapáginas es el más literal de los cuatro. Se lee como “guarda esto donde pueda encontrarlo”, que es exactamente lo que una lista de deseos hace para la mayoría de los compradores.

Así que elígelo cuando tus listas sean documentos de trabajo en lugar de listas de regalos. Por el contrario, los proveedores comerciales y los catálogos técnicos largos suelen ser adecuados para él.

El signo más se mantiene neutro para tiendas B2B y técnicas

El signo más no transmite ninguna emoción. Se lee como un simple “añadir”. Eso es a menudo lo que quieres cuando el comprador está comprando para una empresa en lugar de para sí mismo.

Este es con el que empezaría para catálogos de venta al por mayor, industriales y de repuestos. También es la forma más segura si tus botones están muy juntos en una cuadrícula de productos densa.

Imagen personalizada cuando tu marca tiene su propio distintivo

Una carga tiene sentido cuando ya tienes un icono establecido en tu sistema de diseño. También es la ruta hacia una forma que no proporcionamos, como una bolsa, una etiqueta o una llave inglesa.

Ten en cuenta que pierdes los controles de color y de pasar el ratón por encima cuando eliges esta opción. Así que integra los colores en el propio archivo antes de subirlo.

Si no estás seguro, prueba la forma en el tipo de página donde obtienes más guardados. La guía completa de listas de deseos cubre de dónde suelen proceder esos guardados.


Preguntas frecuentes

¿Cambiar el icono afectará a las listas de deseos que mis clientes ya han guardado?

No. El icono es solo de presentación, por lo que las listas guardadas y su contenido permanecen exactamente como están. Tus clientes verán una forma diferente en el botón la próxima vez que visiten.

¿Puedo usar un icono diferente en mi página de tienda que en mis páginas de producto?

Sí. La página de producto, la página de tienda y la página de carrito tienen cada una su propia configuración de icono de botón. Necesitarás configurar el modo de configuración en Ajustes personalizados en cada tipo de página que quieras cambiar.

¿Por qué no puedo ver la configuración del icono del botón?

Es casi seguro que el Modo de configuración está establecido en Usar preajustes o Predeterminado del tema. Ambos modos ocultan los campos de estilo, ya que el estilo proviene del preajuste o de tu tema. Cambia ese tipo de página a Configuración personalizada y aparecerá el menú desplegable del icono del botón.

¿Necesito un plan de pago para cambiar el icono?

No. Icono del botón, Imagen personalizada y Tamaño del icono del botón se incluyen en el plugin Lite gratuito. Actualiza a la versión 1.1.2 o posterior y la configuración estará allí.


Conclusión

Eso cubre la configuración del icono. Puedes elegir el tuyo ahora mismo actualizando SaveTo Wishlist Lite desde tu panel de WordPress.

Para recapitular, este anuncio exploró:

Mi opinión sincera sobre esto: no le des demasiadas vueltas. En su lugar, haz que el icono coincida con la forma en que tus clientes usan sus listas y luego déjalo en paz. Una página de lista de deseos que se sienta nativa de tu tienda supera a un icono ingenioso en todo momento.

¿Necesitas ayuda con los controles del botón, o quieres ver qué añaden los planes de pago? Consulta nuestra base de conocimientos, explora la comparación de planes o ponte en contacto con nuestro equipo de soporte.

Si aún no ha probado las listas de deseos en su tienda, descargue hoy mismo la versión gratuita de SaveTo Wishlist.

avatar de autor
Michael Logarta

Obtén el mejor plugin de listas de deseos de WooCommerce

Crea funcionalidad de lista de deseos y haz crecer tu tienda de forma rápida y sencilla.
Consigue SaveTo Wishlist Ahora

Compartir artículo

Completa tu compra