Personnalisation de la page boutique et archive de produits

Pour personnaliser la page Boutique de WooCommerce au moyen de DIVI, il faut créer un nouveau thème d’affichage pour cette page Boutique dans le DIVI Theme Builder (DIVITheme Builder) :

Une fois le thème ajouté dans la liste, cliquez sur le bouton “Sauvegarder les changements” :

Ensuite, cliquez sur “Ajouter un corps personnalisé” sur le thème que vous venez d’ajouter et sélectionnez “Construire un corps personnalisé” :

Lister les catégories de produits

Si vous souhaitez que la page Boutique liste les catégories de produits et non les produits, vous devez utiliser le shortcode  “

” à l’endroit où vous souhaitez mettre la liste des catégories.

La première chose à mettre dans votre thème est une section contenant le titre du poste et éventuellement le chemin de navigation (fil d’Ariane) de WooCommerce.
Vous pouvez enregistrer cette section en tant que “global” dans votre bibliothèque afin que l’on puisse la réutiliser plus tard sur les autres thèmes (liste des produits, page détaillée d’un produit, …) :

Ensuite, vous pouvez mettre une nouvelle section contenant le shortcode listant les catégories de produits :

Une fois terminé, cliquez sur le bouton “Sauvegarder” en bas à droite.

Si vous allez sur la page Boutique de votre site, elle devrait ressembler à ceci :

 

Lister des produits

Si vous souhaitez que votre page Boutique liste les produits et non les catégories de produits, vous ajoutez les sections et blocs suivants dans votre thème :

• Ajoutez une section contenant le titre du poste et éventuellement le chemin de navigation (fil d’Ariane) de WooCommerce
• Ajoutez une autre section avec le module DIVI “Produits Woo” avec les paramètres suivants :

  Le paramètre “utiliser la page actuelle” permet de lister les produits que la page actuelle est sensée lister.
  Exemple : si vous utilisez ce module pour la liste des produits d’une catégorie alors la page listera les produits de la catégorie correspondante uniquement.
  Si vous indiquez des filtres de recherche, uniquement les produits répondant à ces filtres seront affichés.

Si vous souhaitez afficher les Widgets de votre barre latérale (voir partie WooCommerce – Widgets), vous pouvez ajouter une colonne de droite en y mettant le module DIVI ‘Barre latérale”

Le thème devrait ressembler à ceci :

Votre page boutique devrait ressembler à ceci :

Si vous souhaitez que toutes les autres pages listant des produits utilisent également ce thème d’affichage, il suffit de sélectionner les pages suivantes au niveau des paramètres du module :

• Pages d’archives :
  • Toutes les pages de catégories de produits
  • Toutes les pages de couleurs de produits
  • Toutes les pages d’étiquettes de produits
• Pages WooCommerce :
  • Boutique
• Produits
  • Page d’archive des produits

Ainsi, toutes les pages listant des produits appliqueront ce thème d’affichage.

Dans les widgets de la barre latérale, si vous cliquez sur une catégorie de produits, si vous sélectionnez un attribut de produit (ex:  marque), si vous modifiez le filtre sur le prix, toutes les pages de résultats utiliseront le thème ci-dessus.