Depuis l’arrivée du thème builder dans DIVI, il y a une méthode beaucoup plus simple pour créer et assigner un modèle spécifique aux archives produits. Vous trouverez un tutoriel rapide en suivant ce LIEN. Cette méthode reste fonctionnelle mais je vous recommande plutôt d’utiliser le thème builder.

Dans ce tutoriel, nous allons voir comment personnaliser une page d’archive de catégorie produit Woocommerce à l’aide du DIVI Builder.

Pour mettre en place cette technique, il faut utiliser un thème enfant (si vous ne savez pas comment faire, un tutoriel très simple qui vous guidera pour en créer un est disponible en suivant ce lien.)

La première étape consiste à créer le modèle de page que vous souhaitez utiliser pour présenter les produits d’une catégorie donnée en utilisant le générateur DIVI.

Ce modèle de page doit être créé directement dans la bibliothèque DIVI.

Vous pouvez ajouter ce que vous voulez au sein de ce modèle de page, mais il est impératif d’y insérer :

• soit un module boutique en sélectionnant uniquement la catégorie que vous souhaitez afficher sur cette page

• soit un shortcode Woocommerce dans un module code, qui fera référence à la catégorie de produit que vous souhaitez afficher :

[product_category columns="3" category="nom-de-la-categorie" orderby="date" order="desc"]

Exemple de modèle de page de catégorie contenant un module boutique :

Exemple de modèle de page de catégorie contenant un module code avec un shortcode woocommerce :

Ci-dessous, le visuel correspondant à ce modèle de page de catégorie :

Maintenant que notre modèle de page est créé, il faut que nous puissions l’appeler depuis le fichier d’archive de catégorie. Pour ce faire, nous allons avoir besoin d’un shortcode en charge de récupérer notre modèle par son identifiant.

Pour mettre en place ce système, nous avons deux possibilités :

• Pour celles et ceux qui ne souhaitent pas coder ou veulent se simplifier la vie : Utiliser mon plugin SIMPLE DIVI SHORTCODE

• Pour celles et ceux que le code n’effraie pas : Ajouter une fonction au fichier functions.php de notre thème enfant en utilisant le code ci-dessous

//Shortcode to show the module
function showmodule_shortcode($moduleid) {
extract(shortcode_atts(array('id' =>'*'),$moduleid)); 
return do_shortcode('[et_pb_section global_module="'.$id.'"][/et_pb_section]');
}
add_shortcode('showmodule', 'showmodule_shortcode');

Quelle que soit la méthode que vous aurez choisie, vous pouvez à présent appeler votre modèle Divi depuis un template php en vous basant sur son identifiant.

Si vous avez opté pour la méthode d’ajout du code dans functions.php, vous retrouverez l’identifiant de votre modèle de page dans la barre d’adresse du navigateur (quand ce dernier est en cours d’édition) soit au survol de la ligne relative au modèle au sein de la bibliothèque Divi.

Le shortcode correspondant sera alors :

[showmodule id="378"]

où 378 est l’identifiant de votre modèle (Chez vous ce ne sera pas 378 mais le nombre lu dans la barre d’adresse de votre navigateur.)

Si vous avez opté pour mon plugin, vous pouvez directement copier le shortcode depuis la colonne shortcode visible dans la bibliothèque Divi (ou depuis la metabox du modèle en cours d’édition) :

La dernière étape consiste à insérer ce shortcode dans la page d’archive de notre catégorie. Pour cela, il va falloir modifier un couple de fichier pour chaque catégorie à personnaliser.

On va commencer par ajouter un dossier à notre thème enfant. Ce dossier doit s’appeler « woocommerce »

Dans ce nouveau dossier, pour chaque catégorie à personnaliser il va nous falloir un fichier de taxonomie et un fichier archive.

• Fichier de taxonomie :

Copiez le code ci-dessous dans votre éditeur de texte préféré puis sauvegardez votre fichier (dans le répertoire woocommerce de votre thème enfant) en lui donnant le nom : taxonomy-product_cat-NomCategorie.php en prenant soin de remplacer -NomCategorie par le nom de votre catégorie (par exemple si votre catégorie est « bagues » votre nom de fichier sera taxonomy-product_cat-bagues.php). N’oubliez pas non plus le « – » avant le nom de la catégorie

<?php
/**
 * The Template for displaying products in a product category. Simply includes the archive template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/taxonomy-product_cat.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @package 	WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
//N'oubliez pas de remplacer "NomCategorie" par le nom de votre catégorie dans la ligne ci-dessous
wc_get_template( 'archive-product-NomCategorie.php' );

Attention : vous devez modifier la dernière ligne du code ci-dessus et remplacer NomCategorie dans le nom du fichier archive-product-NomCategorie.php par le nom de votre catégorie. Par exemple si la catégorie est bagues, vous devrez avoir archive-product-bagues.php comme nom de fichier appelé.

• Fichier d’archive de catégorie produit :

Copiez le code ci-dessous dans votre éditeur de texte préféré puis sauvegardez votre fichier (dans le répertoire woocommerce de votre thème enfant) en lui donnant le nom : archive-product-NomCategorie.php en prenant soin de remplacer -NomCategorie par le nom de votre catégorie (par exemple si votre catégorie est « bagues » votre nom de fichier sera archive-product-bagues.php). N’oubliez pas non plus le « – » avant le nom de la catégorie

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

get_header( 'shop' ); 

//Remplacez le shortcode ci dessous par celui relatif à votre modèle de page de catégorie.
// Si pour votre modèle vous avez l'id 378, remplacez ID_Modèle par 378
echo do_shortcode('[showmodule id="ID_Modèle"]');

get_footer( 'shop' ); ?>

Attention : vous devez remplacer le shortcode showmodule de l’avant dernière ligne du code ci-dessus par celui relatif à votre modèle de page (ou remplacer ID_Modèle par l’identifiant de votre modèle de page)

A la fin de la personnalisation de votre catégorie (bagues pour cet exemple), vous aurez les 2 fichiers suivants dans le répertoire woocommerce de votre thème enfant :

Vous avez à présent toutes les cartes en mains pour réaliser des pages de catégories produits personnalisées.

N’hésitez pas à commenter et poser des questions si vous avez besoin d’aide.