Comment ajouter un bouton « Charger plus de produits » à votre boutique WooCommerce (sans plugin)

Vous voulez améliorer l’expérience utilisateur de votre boutique WooCommerce ? Un bouton “Charger plus de produits” pourrait bien être votre nouvel atout. En plus de rendre la navigation plus fluide, il permet de charger vos produits en temps réel, sans recharger toute la page. Et le meilleur dans tout ça ? Vous pouvez l’ajouter sans utiliser de plugin.

Que vous utilisiez un thème WooCommerce classique ou un thème basé sur des blocs, nous allons vous montrer comment configurer cette fonctionnalité étape par étape, tout en explorant des bonus comme le défilement infini. C’est parti !

Pourquoi ajouter un bouton « Charger plus de produits » ?

L’affichage de tous vos produits sur une seule page peut ralentir votre site, et la pagination classique n’est pas toujours pratique. Avec un bouton « Charger plus de produits », vous :

• Améliorez l’expérience utilisateur : La navigation est plus intuitive, surtout sur mobile.

• Réduisez les temps de chargement : Les produits sont chargés par lots.

• Ajoutez une touche moderne : C’est une fonctionnalité attendue par beaucoup de clients aujourd’hui.

En bref, c’est une solution efficace pour booster la navigation sur votre boutique, tout en conservant un design épuré.

Méthode 1 : Ajouter un bouton avec AJAX (pour thèmes classiques)

Dans cette méthode, nous allons intégrer un bouton « Charger plus de produits » à un thème WooCommerce classique, comme Storefront, sans utiliser de plugin. Cette approche nécessite un peu de HTML, PHP, et jQuery, mais rassurez-vous, on vous guide pas à pas.

Étape 1 : Ajouter le bouton HTML

Le premier objectif est d’afficher un bouton sous la liste des produits. Pour cela, on utilise le hook woocommerce_after_shop_loop, qui permet d’ajouter du contenu après la boucle des produits sur les pages de boutique et catégories.

Voici le code à ajouter dans le fichier functions.php de votre thème enfant :

add_action( 'woocommerce_after_shop_loop', function() {

    global $wp_query;

    // Vérifier qu'il y a plus d'une page de produits

    if ( $wp_query->max_num_pages > 1 ) {

        echo '<div class="load-more-products button">Charger plus de produits</div>';

    }

}, 5 );

Pour rendre la page plus propre, on peut aussi supprimer la pagination par défaut de WooCommerce :

add_action( 'init', function() {

    remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );

    remove_action( 'woocommerce_before_shop_loop', 'woocommerce_pagination', 10 );

} );

Si vous utilisez Storefront, voici la version adaptée pour ce thème :

add_action( 'init', function() {

    remove_action( 'woocommerce_before_shop_loop', 'storefront_woocommerce_pagination', 30 );

} );

À ce stade, vous devriez voir un bouton sous vos produits, mais il ne fait encore rien. Patience, ça arrive !

Étape 2 : Ajouter le script AJAX avec jQuery

Passons maintenant à la partie dynamique : faire fonctionner ce bouton pour qu’il charge vos produits sans recharger la page. Créez un fichier load-more-products.js dans le dossier de votre thème enfant, puis ajoutez ce code dans le fichier 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 code dans le fichier load-more-products.js :

jQuery(function($) {

    $('.load-more-products').click(function() {

        const button = $(this);

        const 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(data) {

                if (data) {

                    $('.products').append(data);

                    loadmore_params.currentPage++;

                    if (loadmore_params.currentPage == loadmore_params.maxPage) {

                        button.remove();

                    } else {

                        button.text('Charger plus de produits');

                    }

                } else {

                    button.remove();

                }

            }

        });

    });

});

Étape 3 : Traiter la requête AJAX avec PHP

Pour que tout fonctionne, il faut que le backend de WordPress puisse répondre à nos requêtes AJAX. Voici le code à ajouter dans functions.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();

}

Et voilà ! Votre bouton fonctionne désormais comme un charme.

Méthode 2 : Pour les thèmes basés sur les blocs

Si vous utilisez un thème moderne basé sur des blocs, comme Twenty Twenty-Five, la méthode précédente ne fonctionne pas. Pourquoi ? Parce que les blocs remplacent les hooks classiques.

Dans ce cas, vous pouvez :

• Créer un bloc personnalisé pour ajouter un bouton « Charger plus ». Cela nécessite des connaissances en développement de blocs WordPress.
• Utiliser un plugin comme Simple Load More Block, qui facilite l’ajout de ce type de fonctionnalité.

Avec ce plugin, vous pouvez intégrer un bouton « Charger plus » directement dans un Query Loop Block, ou activer un défilement infini pour un effet encore plus moderne.

Bonus : Ajouter un défilement infini

Le défilement infini charge automatiquement les produits lorsque l’utilisateur atteint le bas de la page. Voici comment l’activer avec Simple Load More Block :

• Ajoutez un Query Loop Block sur votre page.

• Remplacez la pagination par un bloc « Load More ».

• Activez l’option « Infinite Scroll » dans les paramètres du bloc.

Et voilà, vos produits se chargent maintenant de manière continue !

Une boutique WooCommerce moderne et fluide

Ajouter un bouton “Charger plus de produits” (ou un défilement infini) est une excellente façon d’améliorer l’expérience utilisateur sur votre boutique WooCommerce. Que vous utilisiez un thème classique ou un thème basé sur les blocs, ces options apportent une touche de modernité tout en optimisant les performances. Vous avez besoin d’aide pour personnaliser votre boutique ? Chez AmphiBee experts WordPress, on adore plonger dans les défis WooCommerce pour créer des solutions sur-mesure. Contactez-nous pour transformer votre boutique en un espace intuitif et performant.