Comment ajouter une vue rapide dans WooCommerce

Souhaitez-vous inclure la fonction d'affichage rapide sur votre site ? Découvrez comment ajouter et personnaliser un bouton d'affichage rapide sur votre boutique WooCommerce .

Dans chaque boutique WooCommerce, les clients peuvent voir des informations détaillées sur les produits sur les pages produits. Cependant, ils ne peuvent pas voir la description, les variantes et les autres informations associées au produit sur la page de la boutique par défaut. Lorsque les acheteurs sont sur la page de la boutique, ils doivent cliquer sur l'image ou le lien du produit pour accéder à la page du produit et 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 à la page de la boutique.

Cependant, vous pouvez ajouter un bouton d'affichage rapide sur la page de la boutique WooCommerce et améliorer 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. Examinons de plus près ce que fait une vue de bouton rapide et comment l'ajouter à votre boutique .

Qu'est-ce qu'un bouton d'affichage rapide ?

Un bouton d'affichage 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 produit de chaque article qui les intéresse. De cette façon, les clients peuvent naviguer à travers les produits de la page de la boutique en améliorant la expérience d'achat. Lorsque l'utilisateur clique sur le bouton de vue rapide, une fenêtre contextuelle s'ouvre et affiche 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 d'affichage rapide à la page de la boutique WooCommerce

Le moyen le plus simple d'ajouter un bouton d'affichage rapide à votre boutique consiste à utiliser un plugin. Pour cette démo, nous utiliserons Direct Checkout, l'un des meilleurs plugins de paiement pour WooCommerce. Même si Direct Checkout a une version gratuite, vous aurez besoin de la version premium pour ajouter des boutons d'affichage rapide. Vous pouvez choisir l'un des 3 plans premium qui commencent à seulement 19 USD (paiement unique).

Installer et activer Direct Checkout

Tout d'abord, installez Direct Checkout. Vous devez obtenir la version gratuite à partir d'ici et l'une des versions premium à partir de ce lien. Gardez à l'esprit que vous devez installer et activer à la fois la version gratuite et la version premium du plugin pour déverrouiller la fonction d'affichage rapide. Après avoir installé les deux, accédez à WooCommerce> Paiement direct> Archives et activez l'option Ajouter un bouton d'affichage rapide . Dans cette section, vous pouvez également remplacer le texte par défaut du bouton Ajouter au panier. Notez que cela n'affectera en rien le comportement du bouton d'affichage rapide. C'est ça! Vous venez d' ajouter un bouton de vue rapide à votre page de boutique WooCommerce ! Voici à quoi ressemble le bouton si vous utilisez le thème StoreFront : Et lorsque vous cliquez sur le bouton de vue rapide, la fenêtre contextuelle modale apparaîtra et ressemblera à ceci : Notez que toutes les informations sur le produit sont affichées dans la fenêtre contextuelle de la vue rapide. Même le bouton Ajouter au panier est là, ce qui permet aux clients d'ajouter des produits à leur panier directement depuis la fenêtre contextuelle. Maintenant, allons un peu plus loin et voyons comment personnaliser le bouton d'affichage rapide avec un peu de CSS.

Comment personnaliser la vue rapide de WooCommerce

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

Notez que vous devez coller les codes suivants dans le fichier style.css du thème enfant ou dans la case CSS supplémentaire du personnalisateur de thème. Si vous n'avez pas de thème enfant, vous pouvez consulter cet article 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 de fond

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

Modifier la couleur de l'icône

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

Ajouter des bordures arrondies

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

Utiliser 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 un effet de survol

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

3.2) Modifier la fenêtre contextuelle modale de la vue rapide

Voyons maintenant du code pour personnaliser la fenêtre contextuelle modale de la vue rapide.

Changer la couleur de fond

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

Masquer la méta du produit

#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;
} #qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} Nous venons d'examiner différents scripts pour personnaliser différents aspects du bouton d'affichage rapide dans WooCommerce. Si vous souhaitez en savoir plus sur ce que vous pouvez faire avec CSS, consultez ce guide.

Exemples de scripts CSS

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

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

Utiliser 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 fiche produit de chaque article qu'ils souhaitent voir. Le moyen le plus simple et le plus pratique d'ajouter un bouton d'affichage rapide dans WooCommerce consiste à utiliser le plugin Direct Checkout. Cet outil vous permet d'ajouter le bouton de vue rapide sur la page de la boutique en quelques clics. Ensuite, si vous voulez 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 d'affichage rapide dans votre boutique ? Avez-vous eu des difficultés à suivre notre guide ? Faites-le nous savoir dans la section des commentaires ci-dessous et nous ferons de notre mieux pour vous aider.

Pour plus d'informations sur la personnalisation de votre boutique, nous vous recommandons de consulter les guides suivants :

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