Améliorer le design des boutons de WooCommerce : Comment ajouter des effets de bordure personnalisés via les thèmes

existent WooCommerce Dans les magasins, les boutons sont au cœur de l'interaction entre l'utilisateur et le site web, en particulier au cours du processus d'achat, et leur conception a une incidence directe sur les taux de clics et de conversion. Un bouton attrayant peut aider les utilisateurs à trouver et à cliquer plus facilement, améliorant ainsi l'expérience utilisateur et augmentant les ventes.

Cet article explique comment ajouter des effets de bordure aux boutons de WooCommerce grâce à la fonction de personnalisation du thème.

I. Pourquoi pour Bouton WooCommerce Ajouter une bordure?

Les boutons permettent non seulement aux utilisateurs d'effectuer des actions, mais ils attirent également l'attention et encouragent une plus grande interaction. L'ajout de bordures aux boutons de WooCommerce présente les avantages suivants :

• Rendre les boutons plus visiblesLes bordures font ressortir davantage les boutons sur la page et incitent les utilisateurs à cliquer dessus.
• Amélioration de l'expérience opérationnelleLe design de la bordure donne aux boutons un aspect plus rétroactif et les utilisateurs sont plus enclins à cliquer dessus.
• Amélioration de la perception de la marqueLes couleurs et les styles des bordures peuvent être alignés sur les styles de la marque pour donner au site un aspect professionnel.

Comment ajouter des effets de bordure aux boutons de WooCommerce via la personnalisation du thème

Cette opération peut être effectuée via la fonction Personnalisation du thème en raison de WooCommerce pour ajouter une bordure, l'opération est simple et ne nécessite pas de compétences en programmation. Voici les étapes détaillées :

2.1 Entrer dans les paramètres de personnalisation de WordPress

• Connectez-vous à WordPress Backend: Tout d'abord, connectez-vous à votre WordPress Site web backend.
• Ouvrir les paramètres personnalisés: Sélectionnez [Apparence] → [Personnaliser] dans le menu de gauche.

• Sélectionner un CSS supplémentaireDans l'écran de personnalisation, recherchez l'option [Extra CSS] et cliquez dessus.

2.2 Personnalisation Code CSS

Dans la zone "Extra CSS", vous pouvez ajouter un code CSS personnalisé pour définir l'effet de bordure des boutons WooCommerce. Voici un exemple simple :

/* Définir le bouton WooCommerce avec une bordure verte sur fond blanc et un texte vert */
.woocommerce button.button, .woocommerce-page button.
.woocommerce a.button, .woocommerce-page a.button, .
.woocommerce input.button, .woocommerce-page input.button {
    background-color : white ; /* la couleur d'arrière-plan du bouton est le blanc */
    border : 2px solid #7CFC00 ; /* bordure vert gazon */
    color : #7CFC00 ; /* la couleur du texte du bouton est vert gazon */
    border-radius : 5px ; /* coins arrondis */
    padding : 10px 20px ; /* marge intérieure */
    transition : all 0.3s ease ; /* effet de transition en douceur */
}

/* Au survol de la souris, l'arrière-plan du bouton devient vert gazon et le texte devient blanc */
.woocommerce button.button:hover, .woocommerce-page button.
.woocommerce a.button:hover, .woocommerce-page a.button:hover, .
.woocommerce input.button:hover, .woocommerce-page input.button:hover {
    background-color : #7CFC00 ; /* la couleur d'arrière-plan au survol devient vert gazon */
    colour : white ; /* la couleur du texte au survol devient blanche */
    border-color : #7CFC00 ; /* la bordure reste vert gazon */
}

interprétation du code

Explication du code :

• couleur de fond : blanc ; /* Fixer la couleur d'arrière-plan du bouton au blanc */
• bordure : 2px solid #7CFC00 ; /* Définir la bordure du bouton en vert gazon avec une largeur de 2px */
• couleur : #7CFC00. /* Fixer la couleur du texte du bouton à vert gazon */
• border-radius : 5px ; /* Définir le degré d'arrondi des quatre coins du bouton pour augmenter la douceur du bouton */
• padding : 10px 20px ; /* Définir les marges intérieures des boutons pour qu'ils aient la bonne taille */
• transition : toutes les 0,3 s d'aisance ; /* Mise en place d'effets de transition fluides pour les boutons afin d'améliorer l'expérience de l'utilisateur */

