Guide de personnalisation complet CSS de WooCommerce Storefront

Publié: 2020-10-15

CSS de la vitrine WooCommerce Avec plus de 200 000 installations actives, le thème Storefront est conçu, développé et maintenu par les développeurs WooCommerce Core. Il est donc surnommé le thème officiel de WooCommerce.

Ce thème est conçu pour être flexible comme WooCommerce. La dernière version a plus de 40 crochets d'action et plus de 60 crochets de filtre.

CSS de la vitrine WooCommerce

Cependant, la principale question est de savoir comment modifier l'apparence et la disposition de votre thème. Si vous êtes un utilisateur expérimenté de WordPress, ce ne sera pas un problème. Les utilisateurs qui ne veulent pas se salir les mains avec CSS et PHP ont du mal à personnaliser le thème. Pour ce tutoriel, vous devez avoir des compétences en codage. Nous ajouterons les règles CSS dans la section CSS supplémentaire via le personnalisateur.

L'avantage d'utiliser cette section est que le personnalisateur WordPress vous permet d'éditer en temps réel. Vous pouvez voir les modifications que vous apportez avant de pouvoir publier vos modifications.

Il convient également de mentionner que le thème Storefront doit être le thème actif lors de sa personnalisation.

Dans cet article, je vais vous fournir le guide ultime de la personnalisation CSS dans le thème Storefront. L'astuce consiste à identifier l'élément que vous devez modifier et à ajouter une règle à cet élément.

Cela dit, voici quelques-unes des règles CSS que vous pouvez utiliser pour le thème de la vitrine.

1. Personnalisez la taille de l'en-tête

Ici, nous utiliserons à nouveau le Theme Customizer, mais nous écrirons du code CSS dans la section "CSS supplémentaire".

Ajoutez le code suivant :

 * Titre */

#masthead.site-header {

    hauteur : 155px ! important ;

    marge inférieure : 0px

}

/* CSS mobile pour les mastheads */

Écran @media uniquement et (largeur maximale : 320 px) {

    #masthead.site-header {

    hauteur : 80 pixels ! important ;

    marge inférieure : 0px ;

}

}

/* Menu Masthead */

.storefront-primary-navigation a, .cart-contents a {

    marge : 0 0 0 0 ;

}

.main-navigation ul {

    rembourrage:0 0 10px 4px!important;

}

.main-navigation li {

    hauteur:38px!important;}

/* CSS mobile pour le menu Masthead */

Écran @media uniquement et (largeur maximale : 320 px) {

.main-navigation ul {

    arrière-plan :#D6DDE4!important ;

}

}

/* Zone d'en-tête */

.site-header {

rembourrage supérieur : 0,5 em ;

}

.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {

marge inférieure : -45px ;

}

Voici le résultat : Personnaliser la taille de l'en-tête

2. Supprimer la barre de recherche de l'en-tête du thème

Ajoutez ce code à la section "CSS supplémentaire".

 .site-header .widget_product_search {

affichage : aucun ;

}

Voici le résultat : Supprimer la barre de recherche

3. Changer la couleur du menu d'en-tête

Le personnalisateur nous permet de personnaliser l'en-tête avec les couleurs que vous souhaitez. Vous pouvez le faire en accédant à Personnaliser, puis en-tête, et en choisissant la couleur souhaitée.

Cependant, cette option colore toute la zone d'en-tête, y compris la barre de recherche, la section de connexion et le logo. Pour obtenir un arrière-plan différent du menu d'en-tête, ajoutez l'extrait de code suivant au panneau CSS supplémentaire.

 .storefront-primary-navigation,

.main-navigation ul.menu ul.sub-menu{

couleur de fond : vert ;

}

Voici le résultat : Changer la couleur du menu d'en-tête

4. Masquer la barre de navigation principale

Storefront Theme, par défaut, affiche toutes les pages sous forme de menu. Si vous souhaitez masquer la barre de navigation principale, la suppression du menu ne suffit pas. Accédez à Personnaliser, puis à la section CSS supplémentaire et ajoutez les lignes suivantes :

 .storefront-primary-navigation {

affichage : aucun ;

}

