Vista rápida de productos emergentes con WoodMart

La función de vista rápida permite a los compradores ver los detalles del producto directamente en la página de listado de productos sin tener que saltar a una página diferente.WoodMart viene con esta característica sin necesidad de instalar un plugin adicional, y la configuración es muy simple, que es adecuado paraSitio de comercio electrónicoMejorar la eficacia de la búsqueda de productos.

Imagen [1]-Vista rápida de productos con WoodMart

Activar la vista rápida

Vaya a Backstage y haga clic en WoodMart → Configuración del tema → Tienda.

Busque la opción "Vista rápida" y marque "Activar".

También puedes ajustar cómo se muestran las ventanas emergentes de Vista Rápida:

  • Estilo de presentación: horizontal (imagen a la izquierda, texto a la derecha) o vertical (arriba y abajo)
  • Mostrar información: incluye descripción del producto, precio, selección de variantes, valoración, estado de las existencias, etc.
  • Estilo de imagen: si se activa la rotación de miniaturas

Haga clic en Guardar cuando haya realizado los ajustes y actualice la página para que surtan efecto.

Imagen [2] - Efecto emergente de vista rápida de productos con WoodMart

Si su lista de productos utiliza la función Elementor tal vez WPBakery construir, los botones se integran igualmente de forma automática sin necesidad de una acción separada.

Modificar el estilo y el texto de los botones

Vaya a Configuración del tema → Estilos y colores → Botones.

Imagen [3] - Efecto emergente de vista rápida de productos con WoodMart

Desplácese hacia abajo hasta encontrar la regla de a?adir y seleccione Vista rápida A?adir a la cesta:

Imagen [4] - Efecto emergente de vista rápida de productos con WoodMart
  • Se puede modificar el color de los botones, el borde y el tama?o de la letra.
  • Cambie el texto del botón, por ejemplo, cambie "Vista rápida" por "Haga clic en mí para obtener una vista previa" o "Detalles del producto".
  • Soporte para subir iconos personalizados o utilizar fuentes de iconos (por ejemplo, Font Awesome).
Imagen [5] - Efecto emergente de vista rápida de productos con WoodMart

Si utiliza Elementor Loop Builder para personalizar la lista de productos, se recomienda unificar el nombre de la clase del botón, por ejemplo .quick-view-buttony luego en el CSS personalizado del tema o CSS personalizado de Elementor en un estilo uniforme, por ejemplo:

.quick-view-button {
  color de fondo: #111;
  color: #fff;
  
  border-radius: 4px; }
}
Imagen [6] - Efecto emergente de vista rápida de productos con WoodMart

Optimizar la visualización móvil

WoodMart ha hecho que la ventana emergente Vista rápidareceptivoAdaptado, el móvil aparecerá a pantalla completa.

Esto se puede optimizar aún más en CSS personalizado:

.quick-view-popup .product-summary {
  font-size: 16px;
}
@media(max-width:768px){
  .quick-view-popup .product-image-gallery {
    display: none; /* Ocultar galería de imágenes para una carga más rápida */
  }
}

Además, elmóvilSe recomienda mantener sólo la información principal, como la imagen principal, el precio y el botón de compra, y reducir el contenido que distraiga, elVelocidad de carga mejorada.

Vía rápida

  • Las ventanas emergentes no se muestran: comprueba si están activadasPlugin de cachéSi quieres probarlo, borra la caché y vuelve a probarlo.
  • Estilo incorrecto: compruebe si el CSS está personalizado o si el tema está actualizado.
  • Fallo de carga de la variante: asegúrese de que la configuración de la variante está completa y de que no faltan atributos ni imágenes.

corto

WoodMart La función de vista rápida no requiere la instalación de un plugin y viene con una interfaz de configuración y controles de estilo que pueden mejorar rápidamente la interactividad de las páginas de listado de productos. Con un buen estilo y optimización para móviles, también puede mejorar aún más la eficacia de la conversión. Se recomienda activar esta función en todos los productos para facilitar a los compradores la navegación, la comparación y la realización de pedidos.

Actualizaciones recientes


Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
? Declaración de reproducción
Este artículo ha sido escrito por Little Lin
EL FIN
Si le gusta, apóyela.
felicitaciones1258 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios