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

In the success and failure of any online business, user experience plays a pivotal role. It highly influences retaining visitors and converting them into customers. The traditional pagination system, where users click through multiple pages to explore products, can be cumbersome and may lead to higher bounce rates. The "Load More Button" addresses this challenge by providing a seamless, uninterrupted browsing experience. Users can effortlessly view additional products without the need for multiple page loads, creating a more dynamic and engaging shopping environment. This not only improves user satisfaction but also encourages prolonged interaction with your online store, potentially leading to increased sales and customer loyalty. Whether through manual coding or a plugin, integrating a "Load More Button" is a strategic move to elevate the overall usability and appeal of your WooCommerce website.

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.

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

Depending on who you ask, there are multiple ways to carry out the task at hand. These methods include doing code 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. Navigate to your WordPress dashboard.
2. Go to "Appearance" and select "Theme Editor."

Step 2: Locating the Functions.php File

Locate and click on the "Theme Functions" or "functions.php" file in the right sidebar.

Step 3: Adding Custom Functions

Insert the following code at the end of the functions.php file: 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'));       wp_localize_script('custom_loadmore', 'custom_loadmore_params', array(         'ajaxurl' => admin_url('admin-ajax.php'),         'posts' => json_encode($wp_query->query_vars),         'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,         '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() {     $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();               // Your loop content goes here           endwhile;     endif;     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 following HTML code where you want the button to appear: <div class="custom-loadmore-container"> <button id="custom-loadmore">Load more</button> </div>
3. Customize the loop content within the while loop in the custom_loadmore_ajax_handler function to display your product information.

Step 5: Styling the Button

Style the button using CSS to match your theme's design. #custom-loadmore { background-color: #007bff; color: #fff; padding: 10px 20px; border: none; cursor: pointer; } #custom-loadmore:hover { background-color: #0056b3; }

Step 6: Save Changes

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

Adding "Load More Button" using a Plugin

In this section, we'll explore an alternative method using the "WooCommerce Ajax Pagination and Infinite Scroll" plugin.

Step 1: Download and Install the Plugin

1. Download the Load More product for WooCommerce.zip file from your WooCommerce account.
2. Go to WordPress Admin > Plugins > Add New and Upload Plugin > Choose File (for the file that was downloaded).
3. Install Now and Activate the extension.

Plugin Configuration

In the WP admin panel, go to WooCommerce > Settings and click the Woo Pagination tab. You will find extension settings, including General, Back-to-top, and Show Less button settings. In the general settings section, you will find the following settings.

• Enable the Woo pagination plugin from general settings: Click the checkbox to enable the
• Ajax pagination & infinite scroll for WooCommerce plugin. Select the product loading type: Select the product loading type from the dropdown menu. In the dropdown menu, you will find the following:
  • Pagination
  • Infinite Scroll
  • Load More Button

From here select the product loading type as “Load More Button”

Load More Button Settings

When you select the product load type as load more button, you will have to configure the following settings:

• Choose the number of products to load or display initially: Enter the number of products you want to display when the page loads.
• Upload loading icon: Enable the checkbox to upload the product loading icon.
• Product loading icon: Select the product loading icon from the default icons.
• Choose product loading animation: You can choose from multiple animations as to how new products will load. Select animation style from the dropdown menu, which includes:
  • Default
  • Left to Right
  • Right to Left
  • Top to Bottom
  • Bottom to Top
• Background color (for button): Select the background color for the load more button.
• Background hover color (for button): Choose the color you want to set when hovering on the load more button.
• Text color: Choose the color of text on the load more button.
• Text color on mouse-hover: Select the color when the mouse is hovered on the load more button.
• Custom text for button (by default, load more): Enter the text you want to display on the button. By default, the button text is set to “Load More.”