WooCommerce: AJAX Button to Load More Related Products

WooCommerce AJAX Button for More Related Products

Looking to improve your product pages? Here’s how to add a “Load More Related Products” button using AJAX in WooCommerce without page reloads.

Step 1: Write JavaScript

Create custom-ajax-related-products.js with this jQuery code snippet:

(function ($) {
  $(document).on('click', '#load-more-related-products', function (e) {
    e.preventDefault();
    var btn = $(this);
    var page = btn.data('page');

    $.post(wc_add_to_cart_params.ajax_url, {
      action: 'custom_load_more_related_products',
      product_id: btn.data('product-id'),
      page: page,
    }, function (response) {
      if (response) {
        $('#related-products').append(response);
        btn.data('page', page + 1);
        if ($.trim(response) === '') btn.remove();
      }
    });
  });
})(jQuery);

Step 2: Register Script

Enqueue it in your theme or plugin:

function add_ajax_script_for_related_products() {
  if (is_product()) {
    global $product;
    wp_enqueue_script('custom-ajax-related-products', get_stylesheet_directory_uri() . '/custom-ajax-related-products.js', ['jquery'], null, true);
    wp_localize_script('custom-ajax-related-products', 'custom_ajax_related_products', [
      'ajax_url' => admin_url('admin-ajax.php'),
      'product_id' => $product->get_id(),
      'page' => 2,
    ]);
  }
}
add_action('wp_enqueue_scripts', 'add_ajax_script_for_related_products');

Step 3: Handle AJAX Call

Add this to your functions.php:

function load_more_related_products_ajax() {
  $product_id = intval($_POST['product_id']);
  $page = intval($_POST['page']);

  $related = new WP_Query([
    'post_type' => 'product',
    'posts_per_page' => 4,
    'post__not_in' => [$product_id],
    'orderby' => 'rand',
    'post_status' => 'publish',
  ]);

  if ($related->have_posts()) {
    ob_start();
    while ($related->have_posts()) {
      $related->the_post();
      wc_get_template_part('content', 'product');
    }
    wp_reset_postdata();
    echo ob_get_clean();
  }

  wp_die();
}
add_action('wp_ajax_custom_load_more_related_products', 'load_more_related_products_ajax');
add_action('wp_ajax_nopriv_custom_load_more_related_products', 'load_more_related_products_ajax');

Step 4: Add Container to Template

Place this markup in single-product.php:

<div id="related-products">
  <?php wc_get_template('single-product/related.php'); ?>
</div>

Step 5: Test on Frontend

After saving all files, open any product page and try loading more related products via the button.