Comment ajouter des bordures uniformes à tous les boutons de WooCommerce en vrac

existent WooCommerce Les styles de boutons dans la conception des boutiques ont un impact direct sur l'expérience de l'utilisateur et les taux de conversion. Les styles de boutons par défaut de nombreux thèmes peuvent ne pas répondre aux exigences de l'unité de la marque ou de l'esthétique de la page. Dans cet article, nous allons expliquer comment ajouter des bordures uniformes à tous les boutons WooCommerce en vrac via CSS pour créer un effet visuel de page plus professionnel et coordonné.

1. pourquoi harmoniser les styles de bordure des boutons

unifierBordures des boutonsLes avantages suivants peuvent être obtenus :

• Renforcer la cohérence de la marque: conserver la même spécification visuelle pour les différentes pages et les boutons fonctionnels
• Renforcer le sens de la hiérarchie visuelleLe design de la bordure fait ressortir davantage les boutons sur la page et incite l'utilisateur à cliquer dessus.
• Réduction des coûts de maintenanceLe réglage unifié permet de ne pas avoir à modifier chaque bouton individuellement par la suite.

2. nom de la classe commune du bouton WooCommerce

en préparation CSS Avant cela, vous devez connaître la classe des boutons courants dans WooCommerce, afin de pouvoir configurer le sélecteur avec précision.

Les classes de boutons les plus courantes sont les suivantes

• .bouton (Classe commune à tous les boutons WooCommerce)
• .add_to_cart_button (bouton Ajouter au panier)
• .checkout-button (Bouton de paiement)
• .single_add_to_cart_button (bouton Ajouter au panier sur la page de détail du produit)
• .woocommerce-cart .button (bouton de la page panier)
• .woocommerce-checkout .button (bouton de la page de paiement)

3. exemple de code CSS pour ajouter une bordure uniforme

Le code suivant peut être utilisé pour WooCommerce Des styles de bordure uniformes sont ajoutés à tous les boutons, y compris la largeur de la bordure, la couleur, les coins arrondis et les effets de survol.

3.1 Exemples de code

/* Ajouter une bordure uniforme à tous les boutons de WooCommerce */
.woocommerce .button, .
.woocommerce-page .button, .
.woocommerce a.button, .
.woocommerce button.button, .
.woocommerce input.button, .
.woocommerce input[type="submit"], .
.woocommerce .add_to_cart_button, .
.woocommerce .checkout-button, .
.woocommerce .single_add_to_cart_button {
    border : 2px solid #0071a1 ; /* définir la largeur et la couleur de la bordure */
    border-radius : 4px ; /* définir des coins arrondis */
    background-color : #ffffff ; /* définit la couleur d'arrière-plan en blanc, peut être ajustée selon les besoins */
    color : #0071a1 ; /* définir la couleur de la police */
    padding : 10px 20px ; /* fixer la marge intérieure pour s'assurer que les boutons ont la même taille */
    transition : all 0.3s ease ; /* effet de transition douce */
}

/* Changement de la bordure et de l'arrière-plan en cas de survol */
.woocommerce .button : hover, .
.woocommerce-page .button:hover, .woocommerce a.button:hover, .woocommerce-page
.woocommerce a.button:hover, .woocommerce button.
.woocommerce button.button:hover, .
.woocommerce input.button:hover, .
.woocommerce input[type="submit"]:hover, .
.woocommerce .add_to_cart_button:hover, .
.woocommerce .checkout-button:hover, .
.woocommerce .single_add_to_cart_button:hover {
    background-color : #0071a1 ; /* couleur d'arrière-plan pour le survol */
    color : #ffffff ; /* couleur de la police au survol */
    border-color : #00557a ; /* couleur de la bordure au survol */
}

3.2 Méthodes d'utilisation

• s'inscrire WordPress En coulisses, allez dans [Apparence] > [Personnaliser].

• Collez le code ci-dessus dans la boîte d'édition [Additional CSS].

• Cliquez sur [Publier] pour enregistrer les paramètres, rafraîchir le premier plan pour voir l'effet.

Cliquez ici :

Cliquez dessus :

4) Précautions

Couverture thématique des inspections
Certains thèmes ajoutent un style obligatoire pour les boutons (!important), et si le code ne fonctionne pas, vous pouvez ajouter le CSS !important Priorité élevée.

Compatibilité avec les plug-ins
Si vous utilisez Elementor ou d'autres constructeurs de pages, devront également confirmer la cohérence du sélecteur de bouton ou ajouter le code ci-dessus à leur CSS personnalisé.

Correspondance des couleurs de la marque
commandant en chef (militaire) #0071a1 répondre en chantant #00557a Remplacez-les par les couleurs primaires et foncées de votre marque pour plus de cohérence.

5) Optimisation avancée : utilisation de la gestion des variables CSS

Pour faciliter la maintenance, vous pouvez utiliser des variables CSS pour unifier les styles de bordure des boutons. Par exemple, vous pouvez utiliser des variables CSS pour unifier les styles de bordure des boutons :

:root {
  --btn-border-colour : #0071a1 ; --btn-hover-border-colour : #00557a ; :root {
  --btn-hover-border-colour: #00557a;
  --btn-radius : 4px ;
}

.woocommerce .button, --btn-hover-border-colour
.woocommerce-page .button {
  border : 2px solid var(--btn-border-colour) ; border-radius : var(--btn-radius) ; }
  border-radius : var(--btn-radius) ; }
}

/* hover */
.woocommerce .button:hover, .woocommerce-page .
.woocommerce-page .button:hover {
  border-colour : var(--btn-hover-border-color) ;
}

Cela permet d'effectuer des mises à jour ultérieures sur l'ensemble du site en modifiant simplement les valeurs des variables.

Cliquez ici :

Cliquez dessus :

résumés

Avec un simple CSS, il est possible d'ajouter une nouvelle fonction à la fonction WooCommerce Tous les lots de boutons ajoutent une bordure unifiée, de sorte qu'après ajustement, le style des boutons est unifié, le site semble plus professionnel et l'expérience d'utilisation est plus fluide.

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.