Au survol de la souris :

• couleur de fond : #7CFC00 ; /* La couleur d'arrière-plan du bouton devient vert gazon lorsque la souris le survole */
• couleur : blanc ; /* La couleur du texte du bouton devient blanche au survol de la souris */
• couleur de la bordure : #7CFC00 ; /* Garder l'herbe de la bordure en vert au passage de la souris */

2.3 Enregistrer et visualiser les effets

Une fois l'ajout terminé, cliquez sur [Publier]. Vous verrez que la bordure du bouton a été appliquée avec succès et que le bouton affichera des effets dynamiques lorsque la souris passera dessus, fournissant ainsi un retour d'information visuel instantané.

Troisièmement, personnalisation en fonction du style de la marqueBordures des boutons

Vous pouvez personnaliser les bordures des boutons en fonction de la couleur de votre marque ou du thème de votre site web.

Par exemple, si la couleur de la marque de votre site web est le bleu, vous pouvez régler la couleur de la bordure sur le bleu :

/* Ajouter une bordure bleue initiale au bouton WooCommerce */
.woocommerce a.button, .
.woocommerce button.button, .
.woocommerce input.button, .
.woocommerce-page a.button, .
.woocommerce-page button.button, .
.woocommerce-page input.button {
    border : 2px solid #1E90FF !important ; /* Bordure initiale : bleu, 2px */
    border-radius : 5px !important ; /* coins arrondis */
    padding : 12px 24px !important ; /* marge intérieure */
    background-color : white !important ; /* Fond blanc */
    colour : #1E90FF !important ; /* Le texte du bouton est bleu */
    transition : all 0.3s ease !important ; /* Effet de transition douce */
}

/* Au survol de la souris, le bouton affiche une double bordure et l'arrière-plan devient bleu lac */
.woocommerce a.button:hover,
.woocommerce button.button:hover, .
.woocommerce input.button:hover, .
.woocommerce-page a.button:hover, .
.woocommerce-page button.button:hover, .
.woocommerce-page input.button:hover {
    border : 4px double #32CD32 !important ; /* double border, 4px, grass green */
    background-color : cyan !important ; /* couleur d'arrière-plan au survol changée en bleu lac */
    color : white !important ; /* la couleur du texte est passée au blanc */
}

Ce design personnalisé donne aux boutons un aspect plus conforme à la marque et ajoute une touche professionnelle à votre boutique.

IV. poursuite de l'optimisation de la conception des boutons

Outre l'ajout d'effets de bordure aux boutons, vous pouvez optimiser la conception des boutons afin d'améliorer l'expérience de l'utilisateur de la manière suivante :

Ombre du boutonLes effets d'ombre : ajoutez des effets d'ombre aux boutons pour leur donner de la dimension et de l'attrait visuel.

.woocommerce a.button, .
.woocommerce button.button, .
.woocommerce input.button, .
.woocommerce-page a.button, .
.woocommerce-page button.button, .
.woocommerce-page input.button {
    box-shadow : 0px 4px 6px rgba(0, 0, 0, 0, 0.1) !important ; /* Définir l'effet d'ombre du bouton */
}

Modifier la police et la tailleLes boutons de la page d'accueil : Ajustez la police et la taille des boutons pour qu'ils soient plus en phase avec la conception générale du site.

.woocommerce button.button, .woocommerce-page button.button { font-family : 'Arial', sans-serif ; /* set font */ font-size : 16px ; /* set font-size */ }

V. Résumé

Avec les paramètres du thème WordPress, vous pouvez ajouter des bordures, des ombres et d'autres effets aux boutons pour rendre votre site Web plus attrayant.WooCommerceLes boutons attirent davantage l'attention. Ils correspondent parfaitement au style de votre marque. Cela permet non seulement d'améliorer la valeur de votre boutique, mais aussi d'inciter davantage de clients à cliquer dessus, ce qui contribue à augmenter les ventes.

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.