Le thème Divi fournit une option pratique dans leurs paramètres pour supprimer la barre latérale de la page de la boutique WooCommerce et de la page de catégorie. On peu aussi remarquer également une belle boîte « Paramétrages de la page Divi » sur chaque page de produit pour afficher ou masquer la barre latérale sur chaque produit individuel.

La nécessité de supprimer la barre latérale sur toutes les pages de produits

Cependant, la barre latérale est activée par défaut pour chaque produit WooCommerce ! Et si vous vouliez simplement supprimer la barre latérale pour chaque produit ? Peut-être que vous avez importé beaucoup de produits ou que vous préférez ne pas avoir à rappeler à vos clients de sélectionner manuellement « Pas de barre latérale » à chaque fois qu’ils ajoutent un nouveau produit à leur site.

De plus, que se passe-t-il si vous n’utilisez pas le Divi Builder sur vos pages produits et que vous souhaitez accélérer la modification de votre produit en désactivant complètement le Divi Builder sur tous vos types de publication de produit ? Cela pose un problème car cela supprimerait également la case « Paramétrages de la page Divi » qui vous permet de masquer la barre latérale sur votre produit !

Pourquoi la cacher visuellement avec du CSS ne peut ne pas être la meilleure option

Bien sûr, vous pouvez utiliser un CSS personnalisé pour masquer visuellement la barre latérale et pour ajuster la largeur de votre page. Cependant, je pense que c’est une meilleure idée d’empêcher le contenu d’être généré en premier lieu. Pourquoi ? Parce que la propriété CSS « display: none; » masque uniquement visuellement le contenu. Le contenu est toujours généré par WordPress et sera toujours chargé dans la page de vos visiteurs. Ainsi, même s’ils ne peuvent pas le voir, il peut toujours être lu par les moteurs de recherche et certains lecteurs d’écran. Pourquoi utiliserions-nous nos ressources de serveur pour générer la barre latérale et la bande passante client si notre seule intention est de la cacher ?

Un extrait de code simple

Vous trouverez ci-dessous un extrait de code avec quelques fonctions que vous pouvez utiliser pour supprimer complètement la barre latérale de toutes les pages de produits WooCommerce (ainsi que les pages de boutique et de catégorie) dans la version actuelle de Divi (Divi 3). Vous devrez le placer dans le fichier functions.php de votre thème enfant Divi.

La première fonction supprime la barre latérale tandis que la seconde ajuste le CSS pour permettre aux pages WooCommerce d’aller sur toute leur largeur en supprimant quelques classes de la balise body :

/**
 * Remove Divi sidebar from all WooCommerce Product pages (as well as Shop and Category pages)
 */
function mytheme_divi_output_content_wrapper_end() {
 echo '
     </div> <!-- #left-area -->
    </div> <!-- #content-area -->
   </div> <!-- .container -->
  </div> <!-- #main-content -->';
}
function mytheme_remove_divi_sidebar() {
 remove_action( 'woocommerce_after_main_content', 'et_divi_output_content_wrapper_end', 10 );
 add_action( 'woocommerce_after_main_content', 'mytheme_divi_output_content_wrapper_end', 10 ); 
}
add_action( 'init', 'mytheme_remove_divi_sidebar', 10 );
/**
 * Adjust the WooCommerce body classes for all WooCommerce Product pages (as well as Shop and Category pages)
 */
function mytheme_body_classes( $classes ) {
 if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) {
  $remove_classes = array('et_right_sidebar', 'et_left_sidebar', 'et_includes_sidebar');
  foreach( $classes as $key => $value ) {
        if ( in_array( $value, $remove_classes ) ) unset( $classes[$key] );
  }
  $classes[] = 'et_full_width_page';
 }
 return $classes;
}
add_filter('body_class', 'mytheme_body_classes', 20);