2 Methods to Add “Load More Button” in WooCommerce?

Web DesignWooCommerce
December 5, 2023,
2 Methods to Add “Load More Button” in WooCommerce?

Are you still implementing the traditional pagination system to help your customers navigate pages and explore products? If yes, then you are more likely to expect the increasing bounce rates for your site.

These traditional pagination systems are cumbersome and lead to poor user experiences and they abandon the website. The "Load More Button" addresses this challenge by providing a seamless, uninterrupted browsing experience.

You can choose these two methods for adding WooCommerce infinite scroll with a load more button:

  1. Custom coding
  2. Infinite scrolling WooCommerce plugin

These load more products for WooCommerce not only contribute to improved user experiences but ensure prolonged web-user interactions.

Let’s explore how to add a load more button for WooCommerce in this detailed blog.

How to Add a “Load More Button” in WooCommerce?

WooCommerce pagination has evolved and it has become convenient for users to explore products on multiple pages. To make this navigation and exploration easier for the users, there are two popular methods.

These methods include coding or using a plugin. We will explore both of these in detail.

Adding "Load More Button" with Coding

In this section, we'll explore how to manually implement a "Load More Button" in WooCommerce by using custom coding.

Follow these steps:

Step 1: Accessing Theme Files

  1. Go to your WordPress dashboard.
  2. Go to "Appearance" and select "Theme Editor."

Step 2: Locating the Functions.php File

To include a WooCommerce load more products button, you have to add the custom code to the theme function. Click on the  "functions.php" file to embed the code.

Step 3: Adding Custom Functions

Now at the end of the function.php file, add this code chunk

function custom_load_more_scripts() {

    global $wp_query;

    wp_enqueue_script('jquery');

 wp_register_script('custom-loadmore', get_stylesheet_directory_uri() . '/js/loadmore.js', array('jquery'), null, true);

   wp_localize_script('custom-loadmore', 'custom_loadmore_params', array(

        'ajaxurl'       => admin_url('admin-ajax.php'),

        'posts'         => json_encode($wp_query->query_vars), 

        'current_page'  => max(1, get_query_var('paged')), 

        'max_page'      => $wp_query->max_num_pages

    ));

    wp_enqueue_script('custom-loadmore');

}

add_action('wp_enqueue_scripts', 'custom_load_more_scripts');

function custom_loadmore_ajax_handler() {

       if (!isset($_POST['query']) || !isset($_POST['page'])) {

        wp_die();     }

       $args = json_decode(stripslashes(sanitize_text_field($_POST['query'])), true);

    $args['paged'] = absint($_POST['page']) + 1

    $args['post_status'] = 'publish';

    $query = new WP_Query($args);

    if ($query->have_posts()) :

        while ($query->have_posts()) : $query->the_post();

            wc_get_template_part('content', 'product'); 

        endwhile;

    endif;

    wp_reset_postdata(); 

    wp_die(); 

}

add_action('wp_ajax_loadmore', 'custom_loadmore_ajax_handler');

add_action('wp_ajax_nopriv_loadmore', 'custom_loadmore_ajax_handler');

Step 4: Creating the Load More Button in Your Template

  1. Open the template file where you want to display the "Load More Button" (e.g., archive-product.php or taxonomy-product_cat.php).

  2. Add the below lines in the HTML of the page on which you want the button to display <div class="custom-loadmore-container"> <button id="custom-loadmore">Load more</button> </div>

Step 5: Styling the Button

Style the WooCommerce load more button to ensure the button and the website theme are in sync.

#custom-loadmore 

{

 background-color: #007bff;

color: #fff; padding: 10px 20px; 

border: none; cursor: pointer; 

}

#custom-loadmore: hover

 { 

background-color: #0056b3; 

}

Step 6: Save Changes

After adding the code to your function.php file, save the changes to successfully add the WooCommerce infinite scroll and Ajax pagination options.

Adding "Load More Button" Using a Plugin

Don’t want to add the WooCommerce product pagination the hard way? Fret not, because here is the easy alternative for you.

The easy way is to use the WooCommerce load more products plugin.

Here is how the plugin works:

Step 1: Download and Install the Plugin

  1. Download the Load More product for WooCommerce.zip file, more specifically using your WooCommerce account.
  2. Now go to WordPress Admin > Plugins > Add New and Upload Plugin > Upload the file you downloaded.
  3. Click on Install Now and activate the plugin.

Plugin Configuration

From the admin panel, you can manage the configuration settings. Here you can make changes to the extension settings, general settings, and more.

In the general settings section, you can:

  1. Enable the WooCommerce pagination plugin: Go to the plugin’s general settings and click the checkbox to enable the Ajax pagination & infinite scroll for the WooCommerce plugin. 
  2. Select the product loading type: Select how you want the products to load. Select the product loading type from the available drop-down menu.

These are the product loading types that you can choose for the “Load More” button.

  • Pagination
  • Infinite Scroll
  • Load More Button

Load More Button Settings

After you select the product load type for the WooCommerce load more button, make sure to configure these settings for the button:

  • Choose the number of products to load or display initially: Set the total number of products you want to display initially.
  • Product loading icon: Choose the “load More” icons from the available options.
  • Choose product loading animation: To make the loading of the new products more attention-grabbing yet smooth, choose the product loading animation styles. The animation styles for the products you can choose are:
    • Default
    • Left to Right
    • Right to Left
    • Top to Bottom
    • Bottom to Top
  • Button Background Color: For the WooCommerce load more button, select the background color.
  • Button Background Hover Color: Choose the background color of the button when the mouse or the cursor is hovered over it.
  • Text Color: Also select the text color of the button.
  • Text color on Mouse Hover: Define the button text color on hovering the mouse.
  • Custom Text for Button: You can customize the button text or keep the default “Load More” text.

Why Add a “Load More Button”?

The incorporation of a "Load More Button" in your WooCommerce store offers a range of compelling benefits that can significantly enhance the overall user experience and contribute to the success of your online business. Here are five key advantages of WooCommerce load more products:

  • Enhanced User Engagement: The "Load More Button" facilitates a continuous and fluid browsing experience, keeping users engaged without the interruption of page reloads. This seamless navigation encourages visitors to explore more products, ultimately increasing the time they spend on your site.
  • Reduced Bounce Rates: Traditional pagination systems often lead to higher bounce rates as users may find it cumbersome to navigate through multiple pages. The "Load More Button" eliminates this friction, providing a user-friendly alternative that encourages visitors to delve deeper into your product offerings.
  • Improved Page Load Speed: By loading additional products dynamically without requiring a full page refresh, the "Load More Button" contributes to a faster and more efficient browsing experience. This not only enhances user satisfaction but also positively impacts your site's overall performance.
  • Streamlined Navigation: Users can quickly and effortlessly view more products within the same page, eliminating the need for additional clicks to access new content. This streamlined navigation simplifies the user journey, making it more intuitive and user-friendly.
  • Increased Conversion Opportunities: Keeping users engaged with a continuous flow of products increases the likelihood of discovering items of interest. The "Load More Button" creates more opportunities for users to find products they want, ultimately translating into improved conversion rates and increased sales for your WooCommerce store.

Conclusion

Add a WooCommerce load and an infinite scroll option to offer an extremely pleasant and memorable shopping experience to your customers. An experience that is not disruptive without making the user wait for the page to load to explore further products. You have two methods to do this, and a WooCommerce infinite scroll and Ajax pagination plugin is surely the best way.

Frequently Asked Questions!

What is a "Load More Button" in WooCommerce?

The process of dynamically loading more products for web users is done with a WooCommerce load more button. The WooCommerce infinite scroll and Ajax pagination is missing in the default setting and adding a “Load More” button can help. 

Why add a "Load More Button" instead of traditional pagination?

The traditional pagination is different from the Ajax pagination WooCommerce options. In the traditional method, the page is reloaded, offering a poor user experience. Adding a load more button offers better user experiences with no page reloads for displaying more products.

Can I add a "Load More Button" without coding?

Yes, with a WooCommerce pagination plugin, you can add a load more button to your WooCommerce site without getting into the complexities of coding.

Can I customize the appearance of the "Load More Button"?

Yes, the Ajax Pagination & Infinite Scroll for WooCommerce plugin enables you to customize the load more button for its color, text, and even display on the pages you want.