Bouton "Ajouter au panier" de WooCommerce avec effet de double bordure

fantaisieWooCommerces."Ajouter au panier"Des boutons plus attrayants ? Essayez un design à double bordure. Ce style donne aux boutons un aspect plus stratifié et améliore l'effet visuel global, ce qui donne aux clients une plus grande envie de cliquer.

Voici un code CSS simple qui permet d'obtenir facilement cet effet de design professionnel. Et ne vous inquiétez pas des problèmes de compatibilité, cette méthode s'affiche parfaitement sur tous les types de téléphones mobiles et d'ordinateurs.

I. Pourquoi utiliser des boutons à double bordure ?

• visuellement bien en vueles boutons : plus visibles que les boutons normaux, ce qui peut inciter l'utilisateur à effectuer l'achat rapidement
• ajouter de la textureLes doubles bordures sont couramment utilisées sur les pages des marques haut de gamme pour donner une impression de qualité.
• Adaptation soupleIl suffit deCSSVous pouvez le faire sans plugin, et cela fonctionne avec tous les thèmes !

II. principes de réalisation

Une double bordure est généralement créée par schéma peut-être ombre de la boîte car HTML et CSS ne prennent pas directement en charge les propriétés des bordures. Méthodes courantes :

• utiliser schéma Mise en place d'une bordure extérieure
• utiliser ombre de la boîte Générer un effet d'ombre sur la bordure extérieure
• utiliser Pseudo-éléments ::before / ::after Création d'une deuxième couche de bordures

III. méthodes de mise en œuvre du code

suivants "Bouton "Ajouter au panier Par exemple, le thème WooCommerce par défaut utilise l'élément .single_add_to_cart_button Classe.

Méthode 1 : Utiliser les contours pour obtenir une double bordure

.woocommerce button.single_add_to_cart_button {
    border : 2px solid #0073aa ; /* inner border */
    outline : 4px solid #ffffff ; /* bordure extérieure */
    outline-offset : -6px ; /* rapprocher la bordure extérieure du bouton */
    border-radius : 4px ; /* bordure extérieure
}

Explication :

• frontière Définir la largeur et la couleur de la bordure intérieure
• schéma Définir la largeur et la couleur de la bordure extérieure
• décalage des contours En passant en négatif, le bord extérieur est resserré sur le bord intérieur, ce qui crée un effet de double couche.

Méthode 2 : Double bordure à l'aide de l'ombre de la boîte

.woocommerce button.single_add_to_cart_button {
    box-shadow : 0 0 0 4px #ffffff ; /* bordure intérieure */
    box-shadow : 0 0 0 4px #ffffff ; /* bordure extérieure */
    box-shadow : 0 0 0 4px #ffffff ; /* bordure extérieure */ border-radius : 4px ;
}

Explication :

• ombre de la boîte (utilisé comme expression nominale) 0 0 0 0 4px signifie qu'il n'y a pas de décalage ni de flou, seule l'ombre extérieure de 4px de couleur unie est ajoutée, c'est-à-dire la deuxième couche de la bordure.

Méthode 3 : Utiliser des pseudo-éléments pour créer une double bordure (plus souple)

.woocommerce button.single_add_to_cart_button {
    position : relative ; border : 2px solid #0073aa ; /* inner border */
    border : 2px solid #0073aa ; /* inner border */
    border-radius : 4px ;
    z-index : 1 ;
}

.woocommerce button.single_add_to_cart_button::after {
    content : "" ;
    position : absolute ; top : -4px ; } .woocommerce button.
    top : -4px ;
    left : -4px ;
    right : -4px ;
    bottom : -4px ; border : 2px solid #ffffff ; /* outer border
    border : 2px solid #ffffff ; /* bordure extérieure */
    border-radius : 6px ; /* bordure extérieure arrondie légèrement plus grande que la bordure intérieure */
    z-index : -1 ;
}

Explication :

• utiliser ::après Générer un cadre extérieur
• faire passer (un projet de loi, une inspection, etc.) haut/gauche/droite/basse Définir la position de la bordure extérieure
• Le rayon des coins arrondis de la couche extérieure est légèrement plus grand que celui de la couche intérieure afin d'assurer l'harmonie visuelle.

IV. localisation des ajouts au code

• WordPress Backend → Apparence → Personnalisation

• Cliquez sur "Extra CSS"

• Collez le code ci-dessus et cliquez sur poste

V. Test et optimisation de la réactivité

Une fois l'installation terminée, testez-la :

• Ordinateur de bureau, tablette, mobile effet d'affichage
• Compatibilité avec les boutons de thème en survol, état actif
• Si la bordure n'est pas alignée, ajustez les valeurs de décalage du contour ou de haut/gauche du pseudo-élément.

VI. questions fréquemment posées

Q1 : Qu'est-ce qui est préférable, le contour ou l'ombre de la boîte ?

• schéma Il ne prend pas beaucoup de place, mais il y en a un peu.navigateur (logiciel)Les résultats peuvent être différents, il faut les tester.
• ombre de la boîte Le rendu est plus stable et vous pouvez ajouter un effet de flou pour obtenir un effet lumineux.

Q2 : La disposition des boutons est perturbée après la modification ?

Ajouter des styles de boutons :

Taille de la boîte : border-box ;

Veillez à ce que les bordures et le rembourrage soient calculés dans les limites de la largeur et de la hauteur totales de l'élément.

rendre un verdict

faire passer (un projet de loi, une inspection, etc.)CSSmettre en placeWooCommerce"Ajouter au panier"L'effet de double bordure des boutons ne renforce pas seulement l'impact visuel, mais améliore également l'impression que l'utilisateur a de la marque. Lors de la conception d'une interface utilisateur de commerce électronique, les détails du style des boutons déterminent la texture de la page et méritent que l'on investisse du temps pour les optimiser.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.