Voici le résultat : Masquer la barre de navigation principale

5. Supprimer l'espace vide de l'en-tête

Accédez à Personnaliser, puis à la section CSS supplémentaire et ajoutez les lignes suivantes :

 .site-branding {

marge inférieure : 0px ;

}

Voici le résultat : Supprimer l'espace vide de l'en-tête

6. Augmentez la largeur de la barre de recherche

Que feriez-vous si vous souhaitiez étendre la largeur de la barre de recherche ? À l'aide de la section CSS supplémentaire, ajoutez les lignes suivantes :

 .woocommerce-active .site-header .site-search {

largeur : 44,739 % ;

}

#masthead .site-search .widget_product_search input[type="search"] {

largeur : 700px !important;

}

Voici le résultat : Augmenter la largeur de la barre de recherche

7. Comment modifier la taille du logo, de la navigation secondaire et de la barre de recherche

Pour les modifier tous en même temps, ajoutez le code suivant à votre section CSS supplémentaire :

 Écran @media et (min-width : 768px) {

/* LOGO */

.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 30% !important; /* Utilisez les valeurs px si vous le souhaitez, par exemple. 350px */ }

/* NAVIGATION SECONDAIRE */

.site-header .secondaire-navigation { largeur : 40 % !important ; /* Utilisez les valeurs px si vous le souhaitez, par exemple. 350px */ }

/* BARRE DE RECHERCHE */

.site-header .site-search { largeur : 30% !important; /* Utilisez les valeurs px si vous le souhaitez, par exemple. 350px */ }

Voici le résultat : Comment modifier la taille du logo, de la navigation secondaire et de la barre de recherche

8. Supprimer le panier de l'en-tête

Dans cet exemple, je supprimerai l'icône du panier en ajoutant une nouvelle règle ' display: none; '. Ajoutez le code CSS suivant dans la section CSS supplémentaire :

 .site-header-cart .cart-content {

affichage : aucun ;

}

Voici le résultat : Supprimer le panier de l'en-tête

9. Masquer l'en-tête

Pour masquer l'en-tête, ajoutez le code CSS suivant dans la section CSS supplémentaire :

 .site-header {

affichage : aucun ;

}

Voici le résultat : Masquer l'en-tête

10. Augmentez la taille du lien de menu dans l'en-tête de la vitrine

Les menus sont légèrement plus petits, selon les préférences de nombreux utilisateurs. Cependant, ils doivent mettre à jour la taille de la police des liens de menu dans le thème de la vitrine. Ajoutez le code suivant dans la section CSS supplémentaire :

 .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

taille de police : 28 px ;

}

Voici le résultat : Augmenter la taille du lien de menu dans l'en-tête de la vitrine

11. Modifier la taille de l'icône du panier dans l'en-tête de la vitrine

Vous pouvez le faire en ajoutant le code CSS suivant dans la section CSS supplémentaire

 .site-header-cart .cart-content {

taille de police : 30 px ;

}

Voici le résultat : Modifier la taille de l'icône du panier dans l'en-tête de la vitrine

12. Modifier la taille du titre de l'en-tête du site dans le thème Storefront

Ajoutez le code suivant dans la section CSS supplémentaire :

 .site-header {

taille de police : 20 px ;

}

Voici le résultat : Modifier la taille du titre de l'en-tête du site dans le thème Storefront

13. Modifier la taille du bouton du menu mobile

Il est important de noter que la façon dont le menu est affiché fait partie de la réactivité du menu. Par conséquent, si votre menu de navigation principal se présente sous la forme d'une liste sur un appareil de bureau, le même menu peut être affiché sous forme de menu hamburger sur un appareil mobile.

Pour modifier la taille, ajoutez le code CSS suivant dans la section CSS supplémentaire :

 .bouton.menu-toggle {

taille de police : 19 px ;

}

Voici le résultat : Modifier la taille du bouton du menu mobile

14. Masquer le titre des produits dans la page de la boutique

