Dans WooCommerce, lorsque vous ajoutez des bordures aux boutons, vous pouvez rencontrer des problèmes avec des mises en page mal alignées. Cela est généralement d? au fait que la bordure CSS affecte la taille globale de l'élément, ce qui entra?ne une déviation dans le calcul de la mise en page. Voici les raisons spécifiques et les solutions simples pour vous aider à obtenir facilement un effet de style de bouton beau et stable.

I. Phénomènes problématiques

De nombreuses entreprises aménagent des espaces vertsWooCommerceDans la boutique, on aime ajouter des bordures CSS pour rendre le bouton plus conforme au style de la marque, mais dans la pratique, on rencontre souvent des boutons mal placés du point de vue typographique, des changements de taille ou un problème de dissonance au niveau de la présentation générale.

Les manifestations courantes de dysfonctionnement de la mise en page causées par des boutons avec des bordures sont les suivantes :

• La largeur et la hauteur des boutons peuvent être réduites ou augmentées
• Conteneur de débordement du texte du bouton
• La position du bouton est décalée, ce qui entra?ne un désalignement.
• La zone de clic du bouton ne correspond pas à la zone visuelle

Ces problèmes apparaissent souvent dans les listes de produits, les boutons de paiement et les boutons de panier, ce qui affecte sérieusement l'expérience de l'utilisateur avec le site web de ltaux de conversion.

II. les causes du problème

1. les modifications de la taille des boutons dues à la manière dont la bordure est calculée

En CSS, la largeur et la hauteur d'un élément ne sont calculées par défaut que pour la bo?te de contenu, la bordure et le rembourrage s'ajoutant à la taille totale. Si vous ne définissez pas le paramètre dimensionnement de la bo?teL'ajout d'une bordure fera ressortir les boutons et entra?nera un mauvais alignement de la mise en page.

2. la largeur de la bordure est en conflit avec les paramètres de remplissage

La valeur de remplissage de certains boutons de thème est juste suffisante pour maintenir le conteneur, et l'ajout d'une bordure entra?nera un dépassement de la largeur du conteneur parent, ce qui se traduira par des sauts de ligne ou des déplacements.

3. problèmes d'adaptation de la largeur des boutons

Lorsque la largeur du bouton est fixée à un pourcentage (qui s'adapte automatiquement à la taille de l'écran) et qu'une bordure d'une valeur fixe en pixels est ajoutée, il peut en résulter un affichage mal aligné sur différents appareils. Par exemple, la position des boutons n'est pas la même sur un téléphone portable et sur un ordinateur.

Solutions

• s'inscrire WordPress Backend, allez à Apparence → Personnalisé

• frappe (sur le clavier) CSS supplémentaire(ou "Additional CSS")

• Collez le code suivant dans la bo?te d'édition

Méthode 1 : Unification des modèles de calcul à l'aide du box-sizing

Ajoutez le CSS suivant à tous les boutons :

.woocommerce button, .
.woocommerce a.button, .
.woocommerce input.button, .
.woocommerce #respond input#submit {
    box-sizing : border-box ;
}

Explication :
Taille de la bo?te : border-box ; inclura la bordure et le rembourrage dans le calcul de la largeur et de la hauteur totales de l'élément, évitant ainsi que la taille du bouton ne soit étirée après l'ajout de la bordure.

Méthode 2 : Ajuster l'espacement pour compenser la largeur de la bordure

Si vous souhaitez que la taille des boutons reste visuellement cohérente, vous pouvez ajouter une bordure tout en réduisant l'espacement en conséquence, par exemple :

.woocommerce a.button {
    border : 2px solid #333 ;
    padding : 8px 14px ; /* aurait pu être 10px 16px */
}

La largeur et la hauteur du bouton restent ainsi proches de la conception originale du thème.

Méthode 3 : Utiliser le contour au lieu de la bordure

Si vous souhaitez utiliser un contour pour un effet visuel et que vous n'avez pas besoin d'une véritable bordure, vous pouvez utiliser un contour pour obtenir un effet de trait qui n'affecte pas la taille de l'élément :

.woocommerce a.button {
    outline : 2px solid #333 ;
}

Remarque : les contours ne prennent pas de place, mais dans certains navigateurs, ils peuvent être rendus comme des styles de niveau supérieur, ce qui affecte l'animation du survol, qui doit être testée.

Méthode 4 : Définir des largeurs distinctes pour des boutons spécifiques

Pour les boutons qui sont manifestement mal placés, vous pouvez définir une largeur fixe pour chacun d'entre eux afin d'éviter qu'ils ne sautent sous l'influence réactive de la bordure. Exemple :

.woocommerce-cart .button {
    width : 100px ;
}

Méthode 5 : vérifier la relation d'héritage CSS du thème

certains d'entre euxWooCommerceLe thème sera adopté!importantCorrection des styles de boutons qui font échouer le CSS personnalisé. Dans ce cas, vous devez augmenter la priorité du sélecteur ou ajouter un code-behind!important.

Exemple :

.woocommerce a.button {
    border : 2px solid #333 !important ;
}

IV. test final

Après avoir effectué les modifications, testez-les dans le scénario suivant :

• Adapté aux ordinateurs de bureau, aux tablettes et aux téléphones portables
• Différents modèles de pages (page de liste de produits, page de produit unique, page de paiement, page de panier)
• Si la personnalisation doit être ignorée après la mise à jour du thèmeCSS

Pour ce faire, il faut Outils pour les développeurs de navigateurs Vérifiez la taille réelle des boutons (bo?te calculée) pour vous assurer que la mise en page est stable.

rendre un verdict

WooCommerce Les boutons avec des bordures entra?nent un désalignement de la mise en page, dont la cause principale est la fonction Calculs du modèle de bo?te CSS incompatibles avec les paramètres par défaut du thème. Pour ce faire, il convient d'utiliser judicieusement la fonction dimensionnement de la bo?teL'ajustement du rembourrage ou l'utilisation d'un contour à la place peut résoudre efficacement le problème des boutons mal alignés et préserver la cohérence et la beauté de l'interface utilisateur du site web.

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.