Cómo agregar una vista rápida en WooCommerce

¿Desea incluir la función de vista rápida en su sitio? Aprenda a agregar y personalizar un botón de vista rápida en su tienda WooCommerce .

En cada tienda de WooCommerce, los clientes pueden ver información detallada sobre los productos en las páginas de productos. Sin embargo, no pueden ver la descripción, las variaciones y otra información adjunta al producto en la página de la tienda predeterminada. Cuando los compradores están en la página de la tienda, deben hacer clic en la imagen del producto o en el enlace para ir a la página del producto y ver más información sobre ese producto. Esto no es lo ideal porque añade un paso al proceso de compra y si los clientes quieren seguir navegando por tus productos, tienen que volver a la página de la tienda.

Sin embargo, puede agregar un botón de vista rápida en la página de la tienda de WooCommerce y mejorar la experiencia de los usuarios . De esa forma, los compradores podrán ver toda la información sobre un producto sin salir de la página de la tienda. Echemos un vistazo más de cerca a lo que hace una vista de botón rápido y cómo agregarlo a su tienda .

¿Qué es un botón de vista rápida?

Un botón de vista rápida permite a los clientes ver los detalles de un producto directamente en la página de la tienda y sin tener que abrir la página del producto de cada artículo que les interesa. De esta manera, los compradores pueden navegar a través de los productos desde la página de la tienda mejorando la experiencia de compra. Cuando el usuario hace clic en el botón de vista rápida, se abrirá una ventana emergente que muestra toda la información relevante sobre el producto en la misma página. No es necesario volver a cargar la página de la tienda ni redirigir a los usuarios a otra página.

Cómo agregar un botón de vista rápida a la página de la tienda de WooCommerce

La forma más fácil de agregar un botón de vista rápida a su tienda es usar un complemento. Para esta demostración, usaremos Direct Checkout, uno de los mejores complementos de pago para WooCommerce que existen. Aunque Direct Checkout tiene una versión gratuita, necesitará la versión premium para agregar botones de vista rápida. Puede elegir cualquiera de los 3 planes premium que comienzan en solo 19 USD (pago único).

Instalación y activación de Direct Checkout

Primero, instale Direct Checkout. Debe obtener la versión gratuita desde aquí y una de las versiones premium desde este enlace. Tenga en cuenta que debe instalar y activar tanto la versión gratuita como la premium del complemento para desbloquear la función de vista rápida. Después de instalar ambos, vaya a WooCommerce > Pago directo > Archivos y active la opción Agregar botón de vista rápida . En esta sección, también puede reemplazar el texto predeterminado del botón Agregar al carrito. Tenga en cuenta que esto no afectará el comportamiento del botón de vista rápida de ninguna manera. ¡Eso es! ¡Acabas de agregar un botón de vista rápida a tu página de tienda de WooCommerce ! Así es como se ve el botón si está usando el tema de StoreFront: Y cuando haga clic en el botón de vista rápida, aparecerá la ventana emergente modal y se verá similar a esto: Tenga en cuenta que toda la información del producto se muestra en la ventana emergente de vista rápida. Incluso el botón Agregar al carrito está ahí, lo que permite a los clientes agregar productos a sus carritos directamente desde la ventana emergente. Ahora, demos un paso más y veamos cómo personalizar el botón de vista rápida con un poco de CSS.

Cómo personalizar la vista rápida de WooCommerce

En esta sección, aprenderá a personalizar tanto el botón de vista rápida como la ventana emergente modal de vista rápida usando un poco de CSS . Los scripts CSS son muy útiles para muchas tareas, por lo que incluso si es un principiante, vale la pena aprender algunos conceptos básicos de CSS. Ahora, echemos un vistazo a cómo personalizar diferentes elementos tanto del botón de vista rápida como de la ventana emergente modal de vista rápida.

Tenga en cuenta que debe pegar los siguientes códigos en el archivo style.css del tema secundario o en el cuadro CSS adicional del personalizador de temas. Si no tiene un tema secundario, puede consultar esta publicación para crear uno o usar uno de estos complementos.

3.1 Editar el botón de vista rápida

Cambiar el ancho del botón de vista rápida

li.product .qlwcdc_quick_view.button{
width: 40%;
}

Editar el color de fondo

li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}

Editar el color del icono

li.product .qlwcdc_quick_view.button{
color:red;
}

Agregar bordes redondeados

li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}

Usar una imagen como botón

li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}

Reemplazar icono con texto

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}

Añadir efecto de desplazamiento

li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}

3.2) Edite la ventana emergente modal de vista rápida

Ahora, veamos un poco de código para personalizar la ventana emergente modal de vista rápida.

Cambiar el color de fondo

#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}

Ocultar meta del producto

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}

Ocultar cantidad y añadir al carrito

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} #qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} Acabamos de echar un vistazo a diferentes scripts para personalizar diferentes aspectos del botón de vista rápida en WooCommerce. Si desea obtener más información sobre lo que puede hacer con CSS, consulte esta guía.

Ejemplos de secuencias de comandos CSS

Ahora que ha aprendido cómo agregar y realizar personalizaciones básicas en la vista rápida de WooCommerce, avancemos un paso más. A continuación, encontrará tres ejemplos para editar el botón de vista rápida y agregar un poco de sabor a la página de su tienda.

Botón circular con icono personalizado

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}

Botón de texto con estilo

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}

Usar una imagen como botón

li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}

Conclusión

En resumen, al agregar un botón de vista rápida, mejorará la experiencia de compra de sus clientes. Podrán ver los detalles principales del producto directamente en la página de la tienda sin tener que abrir la página del producto de cada artículo que quieran ver. La forma más fácil y conveniente de agregar un botón de vista rápida en WooCommerce es usar el complemento Pago directo. Esta herramienta le permite agregar el botón de vista rápida en la página de la tienda con unos pocos clics. Luego, si desea ir un paso más allá y personalizar tanto el botón como la ventana emergente, puede usar un poco de CSS.

¿Conoces otras formas de incluir un botón de vista rápida en tu tienda? ¿Tuviste algún problema siguiendo nuestra guía? Háganos saber en la sección de comentarios a continuación y haremos todo lo posible para ayudarlo.

Para obtener más información sobre cómo personalizar su tienda, le recomendamos que consulte las siguientes guías:

• Cómo personalizar la página de la tienda de WooCommerce
• Cómo personalizar el botón Agregar al carrito en WooCommerce
• Edite la página de pago de WooCommerce