Pour masquer le titre du produit dans la page de la boutique, accédez simplement à la section Personnaliser puis CSS supplémentaire et ajoutez les lignes suivantes :

 h2.woocommerce-boucle-produit__titre {

affichage : aucun ! important ;

}

Voici le résultat :

Masquer le titre des produits dans la page de la boutique

15. Masquez les boutons Plus et Moins de la quantité de produit de la page du produit

Pour que vous puissiez masquer le champ de texte avec les boutons plus et moins pour augmenter ou diminuer la quantité de produit, il vous suffit d'ajouter le code CSS suivant dans la section CSS supplémentaire : 

 .quantité {

affichage : aucun ! important ;

}

Voici le résultat : Masquer les boutons Plus et Moins de la quantité de produit de la page du produit

16. Masquer le bouton "Ajouter au panier" sur la page du produit

Pour cela, naviguez simplement jusqu'à la section Customize puis Additional CSS, et ajoutez les lignes suivantes :

 .single_add_to_cart_button {

affichage : aucun ! important ;

}

Voici le résultat : Masquer le bouton "Ajouter au panier" sur la page du produit

17. Modifier la couleur et la taille de la police de la section du widget Storefront

Il n'existe aucun moyen direct de modifier la couleur ou la taille de la police des widgets de page à l'aide du personnalisateur. Vous pouvez facilement changer cela en ajoutant les lignes de code CSS suivantes. Pour ce faire, accédez à Personnaliser, puis à la section CSS supplémentaire, et ajoutez les lignes suivantes :

 .widget-zone .widget {

la couleur verte;

taille de la police : 1 em ;

}

Voici le résultat : Modifier la couleur et la taille de la police de la section du widget Storefront

18. Afficher le badge "Vente" de la vitrine sur l'image du produit

La version par défaut du thème WooCommerce Storefront vous permet de définir une vente ou un prix réduit pour un certain produit. Cependant, si vous souhaitez ajouter le badge Vente sur l'image du produit, accédez à Personnaliser, puis à la section CSS supplémentaire, et ajoutez les lignes suivantes :

 ul.products li.product .onsale {

position : absolue ;

haut : 137px ;

droite : 62 px ;

}

Voici le résultat : Afficher le badge "Solde" de la vitrine sur l'image du produit

19. Changer la couleur du badge "Vente"

Pour modifier la couleur du badge Vente, accédez simplement à la section Personnaliser puis CSS supplémentaire et ajoutez les lignes suivantes :

 .en soldes {

couleur de fond : noir ;

couleur de bordure : rouge ;

La couleur rouge;

}

Voici le résultat : Changer la couleur du badge "Solde"

20. Changer la couleur de la boîte "plus-moins" de la quantité

Cela peut être fait en changeant la couleur de fond des boutons de quantité plus et moins. Pour ce faire, accédez à Personnaliser, puis à la section CSS supplémentaire , et ajoutez les lignes suivantes :

 .quantité .qté {

couleur : #000 ;

couleur de fond : #f5df72 ;

}

Voici le résultat : Changer la couleur de la boîte "plus-moins" de la quantité

21. Changer la couleur de fond du minicart sur l'en-tête

Lorsque vous changez la couleur de l'en-tête, la liste déroulante du mini panier hérite de cette couleur. Cependant, vous pouvez changer cela en utilisant les règles CSS suivantes pour une meilleure visibilité. Accédez à Personnaliser, puis à la section CSS supplémentaire et ajoutez les lignes suivantes :

 .woocommerce.widget_shopping_cart {

fond : rouge ;

rayon de bordure : 12 px ;

}

Voici le résultat : Modifier la couleur d'arrière-plan du minicart sur l'en-tête

22. Ajouter une image dans le pied de page de la vitrine à l'aide du CSS ci-dessous

Si vous souhaitez ajouter votre propre logo, des paiements acceptés ou un badge de partenaire sous le texte du copyright, accédez à Calques, Personnaliser , puis cliquez sur Pied de page .

Cliquez sur Personnalisation pour développer le panneau et cliquez sur Sélectionner une image en arrière-plan.

Veuillez sélectionner l'image que vous voulez et l'ajouter.

