Personnaliser la page boutique WooCommerce (Product Archive)
La page boutique et les pages catégories de votre catalogue, à votre design, avec le modèle Product Archive.
Les menus sont cités tels qu’ils apparaissent dans Elementor en français. Selon votre version et vos réglages de langue, certains libellés restent en anglais (Single Post, Loop Item…).
La page « archive » WooCommerce, c’est toute page qui affiche une liste de produits : la boutique principale, les pages de catégories, d’étiquettes ou de résultats de recherche. Elementor Pro permet de remplacer leur design standard par le vôtre.
Prérequis : Elementor, Elementor Pro et WooCommerce actifs, avec une formule Pro qui inclut le WooCommerce Builder (Advanced Solo, Advanced ou supérieure).
1. Créer le modèle
- Ouvrez Elementor › Constructeur de thème.
- Dans la colonne de gauche, cliquez sur Product Archive, puis sur le bouton + (Add New).
- Nommez le modèle (« Boutique principale »…) et cliquez sur Create Template.
2. Choisir un bloc ou partir de zéro
La bibliothèque propose des blocs d’archive produit prêts à l’emploi (Insert). Pour construire vous-même, fermez-la et glissez les widgets WooCommerce.
Indispensable : le widget Archive Products. C’est lui qui affiche réellement vos produits. Sans lui, la page reste vide de produits.
Complétez avec Archive Title (le nom de la catégorie consultée), Archive Description, et éventuellement les catégories de produits. Pour une carte produit au design entièrement libre, le Loop Grid avec un modèle de type Products est une alternative.
3. Publier et choisir où l’appliquer
- Cliquez sur Publish, puis Add Condition.
- Pour la boutique principale : Include › Shop page.
- Pour une seule catégorie : Include › Product Categories, puis le nom de la catégorie.
- Cliquez sur Save & Close.
Vous pouvez ainsi avoir un design pour la boutique et un autre pour une catégorie mise en avant.
Régler la grille de produits
Dans les options du widget Archive Products, vous choisissez le nombre de colonnes (par appareil, comme tout réglage responsive), le nombre de lignes par page et l’affichage de la pagination. Vous pouvez aussi afficher ou masquer le tri (prix, popularité, nouveautés) et le nombre de résultats.
Un repère simple : trois ou quatre colonnes sur ordinateur, deux sur mobile, pour que les photos de produits restent lisibles.
Lien affilié : si vous achetez Elementor Pro via un lien de cette page, Expertor perçoit une commission, sans surcoût pour vous.
