Voulez-vous inclure la fonction de vue rapide de votre site? Apprendre Comment ajouter et personnaliser un bouton de vue rapide sur votre boutique WooCommerce.

Dans chaque boutique WooCommerce, les clients peuvent voir des informations détaillées sur les produits des pages de produits. Cependant, ils ne peuvent pas voir la description, les variations et autres informations jointes au produit sur la page de l'atelier par défaut. Lorsque les acheteurs sont sur la page de la boutique, ils doivent cliquer sur l'image du produit ou le lien pour accéder à la page du produit pour voir plus d'informations sur ce produit. Ce n'est pas idéal car cela ajoute une étape au processus d'achat et si les clients veulent continuer à parcourir vos produits, ils doivent retourner sur la page de la boutique.

Cependant, vous pouvez Ajoutez un bouton de vue rapide sur la page WooCommerce Shop et améliorez l'expérience des utilisateurs. De cette façon, les acheteurs pourront voir Toutes les informations sur un produit sans quitter la page de la boutique. Voyons de plus près ce que fait une vue de bouton rapide et comment l'ajouter à votre magasin.

Qu'est-ce qu'un bouton de vue rapide?

Un bouton de vue rapide permet aux clients de voir les détails d'un produit directement sur la page de la boutique Et sans avoir à ouvrir la page du produit de chaque article qui les intéresse. De cette façon, les acheteurs peuvent naviguer à travers les produits à partir de la page de la boutique améliorant l'expérience d'achat. Lorsque l'utilisateur clique sur le bouton Affichage rapide, une fenêtre contextuelle s'ouvrira afficher toutes les informations pertinentes sur le produit sur la même page. Il n'est pas nécessaire de recharger la page de la boutique ou de rediriger les utilisateurs vers une autre page.

Comment ajouter un bouton de vue rapide à la page WooCommerce Shop

La façon la plus simple d'ajouter un bouton de vue rapide à votre magasin est d'utiliser un plugin. Pour cette démo, nous utiliserons Direct Checkout, l'un des meilleurs plugins de paiement pour WooCommerce. Même si la caisse directe a une version gratuite, vous aurez besoin de la version premium pour ajouter des boutons de vue rapides. Vous pouvez choisir l'un des 3 plans premium qui commencent à seulement 19 USD (paiement unique).

Installation et activation directe

Installez d'abord la caisse directe. Vous devez obtenir la version gratuite d'ici et l'une des versions premium de ce lien. Gardez à l'esprit que vous devez Installer et activer à la fois la version gratuite et premium du plugin pour déverrouiller la fonction de vue rapide. Après avoir installé les deux, allez à WOOCommerce> Découvrez direct> Archives et activer le Ajouter le bouton Affichage rapide option. Dans cette section, vous pouvez également remplacer le texte par défaut du bouton Ajouter au panier. Notez que cela n'affectera en aucune façon le comportement du bouton de vue rapide. C'est ça! Tu as juste Ajout d'un bouton de vue rapide à votre page WooCommerce! C'est à quoi ressemble le bouton si vous utilisez le thème de la devanture: Et lorsque vous cliquez sur le bouton de vue rapide, la fenêtre contextuelle modale apparaît et ressemblera à ceci: Notez que toutes les informations sur le produit s'affichent dans la fenêtre contextuelle rapide. Même le bouton Ajouter au panier est là, ce qui permet aux clients d'ajouter des produits à leurs chariots directement à partir de la fenêtre contextuelle. Maintenant, allons plus loin et voyons comment personnaliser le bouton de vue rapide avec un peu de CSS.

Comment personnaliser la vue rapide WooCommerce

Dans cette section, vous apprendrez Comment personnaliser à la fois le bouton de vue rapide et la fenêtre contextuelle modale de vue rapide en utilisant un peu de CSS. Les scripts CSS sont très utiles pour de nombreuses tâches, donc même si vous êtes un débutant, cela vaut la peine d'apprendre quelques concepts CSS de base. Maintenant, regardons comment personnaliser différents éléments du bouton de vue rapide et de la fenêtre contextuelle modale de vue rapide.

Notez que vous devez coller les codes suivants dans le style.css Fichier du thème de l'enfant ou de la boîte CSS supplémentaire du personnalisateur de thème. Si vous n'avez pas de thème enfant, vous pouvez consulter ce message pour en créer un ou utiliser l'un de ces plugins.

3.1 Modifier le bouton de vue rapide

Modifier la largeur du bouton de vue rapide

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

Modifier la couleur d'arrière-plan

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

Modifier la couleur de l'icône

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

Ajouter les bordures arrondies

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

Utilisez une image comme bouton

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

Remplacer l'icône par du texte

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

Ajouter l'effet de survol

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

3.2) Modifier la fenêtre contextuelle modale rapide

Maintenant, voyons un code pour personnaliser la fenêtre contextuelle modale de vue rapide.

Changer la couleur de l'arrière-plan

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

Masquer le produit Meta

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

Masquer la quantité et ajouter au panier

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} Nous venons de jeter un œil à différents scripts pour personnaliser différents aspects du bouton de vue rapide dans WooCommerce. Si vous voulez en savoir plus sur ce que vous pouvez faire avec CSS, consultez ce guide.

Échantillon de scripts CSS

Maintenant que vous avez appris à ajouter et à faire des personnalisations de base à la vue rapide dans WooCommerce, allons plus loin. Vous trouverez ci-dessous trois exemples pour modifier le bouton de vue rapide et ajouter un peu de saveur à votre page de boutique.

Bouton cercle avec icône personnalisée

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

Bouton de texte stylé

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

Utilisation d'une image comme bouton

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

Conclusion

Dans l'ensemble, en ajoutant Un bouton de vue rapide, vous améliorerez l'expérience d'achat de vos clients. Ils pourront Voir les principaux détails du produit directement sur la page de la boutique sans avoir à ouvrir la page du produit de chaque article qu'ils souhaitent voir. Le moyen le plus simple et le plus pratique d'ajouter un bouton de vue rapide dans WooCommerce consiste à utiliser le plugin à la caisse directe. Cet outil vous permet d'ajouter le bouton Affichage rapide sur la page de la boutique en quelques clics. Ensuite, si vous souhaitez aller plus loin et personnaliser à la fois le bouton et la fenêtre contextuelle, vous pouvez utiliser un peu de CSS.

Connaissez-vous d'autres moyens d'inclure un bouton de vue rapide dans votre magasin? Avez-vous eu des problèmes après notre guide? Faites-nous savoir dans la section des commentaires ci-dessous et nous ferons de notre mieux pour vous aider.

Pour plus d'informations sur la façon de personnaliser votre magasin, nous vous recommandons de consulter les guides suivants:

• Comment personnaliser la page WooCommerce Shop
• Comment personnaliser le bouton Ajouter au panier dans WooCommerce
• Modifier la page de paiement WooCommerce