Comment personnaliser la page de la boutique WooCommerce (sans code)

Vous cherchez un moyen de personnaliser la page de la boutique WooCommerce ? Dans ce guide étape par étape, vous apprendrez trois méthodes 100 % sans code pour personnaliser la page boutique de votre boutique.

La page de la boutique de votre boutique, également appelée page du catalogue, est la page qui répertorie plusieurs produits. Il peut s'agir de tous vos produits (sur la page "principale" de la boutique) ou de produits avec une catégorie ou une étiquette de produit spécifique.

En termes plus techniques, il s'agit de la conception d'archives pour le type de publication Produits dans une boutique WooCommerce.

Parce que votre page de boutique est ce qui aide les visiteurs à parcourir et à découvrir vos produits, il est important de bien faire les choses. Cet article vous apprendra comment !

Ci-dessous, vous apprendrez trois manières différentes de personnaliser la page de la boutique WooCommerce sans code , en utilisant notre thème Botiga comme exemple :

• Options intégrées dans le personnalisateur de thème WordPress natif
• L'éditeur de blocs WordPress natif
• Le plugin Elementor page builder (cette méthode vous permettra d'utiliser la version gratuite d'Elementor)

Remarque - Si vous n'avez pas encore créé votre boutique WooCommerce, vous pouvez vous diriger vers notre guide sur la façon de créer une boutique WooCommerce. Une fois que vous avez un magasin fonctionnel, revenez ici pour commencer à personnaliser la page de la boutique !

Une introduction rapide à la personnalisation de la page de la boutique WooCommerce

Si vous souhaitez personnaliser entièrement la page de votre boutique WooCommerce, vous devrez choisir un thème WooCommerce conçu pour vous offrir de la flexibilité.

Alors que les principes généraux que vous apprenez dans ce tutoriel peuvent s'appliquer à n'importe quel thème WooCommerce, nous allons utiliser le thème Botiga pour plusieurs raisons :

• Il comprend des options détaillées dans WordPress Customizer pour vous permettre de personnaliser la page de la boutique sans vous obliger à tout concevoir à partir de zéro.
• Si vous voulez tout concevoir à partir de zéro, Botiga Pro dispose d'une fonctionnalité intégrée pour vous permettre de tout personnaliser à l'aide de l'éditeur de blocs WordPress natif ou de la version gratuite d'Elementor.

Au-delà de ses nombreuses options de personnalisation, Botiga est également l'un des thèmes WooCommerce les plus rapides, il préparera donc votre boutique au succès dans d'autres domaines également.

Cela étant dit, vous trouverez toujours ce didacticiel utile si vous utilisez un autre thème WooCommerce.

Par exemple, la plupart des thèmes WooCommerce vous offrent au moins quelques options dans le Customizer.

De même, la méthode générale Elementor que nous présentons fonctionnera avec n'importe quel thème. La seule différence est que vous devrez acheter Elementor Pro si vous n'utilisez pas Botiga, tandis que Botiga vous permet de tout faire en utilisant la version gratuite d'Elementor.

Si vous souhaitez en savoir plus sur Botiga, vous pouvez vous rendre sur la page thématique Botiga.

Méthode 1 - Personnalisation de la page de la boutique avec le personnalisateur WordPress

Pour la plupart des gens, le moyen le plus simple de modifier la page de la boutique WooCommerce consiste à utiliser les options de votre thème dans WordPress Customizer.

Avec Botiga, vous obtenez une gamme détaillée d'options pour vous aider à personnaliser la mise en page, le style et le contenu de la page de la boutique de votre magasin.

Un thème différent peut ne pas offrir autant d'options, mais vous devriez pouvoir en trouver au moins quelques-unes dans le Customizer.

Voici comment utiliser les options du thème Botiga pour personnaliser la page de la boutique WooCommerce.

1. Choisissez ce que vous souhaitez afficher sur votre page de boutique

Pour commencer, vous devrez choisir le contenu à afficher sur la page de votre boutique. La valeur par défaut consiste à afficher uniquement les produits, mais Botiga vous offre également la possibilité de présenter également des catégories.

