User experience is really important for online businesses. It affects whether people stick around and buy things. Sometimes, the old way of browsing through products, where you click on different pages, can be annoying. It might make people leave your site without buying anything. But there’s a solution: the “Load More Button.” This button makes browsing smoother. You can see more products without waiting for new pages to load. It’s a win-win: happier customers and more sales for you.

Why use the “Load More Button”?

Adding a WooCommerce load more products button to your store makes shopping smoother and more enjoyable for your customers, which can lead to more sales! Here’s why:

• Keeps People Browsing: The “Load More” button lets people see more products without waiting for new pages to load. This keeps them interested and looking around longer.
• Lower Bounce Rates: Those click-through page numbers can be confusing. A “Load More” button is easier to use, so people are less likely to get frustrated and leave your site.
• Faster Loading: The “Load More” button only loads a few products at a time, which makes your store feel faster. This is good because people don’t like to wait!
• Simpler Shopping: With a “Load More” button, people can see all the products they want on one page. No need to click through a bunch of pages to find what they’re looking for.
• More Sales: The more people see your products, the more likely they are to find something they love and buy it! The “Load More” button helps you show off more products, which can lead to more sales.

Add a “Load More” Button in WooCommerce with Coding

There are two ways to add this button: with code or with a plugin. We’ll look at both ways in easy steps.

Adding a “Show More” Button with Code

Here’s how to add the button yourself using code:

Step 1: Go to your WordPress control panel.

Step 2: Click on “Look” and then “Edit Theme.”

Step 3: Find the file called “Theme Functions” or “functions.php”.

Step 4: Then use this code below to functions file

?php

/**
 * Load next 12 products using AJAX
 */
function ajax_next_posts() {
global $product;
// Build Query
    $args = array(
            'post_type'             =>  'product',
            'posts_per_page'        =>  (int)$_POST['posts_per_page'],
            'orderby'               =>  'title',
            'order'                 =>  'ASC',
            'offset'                =>  (int)$_POST['post_offset'],
        );

if( !empty( $_POST['product_cat'] ) ) {
    $args['tax_query'] = array(
                            'relation'  => 'AND',
                                array (
                                    'taxonomy'  =>  'product_cat',
                                    'field' =>  'slug',
                                    'terms' => $_POST['product_cat'],
                                    'operator'  =>  'IN'
                                ),
                        );
}

$count_results = '0';

$ajax_query = new WP_Query( $args );

// Results found
if( $ajax_query->have_posts() ){

    // Start "saving" results' HTML
    $results_html = '';
    ob_start();

    while( $ajax_query->have_posts() ) {

        $ajax_query->the_post();
        echo wc_get_template_part( 'content', 'product' );

    }
    wp_reset_postdata();

    // "Save" results' HTML as variable
    $results_html = ob_get_clean();

} else {

    // Start "saving" results' HTML
    $results_html = '';
    ob_start();

    echo "none found!";

    // "Save" results' HTML as variable
    $results_html = ob_get_clean();

}

// Build ajax response
$response = array();

// 1. value is HTML of new posts and 2. is total count of posts
array_push ( $response, $results_html );
echo json_encode( $response );

// Always use die() in the end of ajax functions
die();
}
add_action('wp_ajax_ajax_next_posts', 'ajax_next_posts');
add_action('wp_ajax_nopriv_ajax_next_posts', 'ajax_next_posts');

Next, go to the file where you want the “Show More” button to appear on your shop page. This file usually has a name like “archive-product.php” or “taxonomy-product_shirt.php”.

In that file, add this code where you want the button to show up:

<div class="custom-showmore-container">
  <button id="custom-showmore">Show More Products</button>
</div>

You can also change the text on the button to say something else, like “Load More” or “View More”.

Save the changes to functions.php and your template file. Now, you have successfully added a “Load More Button” using custom coding in WooCommerce.

Add “Load More Button” using a Plugin

Step 1: Adding a Plugin for “Show More”

Here’s how to use a plugin to add a “Show More” button:

1. Download the Plugin: Find a plugin like “Load More Products for WooCommerce.”
2. Install the Plugin: In your WordPress dashboard, go to “Plugins” and then “Add New.” Click “Upload Plugin” and choose the downloaded file. Activate the plugin after installation.

Step 2: Setting Up the Plugin

1. Go to Settings: In your WordPress dashboard, navigate to “WooCommerce” and then “Settings.” Click the “Woo Pagination” tab.
2. Enable the Plugin: Find the general settings and check the box to enable “Ajax pagination & infinite scroll for WooCommerce.”
3. Choose Button Type: From the “Product loading type” dropdown menu, select “Load More Button.”
4. Configure Button Settings: You’ll see new options:
   • Number of Products to Show: Enter how many products you want to appear on the first page.
   • Loading Icon: Choose to display an icon while products are loading.
   • Loading Animation: Pick how new products will appear (slide in from different directions, etc.).
   • Button Design: Change the button’s background color, hover color, text color, and text on hover. You can even rename the button text (default is “Load More”).

Conclusion

Enhance user experience & boost sales with a ‘Load More Button’ in WooCommerce. Easy browsing, more sales! Get started now.