[Total : 1    Moyenne : 5/5]

Le 4 avril dernier, WooCommerce annonçait fièrement l’arrivée de la mise à jour WooCommerce 3.0, enfin ! Avec elle une nouvelle galerie pour nos produits avec tout plein de fonctionnalités intégrées à WooCommerce : nouveau zoom, nouvelle aperçu de la galerie et des caractéristiques adaptées pour les mobiles.

Mais tout cela était trop beau. J’ai récemment eu une mauvaise surprise lors de la mise à jour de quelques sites e-commerce basés sur WooCommerce. Les images des produits WooCommerce ne s’ouvrent plus dans leur Lightbox, alors que cela fonctionnait parfaitement avant la mise à jour. Damned, vous aussi ?

La lightbox des produits ne fonctionne plus depuis la mise à jour WooCommerce 3.0

Ce que je veux dire c’est que : lorsque vous cliquez sur la photo d’un produit sur votre page produit, la photo s’ouvre dans une nouvelle page au lieu de s’ouvrir dans une lightbox.

Il est aussi possible que vos diaporama ou slideshow de produits ne fonctionnent plus.

Comment résoudre le problème de lightbox produits lié à WooCommerce 3.0 ?

1. Ouvrez le fichier functions.php de votre thème WordPress.
Par exemple : /wp-content/themes/votre-theme/functions.php

Important : Utilisez un Thème Enfant. Vous n’en avez pas ? Voici comment créer un Thème Enfant. Sinon, le code suivant sera écrasé lors de la prochaine mise à jour de votre thème.

2. Insérez le code suivant à la fin de votre fichier functions.php :

// Active la nouvelle galerie et lightbox de WooCommerce 3.0 et +
function wpc_theme_setup() {
    add_theme_support('wc-product-gallery-zoom');
    add_theme_support('wc-product-gallery-lightbox');
    add_theme_support('wc-product-gallery-slider');
}
add_action('after_setup_theme', 'wpc_theme_setup');

Vous pouvez supprimer au choix les fonctions que vous ne voulez pas implémenter. Par exemple, supprimer la ligne 4 et vous n’aurez plus la fonction wc-product-gallery-zoom, et donc plus de zoom sur vos photos de produits.

3. Sauvegardez functions.php et le transférer à la racine de votre thème. Puis, allez sur une page produit de votre site et testez. Vous pouvez maintenant vérifier que la lightbox et le slideshow fonctionnent correctement.

Conflits reconnus de la lightbox PrettyPhoto de WooCommerce 3 avec:

  • Un appel en double de la bibliothèque jQuery dans votre thème
  • L’extension Woocommerce Product Gallery Slider entre en conflit (vérifié le 20/04/2017).
    Solution : WPGS Options > Woocommerce 3.0 + Fix > Choisir « Yes » > Save

Cet article vous a plus ? Dîtes-le en commentaire et rejoignez-nous sur Facebook pour partager d’autres astuces et tutoriels gratuits !

Tibow Webdesign vous propose aussi ses services de conseils et de création sur-mesure pour tous vos projets de site Internet et Boutique e-commerce. Devis et conseils gratuits ici.

Créer un thème enfant avec WordPress (child theme)
Désactiver / Retirer les Produits Apparentés dans WooCommerce