Sélectionnez Pas de répétition et Bas , ou positionnez-le manuellement comme vous le souhaitez.

Revenez au Customizer et cliquez sur CSS pour développer le panneau. Cependant, vous devez vous assurer que les pourcentages sont conformes à vos spécifications. Ajoutez ensuite les lignes suivantes :

 .site-info : après {

contenu: '';

background-image : url (ajoutez votre propre URL) ;

bloc de visualisation;

largeur : 100 pixels ;

hauteur : 100px ;

marge : 0 automatique ;

}

Voici le résultat : Ajouter une image dans le pied de page de la vitrine à l'aide du CSS ci-dessous

  1. Comment supprimer un espace dans le pied de page

Accédez à Personnaliser, puis à la section CSS supplémentaire et ajoutez la ligne suivante :

.footer-widgets { padding-top: 0; }

Voici le résultat : Comment supprimer un espace dans le pied de page

24. Comment supprimer le soulignement des hyperliens

Par défaut, le thème Storefront souligne les liens, et si vous souhaitez les supprimer, accédez à Personnaliser, puis à la section CSS supplémentaire, et ajoutez les lignes suivantes :

 une {

décoration de texte : aucune !important ;

}

Voici le résultat : Comment supprimer le soulignement des hyperliens

25. Comment changer la couleur des lignes horizontales sur la page d'accueil de la vitrine

Ajoutez simplement le code suivant au fichier custom.css de votre thème enfant :

 .page-template-template-homepage .hentry .entry-header,

.page-template-template-homepage .hentry,

.page-template-template-homepage .storefront-product-section {

couleur de bordure : rouge ;

}

26. Comment personnaliser le badge Storefront WooCommerce en vente

Ajoutez simplement le code suivant à votre section CSS supplémentaire :

 .en soldes {

couleur de fond : #FFFFFF ;

couleur de bordure : #FF0000 ;

couleur : #FF0000 ;

}

Voici le résultat : Comment personnaliser le badge Storefront WooCommerce on Sale

27. Comment modifier la hauteur du pied de page de la vitrine WooCommerce

Il est très facile de modifier la hauteur du pied de page WooCommerce Storefront en ajoutant le code CSS suivant dans la section CSS supplémentaire : 

 section.footer-widgets {

rembourrage supérieur : 25 px ;

}

div.site-info {

rembourrage supérieur : 16 px ;

rembourrage en bas : 25 px ;

}

Voici le résultat : Comment modifier la hauteur du pied de page de la vitrine WooCommerce

28. Ajout d'une image d'arrière-plan à la vitrine d'une section de page d'accueil particulière

Le thème Storefront par défaut comporte six sections, à savoir les catégories de produits, les produits récents, les produits vedettes, les produits populaires, les produits en vente et les produits les plus vendus. Ajoutez simplement le code suivant dans la section CSS supplémentaire :

 .storefront-vedette-produits{

background-image : url (ajoutez votre URL ici) ;

position d'arrière-plan : centre centre ;

répétition d'arrière-plan : pas de répétition ;

taille de fond : couverture ;

-o-background-size : couverture ;

}

Voici le résultat : Ajout d'une image d'arrière-plan à la vitrine d'une section de page d'accueil particulière

29. Ajout d'une couleur d'arrière-plan aux sections de la page d'accueil de la vitrine

Pour ce faire, vous devez d'abord identifier la section que vous souhaitez ajouter de la couleur. Cela peut facilement être fait en ajoutant le code suivant à la section CSS supplémentaire :

 .storefront-vedette-produits{

couleur de fond :#FFEB3B ;

}

Voici le résultat : Ajout d'une couleur d'arrière-plan aux sections de la page d'accueil de la vitrine

30. Comment supprimer ou masquer le titre de la section de la page d'accueil

Pour ce faire, vous devez d'abord identifier la section que vous souhaitez supprimer ou masquer. Cela peut être fait en ajoutant le code suivant à la section CSS supplémentaire :

 .storefront-recent-products .section-title {display:none;}

.storefront-product-categories .section-title {display:none;}