Pour accéder à ces paramètres, ouvrez le WordPress Customizer en allant dans Apparence → Personnaliser dans votre tableau de bord WordPress.

Ensuite, sélectionnez Général sous WooCommerce :

Maintenant, utilisez le menu déroulant Affichage de la page de la boutique pour choisir d'afficher uniquement les produits, uniquement les catégories ou les deux.

Vous pouvez également faire un choix similaire pour vos pages d'archives de catégories à l'aide de la liste déroulante Affichage des catégories . Dans ce cas, vous choisissez d'afficher ou non les sous-catégories.

2. Ouvrez les paramètres de la page de la boutique dans le personnalisateur WordPress

Ensuite, revenez à la liste du menu principal dans l'outil de personnalisation et sélectionnez les options du catalogue de produits pour personnaliser plus complètement votre page de boutique.

Vous verrez maintenant un tas d'options dans la barre latérale, divisées en deux onglets - Général et Style :

• Général – Contrôlez la mise en page et le contenu des éléments de votre page de boutique.
• Style – Ajustez la conception des éléments sur votre page de boutique, comme changer les couleurs/polices ou ajouter des bordures.

3. Personnalisez la disposition générale

Pour commencer, développez les paramètres de mise en page pour ajuster la mise en page générale de la page de votre boutique.

Tout d'abord, vous devrez choisir le type de mise en page, qui propose trois options générales :

• Grille
• Liste
• Maçonnerie

Vous pouvez également contrôler les options générales de mise en page, telles que le nombre de lignes et de colonnes à utiliser.

En dessous, vous pouvez choisir le style d'en-tête à utiliser sur la page de votre boutique et le contenu à inclure dans l'en-tête, comme l'affichage ou non des catégories de produits.

Plus bas dans le menu Customizer, vous obtenez des options pour contrôler la disposition de la barre latérale, les éléments de page et la pagination :

• Disposition de la barre latérale – Vous pouvez ajouter une barre latérale verticale ou horizontale. Vous pouvez ensuite contrôler le contenu de la barre latérale à l'aide de widgets. Cela peut être très utile pour ajouter des filtres de produits afin d'aider les visiteurs à parcourir vos produits.
• Éléments de la page – Vous pouvez afficher/masquer différents éléments sur la page.
• Pagination - Vous pouvez utiliser la pagination normale, le défilement infini ou un bouton "Charger plus" alimenté par Ajax qui charge de nouveaux produits sans recharger la page.

4. Personnalisez la fiche produit

Ensuite, vous pouvez ouvrir la section Fiche produit pour personnaliser la façon dont les produits individuels apparaissent sur la page de la boutique.

Tout d'abord, vous pouvez choisir différentes dispositions de cartes et emplacements de boutons d'ajout au panier.

Par exemple, dans la capture d'écran ci-dessous, vous pouvez voir que nous avons déplacé le bouton d'ajout au panier pour qu'il flotte sur l'image du produit dans le coin inférieur gauche.

Plus bas dans les paramètres, vous pouvez faire d'autres choix importants :

• Personnalisez ou désactivez le comportement d'affichage rapide du produit.
• Activer/désactiver des éléments de contenu spécifiques — par exemple, afficher ou non le nombre d'avis sur la page de la boutique.
• Ajustez l'alignement et l'espacement.

5. Personnalisez l'étiquette de vente et les catégories

Ensuite, vous pouvez développer les sections Étiquette de vente et Catégories pour configurer ces zones de la page de votre boutique.

Les paramètres de l'étiquette de vente vous permettent de contrôler l'emplacement et le texte de l'insigne de vente. Il existe également une option pour afficher le pourcentage de vente à la place, ce qui insérera dynamiquement la remise appropriée pour chaque produit.

Les paramètres Catégories vous permettent de contrôler la mise en page des fiches de catégorie si vous avez choisi d'afficher les catégories à l'étape 1 de ce guide :

6. Ajustez les options de style selon vos besoins

Une fois que vous êtes satisfait de la mise en page et du contenu de la page de votre boutique, vous pouvez passer à l'onglet Style pour ajuster le style de tout selon vos besoins.

Encore une fois, c'est ici que vous pouvez modifier les couleurs, ajuster les polices, ajouter des bordures, etc.

