WooCommerce : filtre d’administration pour rechercher des produits sans ensemble d’images de produit

Nous aidons un client qui possède un site WordPress WooCommerce qui perdait sa visibilité sur les moteurs de recherche depuis des années en raison de centaines de problèmes de code, de configuration et de contenu dus à des années de négligence, de plugins installés et désinstallés et de dizaines de thèmes.

Avec le lancement du nouveau site, nous avons observé les performances du site et avons récemment reçu le message suivant de Google Search Console :

Nous avons été surpris que la société ait des produits répertoriés dans WooCommerce qui n’avaient pas d’image de produit. Lorsque nous avons exploré le site nouvellement lancé, nous n’avons constaté aucun problème… en effet, le nouveau thème avait une image d’espace réservé qui apparaissait chaque fois qu’une image n’était pas définie. En conséquence, aucune erreur n’a été détectée pour les images introuvables.

Liste des produits WooCommerce

Notre étape suivante consistait à identifier les produits du site pour lesquels aucune image n’était définie. Ce n’est pas une tâche facile lorsqu’il y a des centaines de produits à filtrer. En conséquence, nous avons écrit notre propre filtre dans les produits WooCommerce pour filtrer la liste sur les produits sans ensemble d’images de produit.

Nous pouvons désormais facilement parcourir la liste et mettre à jour les images des produits si nécessaire, sans effort. Voici comment nous avons procédé.

Ajouter un filtre à la liste des produits d’administration WooCommerce

Dans la page function.php du thème enfant du client, nous avons ajouté les deux sections de code suivantes. Tout d’abord, nous construisons le champ de filtre :

// Add a filter on product for set product image
add_action('restrict_manage_posts', 'filter_products_by_image_presence');
function filter_products_by_image_presence() {
    global $typenow;
    $selected = isset($_GET['product_image_presence']) ? $_GET['product_image_presence'] : '';
    if ('product' === $typenow) {
        ?>
        <select name="product_image_presence" id="product_image_presence">
            <option value="">Filter by product image</option>
            <option value="set" <?php selected('set', $selected); ?>>Image Set</option>
            <option value="notset" <?php selected('notset', $selected); ?>>Image Not Set</option>
        </select>
        <?php
    }
}

Voici une explication étape par étape de ce que fait chaque partie du code :

• add_action('restrict_manage_posts', 'filter_products_by_image_presence');
  • Cette ligne s’accroche à restrict_manage_posts, qui est une action déclenchée dans la zone d’administration de WordPress, vous permettant d’ajouter des options de filtrage supplémentaires à la liste des publications. Ici, il est utilisé pour ajouter un nouveau filtre à la liste des produits WooCommerce.
• function filter_products_by_image_presence() { ... }
  • Ce bloc définit la fonction filter_products_by_image_presencequi génère du HTML pour un nouveau filtre de sélection déroulant sur l’écran d’administration du produit.
• global $typenow;
  • La variable globale $typenow est utilisé pour vérifier le type de la liste de publications actuelle afin de garantir que le filtre personnalisé est uniquement ajouté aux écrans de type de publication « Produits » et pas aux autres.
• $selected = isset($_GET['product_image_presence']) ? $_GET['product_image_presence'] : '';
  • Cette ligne vérifie s’il existe un filtre actif défini en recherchant le paramètre « product_image_presence » dans l’URL, qui est transmis sous forme de requête GET lorsque vous sélectionnez une option de filtre et soumettez le filtre. Il stocke la sélection actuelle pour conserver l’état sélectionné du filtre après le rechargement de la page.
• if ('product' === $typenow) { ... }
  • Cette instruction conditionnelle vérifie si le type de publication actuel est « produit », garantissant que le code contenu dans l’instruction if ne s’exécute que pour les produits WooCommerce.
  • Tout entre ?> et <?php est une sortie HTML, y compris la liste déroulante de sélection avec des options de filtrage par produits avec « Image Set » ou « Image Not Set ». PHP est intercalé pour gérer la sélection dynamique via le selected() fonction, qui génère le selected attribut si le courant $selected la valeur correspond à la valeur de l’option.
  • Le selected() function est une fonction d’assistance WordPress qui compare le premier argument avec le second et s’ils correspondent, elle affiche ‘selected=”selected”’, qui est l’attribut HTML nécessaire pour afficher une option sélectionnée dans une liste déroulante.

Ce code ajoute effectivement un filtre déroulant à la liste des produits, permettant à l’administrateur de filtrer la liste par produits ayant ou non un ensemble d’images. Ce filtre supplémentaire aiderait les utilisateurs à gérer des catalogues volumineux, en garantissant que les produits respectent les exigences des fiches Play Store, notamment l’attribution d’images dans le cadre du contrôle qualité des fiches produits.

