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.

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.

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.

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

• 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).

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; }
}

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
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres