Lorsque vous configurez votre boutique en ligne avec WooCommerce, il est courant de vouloir afficher une sélection de produits aléatoire sur votre page d'accueil. Cependant, si certains de ces produits n'ont pas d'image en avant, cela peut poser un problème. Cet article vous montrera comment afficher huit produits WooCommerce, même s'ils n'ont pas d'image en avant.
Publié par Miha
Lors de la création d’un site de commerce électronique pour un client, j’ai importé un fichier CSV de produits, mais certaines images étaient manquantes. Cela a provoqué un problème d’affichage lorsque certains produits s’affichaient sans image sur les pages principales. Pour résoudre ce problème, j’ai choisi de masquer les produits sans image pour garantir une présentation homogène et professionnelle de la boutique en ligne.
Le code utilisé dans cet exemple utilise une boucle personnalisée pour récupérer huit produits WooCommerce de manière aléatoire. Le code exclura automatiquement tout produit qui n’a pas d’image en avant et chargera un autre produit à la place pour garantir que vous avez toujours huit produits affichés.
Voici le code complet :
// début du code
$args = array(
'post_type' => 'product',
'posts_per_page' => 8,
'orderby' => 'rand', // trier de manière aléatoire
);
$custom_query = new WP_Query($args);
$counter = 0;
if ($custom_query->have_posts()) :
while ($custom_query->have_posts() && $counter < 8) :
$custom_query->the_post();
if (has_post_thumbnail()) :
$counter++; // Incrémente le compteur de produits affichés avec des images
get_template_part('view/product-loop');
else :
// Charger un autre produit s'il n'a pas d'image en avant
$args['post__not_in'][] = get_the_ID(); // Exclure le produit en cours de la requête suivante
$args['posts_per_page']++; // Charger un produit supplémentaire pour remplacer celui sans image
$custom_query_no_image = new WP_Query($args);
if ($custom_query_no_image->have_posts()) :
while ($custom_query_no_image->have_posts() && $counter < 8) :
$custom_query_no_image->the_post();
$counter++; // Incrémente le compteur de produits affichés avec des images
get_template_part('view/product-loop');
endwhile;
wp_reset_postdata();
endif;
endif;
endwhile;
wp_reset_postdata();
endif;
// fin du code
Expliquons un peu plus en détail comment fonctionne ce code.
Tout d’abord, nous définissons un tableau d’arguments pour notre requête de produits WooCommerce. Nous demandons à la requête de récupérer 8 produits au hasard en utilisant ‘orderby’ => ‘rand’.
Ensuite, nous initialisons un compteur à zéro pour suivre le nombre de produits que nous avons affichés avec des images. Nous utilisons une boucle while pour parcourir les produits récupérés par notre requête.
Dans notre boucle, nous vérifions si le produit en cours a une image en avant en utilisant la fonction has_post_thumbnail(). Si c’est le cas, nous affichons le produit en utilisant get_template_part() et incrémentons notre compteur de produits affichés avec des images.
Si le produit en cours n’a pas d’image en avant, nous excluons ce produit de la requête suivante en ajoutant son ID à la clé ‘post__not_in’ de notre tableau d’arguments. Nous augmentons également la valeur de ‘posts_per_page’ de notre tableau d’arguments pour charger un produit supplémentaire
Partager sur
19 Octobre 2023
16 Mars 2023