Exécuter la requête sur la liste des produits d’administration WooCommerce

Ensuite, nous devons ajouter une requête qui s’exécutera et trouvera les produits pour lesquels aucun ensemble d’images n’est défini.

add_filter('parse_query', 'filter_products_query_by_image_presence');
function filter_products_query_by_image_presence($query) {
    global $pagenow, $typenow;

    if ('edit.php' === $pagenow && 'product' === $typenow && isset($_GET['product_image_presence']) && $_GET['product_image_presence'] != '') {
        $presence = $_GET['product_image_presence'];
        $meta_query = array(
            'relation' => 'OR',
            array(
                'key' => '_thumbnail_id',
                'compare' => 'NOT EXISTS'
            ),
            array(
                'key' => '_thumbnail_id',
                'value' => '0'
            )
        );

        if ('set' === $presence) {
            $meta_query = array(
                array(
                    'key' => '_thumbnail_id',
                    'compare' => 'EXISTS'
                ),
                array(
                    'key' => '_thumbnail_id',
                    'value' => array('', '0'), // Assuming '0' or '' could be placeholders for no image.
                    'compare' => 'NOT IN'
                ),
            );
        } elseif ('notset' === $presence) {
            $meta_query = array(
                'relation' => 'OR',
                array(
                    'key' => '_thumbnail_id',
                    'compare' => 'NOT EXISTS'
                ),
                array(
                    'key' => '_thumbnail_id',
                    'value' => '0'
                )
            );
        }

        $query->set('meta_query', $meta_query);
    }
}

Cet extrait de code permet de modifier la requête WordPress principale pour les listes de produits dans la zone d’administration afin de permettre le filtrage des produits selon qu’ils ont ou non une image associée. Voici une explication de ses composants :

• add_filter('parse_query', 'filter_products_query_by_image_presence');
  • Cette ligne relie le filter_products_query_by_image_presence fonction à la parse_query le crochet de filtre, qui est utilisé pour ajuster la requête principale que WordPress utilise pour récupérer les publications (ou les types de publications personnalisés comme les produits) dans le tableau de la liste d’administration.
• function filter_products_query_by_image_presence($query) { ... }
  • Cette fonction est définie pour modifier la requête de liste de produits en fonction de la présence d’images de produits. Le $query la variable est une instance de WP_Query classe, passée par référence, ce qui signifie que toute modification apportée à cet objet affectera la requête réelle exécutée par WordPress.
• global $pagenow, $typenow;
  • Ces variables globales sont des variables d’environnement WordPress. $pagenow est utilisé pour vérifier la page d’administration actuelle, et $typenow pour vérifier le type de message actuel.
  • L’instruction conditionnelle vérifie si la page actuelle est « edit.php » (la page par défaut pour répertorier les publications et les types de publication personnalisés), le type de publication est « produit » (ce qui signifie que nous sommes sur la liste des produits WooCommerce) et si un le filtre a été réglé via un GET paramètre nommé ‘product_image_presence’.
• Un nouveau tableau de méta-requêtes est créé en fonction de la valeur de « product_image_presence ». Ce tableau est conçu pour créer les conditions permettant de filtrer les produits avec ou sans images.
  • Le relation La clé définie sur « OR » indique que n’importe laquelle des conditions contenues dans la méta-requête peut être vraie pour récupérer les produits.
  • Si le filtre est défini sur « set », un nouveau $meta_query est créé pour trouver des produits avec des images. Les produits qui ont un « _thumbnail_id » (ce qui signifie qu’une image est définie) et non une chaîne vide ou « 0 » sont inclus.
  • Si le filtre est défini sur « notset », la méta-requête recherche les produits pour lesquels la clé méta « _thumbnail_id » soit n’existe pas, soit est définie sur « 0 », ce qui signifie qu’aucune image n’est associée au produit.
• $query->set('meta_query', $meta_query);
  • Cette ligne modifie la requête principale en définissant la ‘meta_query’ avec les conditions définies dans $meta_query.

Cette personnalisation aide un administrateur de boutique WooCommerce à trouver rapidement des produits dépourvus d’images, ce qui est crucial pour les stratégies de gestion des stocks, de marketing et de vente, car les produits avec des images sont plus susceptibles de se vendre et de fournir aux clients les informations visuelles nécessaires. En garantissant que les listes de produits sont complètes avec des images, les efforts de vente et de marketing peuvent être plus efficaces.