L'amélioration de l’expérience utilisateur est un élément clé pour optimiser une boutique en ligne. Une navigation fluide et un chargement rapide des produits sont essentiels pour faciliter le parcours des clients et maximiser les conversions. Si vous gérez une boutique WooCommerce en Guadeloupe, l'ajout d'un bouton « Charger plus de produits » est une solution efficace pour éviter des rechargements de page inutiles tout en conservant de bonnes performances.
Dans cet article, nous allons vous expliquer comment ajouter ce bouton sans utiliser de plugin, en utilisant uniquement du HTML, du PHP et du JavaScript. Que vous ayez un thème classique ou un thème basé sur des blocs, nous avons la solution adaptée.
Pourquoi ajouter un bouton « Charger plus de produits » ?
Par défaut, WooCommerce propose une pagination de type "pages", ce qui oblige les utilisateurs à naviguer entre différentes pages pour consulter l’ensemble des produits. Cependant, cette méthode peut être fastidieuse et peu intuitive, surtout sur mobile.
💡 Ajouter un bouton "Charger plus" permet de :
- 🌟 Rendre la navigation plus intuitive, améliorant ainsi l'expérience utilisateur ;
- ⚡ Charger les produits en temps réel, réduisant le temps de chargement ;
- 🎨 Apporter une touche moderne et design, idéale pour un site WooCommerce en Guadeloupe.
Méthode 1 : Ajouter un bouton avec AJAX (pour thèmes classiques)
Si vous utilisez un thème classique WooCommerce (tel que Storefront), voici comment ajouter un bouton "Charger plus de produits" grâce à AJAX.
1️⃣ Ajouter le bouton HTML
Pour insérer le bouton sous la liste des produits, ajoutez ce code dans votre fichier `functions.php` du thème enfant :
add_action( 'woocommerce_after_shop_loop', function() { global $wp_query;
// Vérifier s'il y a plus d'une page de produits if ( $wp_query->max_num_pages > 1 ) { echo '
Charger plus de produits'; } }, 5 );Pour supprimer la pagination WooCommerce et éviter les doublons :
add_action( 'init', function() { remove_action('woocommerce_after_shop_loop', 'woocommerce_pagination', 10); remove_action('woocommerce_before_shop_loop', 'woocommerce_pagination', 10); });
2️⃣ Ajouter le script AJAX avec jQuery
Créez un fichier `load-more-products.js` dans votre thème enfant et chargez-le via cette fonction dans `functions.php` :
add_action( 'wp_enqueue_scripts', function() { global $wp_query;
wp_register_script( 'load_more_products', get_stylesheet_directory_uri() . '/load-more-products.js', array('jquery', 'woocommerce') );
wp_localize_script( 'load_more_products', 'loadmore_params', array( 'queryVars' => json_encode($wp_query->query_vars), 'currentPage' => get_query_var('paged') ? get_query_var('paged') : 1, 'maxPage' => $wp_query->max_num_pages, ) );
wp_enqueue_script('load_more_products'); });
Ajoutez ensuite ce script dans `load-more-products.js` :
jQuery(function($) { $('.load-more-products').click(function() { var button = $(this); var data = { 'action': 'load_more_products', 'query': loadmore_params.queryVars, 'page': loadmore_params.currentPage, };
$.ajax({ url: woocommerce_params.ajax_url, data: data, type: 'POST', beforeSend: function() { button.text('Chargement...'); }, success: function(response) { if (response) { $('.products').append(response); loadmore_params.currentPage++;
if (loadmore_params.currentPage == loadmore_params.maxPage) { button.remove(); } else { button.text('Charger plus de produits'); } } else { button.remove(); } } }); }); });
3️⃣ Traiter la requête AJAX avec PHP
Ajoutez ce code à `functions.php` pour gérer la requête sur le serveur :
add_action('wp_ajax_load_more_products', 'load_more_products_callback'); add_action('wp_ajax_nopriv_load_more_products', 'load_more_products_callback');
function load_more_products_callback() { $args = json_decode(stripslashes($_POST['query']), true); $args['paged'] = $_POST['page'] + 1; $args['post_status'] = 'publish';
query_posts($args);
if (have_posts()) : while (have_posts()): the_post(); wc_get_template_part('content', 'product'); endwhile; endif;
wp_die(); }
Méthode 2 : Pour les thèmes basés sur les blocs
Si vous utilisez un thème moderne basé sur Full Site Editing (FSE) comme Twenty Twenty-Five, la méthode précédente ne fonctionnera pas. WooCommerce fonctionne ici avec des Query Loop Blocks, rendant nécessaire l’installation d’un plugin comme Simple Load More Block.
⚙️ Étapes à suivre : 1. Insérez un Query Loop Block pour afficher les produits. 2. Remplacez la pagination par un bloc “Load More”. 3. Activez l’option de défilement infini dans les paramètres du bloc.
Cette méthode est idéale pour faire évoluer votre boutique WooCommerce en Guadeloupe avec des fonctionnalités dynamiques et interactives.
Bonus : Ajouter un défilement infini
Pour un site ultra-moderne, vous pouvez remplacer le bouton "Charger plus" par un défilement infini qui charge automatiquement les produits au fur et à mesure que l'utilisateur descend sur la page.
📌 Comment procéder avec Simple Load More Block : 1. Installez et activez le plugin Simple Load More Block. 2. Ajoutez un Query Loop Block dans l’éditeur de votre boutique. 3. Activez le mode "Infinite Scroll" pour un chargement dynamique.
Conclusion : Une boutique WooCommerce moderne et fluide en Guadeloupe
En intégrant un bouton “Charger plus de produits” ou un défilement infini, vous améliorez non seulement l’expérience utilisateur, mais aussi l’optimisation de votre boutique WooCommerce en Guadeloupe.
🎯 Besoin d’un accompagnement sur-mesure pour votre boutique WooCommerce ? Découvrez notre service de [création de site internet en Guadeloupe](/creation-site-internet-guadeloupe/) pour une boutique performante et adaptée à votre marché local.
🚀 Et pour améliorer la visibilité de votre boutique WooCommerce ? Consultez nos services dédiés au [référencement SEO en Guadeloupe](/referencement-seo-guadeloupe/) et [Google Ads](/referencement-google-adwords-guadeloupe/) pour attirer plus de clients et booster votre chiffre d’affaires.