.storefront-featured-products .section-title {display:none;}

.storefront-popular-products .section-title {display:none;}

.storefront-on-sale-products .section-title {display:none;}

.storefront-best-seller-products .section-title {display:none;}

Voici le résultat : Comment supprimer ou masquer le titre de la section de la page d'accueil

31. Comment changer la couleur de fond des produits en vente

Cela peut être fait en ajoutant le code suivant à la section CSS supplémentaire :

 .storefront-on-sale-products{

couleur de fond :#FFEB3B ;

}

Voici le résultat : Comment changer la couleur de fond des produits en vente

32. Comment ajouter automatiquement de l'espace sous l'en-tête pour les pages sans titre

Chaque fois que vous désactivez le titre de la page principale pour n'importe quelle page, il n'y a plus d'espace sous l'en-tête. Cet extrait de code vous aidera à ajouter l'espacement pour insérer un curseur, une image ou tout autre contenu aligné avec le haut. Ajoutez le code suivant à la section CSS supplémentaire :

 body.page-header-disabled #main {

rembourrage en haut : 30 px ;

}

Voici le résultat : Comment ajouter automatiquement de l'espace sous l'en-tête pour les pages sans titre

33. Comment masquer le bouton de défilement vers le haut sur mobile

 Ajoutez simplement le code suivant dans la section CSS supplémentaire :

Écran @media only et (max-width : 959px) {

#site-scroll-top { display: none !important; }

}

Voici le résultat : Comment masquer le bouton de défilement vers le haut sur mobile

Conclusion

J'ai partagé quelques conseils CSS dans ce guide que vous pouvez utiliser pour styliser le thème Storefront. Je vous recommande fortement d'ajouter les règles CSS dans la section CSS supplémentaire afin de pouvoir prévisualiser les modifications en temps réel. La prévisualisation de vos modifications vous permettra de modifier la règle selon vos spécifications.

Pour ajouter la règle, copiez/collez dans la section « CSS supplémentaire » de votre interface de personnalisation du thème Storefront. Pour faire ça:

  • Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
  • Dans le menu Tableau de bord, cliquez sur Menu Apparence > Personnaliser .
  • Accédez à CSS supplémentaire dans la barre latérale gauche qui apparaît.
  • Ajoutez la règle CSS.
  • Si vous êtes satisfait des modifications, cliquez sur Publier.

Cependant, il est essentiel de noter que les conseils CSS partagés ici ne fonctionnent que pour le thème Storefront.

Articles similaires

  1. Comment ajuster la hauteur de l'en-tête de la vitrine WooCommerce
  2. Comment configurer la page d'accueil dans WooCommerce Storefront
  3. Comment ajouter un thème de vitrine WooCommerce au menu d'options de déconnexion [Exemple]
  4. Comment changer le slogan du thème de vitrine WooCommerce
  5. Comment changer le thème de la vitrine de la taille de la police du menu principal
  6. Guide de personnalisation CSS de l'en-tête WooCommerce Storefront
  7. WooCommerce Storefront Afficher toutes les catégories sur la page d'accueil
  8. Comment changer la taille du thème de la vitrine du bouton de menu mobile
  9. Comment changer la couleur du menu WooCommerce Storefront
  10. Comment changer la hauteur du pied de page de la vitrine WooCommerce
  11. Comment supprimer le thème de la vitrine du pied de page WooCommerce
  12. Comment changer la taille du thème du titre du site WooCommerce Storefront
  13. Comment supprimer le thème de l'en-tête WooCommerce Storefront
  14. Personnalisation de la page d'accueil du thème WooCommerce Storefront [Guide ultime]
  15. Comment changer la taille de l'image en vedette de WooCommerce Storefront
  16. Comment faire défiler le menu de Divi Mobile Solution rapide
  17. Comment masquer le thème de la vitrine de la catégorie WooCommerce
  18. Comment changer la taille de l'icône du panier dans le thème WooCommerce Storefront
  19. Comment supprimer le thème WooCommerce Storefront des produits connexes
  20. Comment masquer les meilleurs vendeurs WooCommerce Storefront Frontpage