Vous n'avez rien à changer ici. Mais si vous voulez faire quelques ajustements, c'est un bon domaine à explorer.

7. Explorez d'autres options de personnalisation

En plus de la zone dédiée au catalogue de produits dans l'outil de personnalisation, Botiga propose également d'autres options susceptibles d'affecter la page de votre boutique.

Par exemple, vous pouvez ajuster la couleur des boutons d'ajout au panier et d'affichage rapide (ainsi que tous les autres boutons de votre site) en ouvrant les paramètres des boutons .

Si vous souhaitez modifier un détail spécifique, cela vaut la peine d'explorer ces autres options. Mais si vous aimez déjà l'apparence de votre page de boutique, il n'est pas nécessaire de creuser plus profondément.

8. Publiez la mise en page de votre boutique

Une fois que vous êtes satisfait de l'apparence de votre page de boutique, il vous suffit de cliquer sur le bouton Publier pour la mettre en ligne sur votre boutique.

Méthode 2 - Personnalisation de la page de la boutique avec l'éditeur de blocs WordPress

Pour la plupart des magasins, les options de personnalisation intégrées de Botiga offrent suffisamment de flexibilité pour créer une page de boutique personnalisée dans WooCommerce.

Cependant, vous pouvez avoir des situations où vous souhaitez créer une conception vraiment personnalisée à partir de zéro.

Pour vous aider à y parvenir sans code, vous pouvez utiliser la fonctionnalité Templates Builder de Botiga Pro pour personnaliser la page de la boutique à l'aide de l'éditeur de blocs WordPress natif ou d'Elementor (même la version gratuite).

Dans cette section, nous allons vous montrer comment cela fonctionne avec l'éditeur de blocs. Ensuite, nous vous montrerons comment cela fonctionne avec Elementor dans la section suivante. Si vous savez déjà que vous souhaitez utiliser Elementor, cliquez sur ce lien pour passer à cette section.

1. Activer le module Botiga Pro Template Builder

Pour activer le générateur de modèles, accédez à Apparence → Tableau de bord du thème → Fonctionnalités du thème .

Ensuite, faites défiler vers le bas et activez le module Templates Builder .

Vous aurez besoin de Botiga Pro pour activer ce module — si vous ne l'avez pas déjà, vous pouvez l'acheter en cliquant ici.

2. Créer une nouvelle mise en page de la boutique

Ensuite, allez dans Apparence → Modèles Botiga → Ajouter un modèle pour créer un nouveau modèle de page de boutique.

Dans l'interface du modèle, donnez-lui un nom (par exemple « Page de la boutique ») et choisissez Catalogue de la boutique comme type de modèle.

3. Concevez votre page de boutique à l'aide de blocs

Maintenant, vous pouvez utiliser l'éditeur pour concevoir la mise en page de votre boutique en utilisant des blocs.

Vous pouvez utiliser n'importe lequel des blocs WordPress existants (ou des blocs d'autres plugins).

Botiga ajoute également un tas de ses propres blocs WooCommerce pour un contenu dynamique important tel que les détails des archives de la boutique et les détails du produit.

Pour réellement répertorier certains types de produits, vous pouvez utiliser le bloc Product Query .

Dans un premier temps, l'ajout du bloc Product Query affichera une grille de vos produits.

Vous pouvez ensuite utiliser les paramètres du bloc pour filtrer différents types de produits, personnaliser la mise en page, ajuster la fiche produit, modifier les styles, etc.

Pour un aperçu plus détaillé, regardez également cette vidéo :

4. Publiez votre modèle

Une fois que vous êtes satisfait du design de la page de votre boutique, il vous suffit de cliquer sur le bouton Publier .

Lorsque vous ouvrez la page de la boutique de votre boutique sur le frontend, vous devriez voir votre modèle de page de boutique personnalisée.

Méthode 3 - Personnalisation de la page de la boutique avec le plugin Elementor

Si vous préférez utiliser Elementor au lieu de l'éditeur de blocs, vous pouvez également suivre une approche similaire pour personnaliser la page de la boutique WooCommerce.

