___ _TAG_8___
 

"Comment

 

 

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 affichera 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 forfaits premium qui commencent à seulement 19 USD (paiement unique).

Installation et activation directe

Installez d’abord de 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ébloquer la fonction de vue rapide. Après avoir installé les deux, allez à WOOCommerce> Découvrez direct> Archives et activez l’option Ajouter le bouton Affichage rapide. 2 Comment ajouter un bouton de vue rapide sur la page de la boutique

Comment personnaliser la vue rapide WooCommerce

Notez que vous devez coller les codes suivants

3.1 Modifier le bouton de vue rapide

Modifier la largeur du bouton de vue rapide

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

Modifier la couleur d’arrière-plan

li.product .qlwcdc_quick_view.button{
arrière-plan : #79b0f7;
}

Modifier la couleur de l’icône

li.product .qlwcdc_quick_view.button{
couleur:rouge;
}

Ajouter les bordures arrondies

li.product .qlwcdc_quick_view.button{
rayon de bordure : 5 px ;
}

Utiliser une image comme bouton

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

Remplacer l’icône

li.product .qlwcdc_quick_view.button{
visibilité : masquée ;
}
li.product .qlwcdc_quick_view.button:avant{
visibilité : visible ;
contenu : "texte d'affichage rapide" ;
couleur:blanc;
arrière-plan:noir;
remplissage : 10 px ;
}

Ajouter l’effet de survol

li.product .qlwcdc_quick_view.button:hover{
couleur:noir;
arrière-plan:jaune;
}

3.2) Modifier la fenêtre contextuelle modale rapide

Maintenant, voyez 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{
arrière-plan :vertjaune;
}

Masquer le produit Meta

#qlwcdc_quick_view_modal>div>di v>div.modal-body>div>div>div .summary .product_meta{
affichage : aucun ;
}

Masquer la quantité et ajouter au panier

#qlwcdc_quick_view_modal>div>div>div.modal-body___HT ML_ENTITY_312___div>div>div>div.summary>form.cart{
affichage : aucun ;
} Nous venons de jeter un œil à différents scripts pour personnaliser différents aspects du bouton de vue rapide

Échantillon de scripts CSS

Maintenant que vous avez appris à ajouter et à faire des personnalisations de base à la vue rapide

Bouton cercle avec icône personnalisée

li.product .qlwcdc_quick_view.button{
visibilité : masquée ;
}
li.product .qlwcdc_quick_view.button:avant{
visibilité : visible ;
style de police : normal ;
font-family : "Font Awesome 5 gratuit" ;
contenu : "f002";
couleur:blanc;
arrière-plan :noir ;
remplissage : 15 px ;
rayon de bordure : 50 % ;
}

Bouton de texte stylé

li.product .qlwcdc_quick_view.button{
visibilité : masquée ;
}
li.product .qlwcdc_quick_view.button:avant{
visibilité : visible ;
style de police : normal ;
contenu : "afficher" ;
couleur:noir;
arrière-plan :#eeeeee;
remplissage : 8 px 18 px ;
bordure : 3 px marron uni ;
rayon de bordure : 15 px 3 px ;
}

Utilisation d’une image comme bouton

li.product > a.button.add_to_cart_button{
bas : 30 px ;
position : relative ;
}
li.product .qlwcdc_quick_view.button{
arrière-plan:transparent;
largeur : 85 px ;
contenu:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}

Conclusion

Connaissez-vous d’autres moyens d’inclure un bouton de vue rapide

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
  • Modifier la page de paiement WooCommerce