# Comment ajouter un bouton « Charger plus de produits » à votre boutique WooCommerce en Guadeloupe (sans plugin)
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**.
Cette solution est particulièrement utile pour un **site e-commerce professionnel**, notamment dans des secteurs comme **le tourisme, la mode ou encore les produits artisanaux locaux**.
—
## 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** :
« `php
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 ‘
‘;
}
}, 5 );
« `
Pour supprimer la pagination WooCommerce et éviter les doublons :
« `php
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` :
« `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`** :
« `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 :
« `php
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](https://www.salam-gp.com/creation-de-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](https://www.salam-gp.com/referencement-internet-naturel-seo-guadeloupe/)** et **[Google Ads](https://www.salam-gp.com/referencement-google-adwords-guadeloupe/)** pour attirer plus de clients et booster votre chiffre d’affaires.
—
### **Source : Amphibee**