Normalement, vous auriez besoin d'Elementor Pro pour personnaliser la page de la boutique de votre magasin. Cependant, avec Botiga Pro, vous pouvez entièrement personnaliser la page de votre boutique en utilisant la version gratuite d'Elementor.

Vous pouvez y parvenir car Botiga Pro ajoute ses propres widgets Elementor personnalisés pour vous permettre de configurer votre page de magasin.

Cela étant dit, Botiga Pro est toujours entièrement compatible avec Elementor Pro. Ainsi, si vous possédez déjà une licence Elementor Pro, vous pouvez toujours bénéficier de toutes les fonctionnalités de conception supplémentaires qu'elle ajoute.

Voici comment modifier la page de la boutique WooCommerce avec Elementor et Botiga.

1. Activer le module Botiga Pro Template Builder

Pour activer le générateur de modèles, accédez à Apparence → Tableau de bord du thème → Fonctionnalités du thème .

Ensuite, faites défiler vers le bas et activez le module Templates Builder .

Vous aurez besoin de Botiga Pro pour activer ce module — si vous ne l'avez pas déjà, vous pouvez l'acheter en cliquant ici.

2. Créez une nouvelle mise en page de la page de la boutique et lancez Elementor

Ensuite, allez dans Apparence → Modèles Botiga → Ajouter un modèle pour créer un nouveau modèle de page de boutique.

Dans l'interface du modèle :

1. Donnez-lui un nom interne, par exemple "Page de la boutique".
2. Choisissez Shop Catalog comme type de modèle.
3. Cliquez sur le bouton Enregistrer le brouillon pour l'enregistrer dans la base de données (ceci est utile pour utiliser Elementor).

Une fois que vous avez fait cela, vous pouvez cliquer sur le bouton Modifier avec Elementor pour lancer l'interface Elementor.

3. Utilisez les widgets Botiga pour créer la conception de votre page de boutique

Maintenant, vous pouvez utiliser l'interface standard d'Elementor pour concevoir votre page de boutique.

Pour vous aider à configurer la conception avec la version gratuite d'Elementor, Botiga ajoute un ensemble de ses propres widgets dans la section Botiga WooCommerce .

Pour la page de la boutique, le widget le plus important est le widget Product Query , qui vous permet d'afficher une liste de certains/tous vos produits.

Il existe également d'autres widgets utiles, tels que le titre de l'archive , la description de l'archive et d'autres widgets étiquetés Archive.

Dans les paramètres du widget Product Query , vous pouvez choisir les produits à afficher, personnaliser la mise en page, modifier la fiche produit, etc.

Vous pouvez également profiter de tous les styles normaux et des options avancées offertes par Elementor.

En plus d'utiliser les widgets Botiga WooCommerce pour concevoir votre page de boutique, vous êtes également libre d'utiliser tout autre widget Elementor, y compris les widgets des modules complémentaires Elementor tiers.

4. Publiez votre page de boutique

Une fois que vous êtes satisfait de la conception de la page de votre boutique, cliquez sur le bouton Publier dans Elementor pour la mettre en ligne.

Une fois que vous l'avez publié, vous pouvez ouvrir la page de votre boutique sur le frontend et vous devriez voir le design personnalisé que vous avez créé avec Elementor.

Conclusion : créez une page de boutique WooCommerce personnalisée aujourd'hui

Cela conclut notre guide sur la façon de personnaliser la page de la boutique WooCommerce sans avoir besoin de code.

Pour la plupart des gens, les options intégrées de Botiga dans le Customizer offrent déjà suffisamment de flexibilité pour créer une page de boutique WooCommerce personnalisée.

Si vous voulez encore plus de contrôle, la fonction Template Builder de Botiga Pro vous permet de personnaliser entièrement chaque partie de votre page de boutique à l'aide de l'éditeur de blocs WordPress natif ou d'Elementor (même la version gratuite).

Si vous n'utilisez pas déjà Botiga, envisagez de passer à Botiga dès aujourd'hui pour pouvoir accéder à toutes ces options de personnalisation, et bien plus encore !

Avez-vous encore des questions sur la façon de personnaliser la page de la boutique WooCommerce ? Faites le nous savoir dans les commentaires.