Code Ajax Product Search for WooCommerce Easily

Code Ajax Product Search for WooCommerce Easily

  Want real-time WooCommerce search? Here’s a complete guide to building a custom Ajax product search using code.

Step 1: Build a Search Form

Start by adding a custom form in your template (like searchform.php):

<form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <input type="text" placeholder="Search for products..." name="s" id="product-search" />
  <div id="search-results"></div>
</form>

Step 2: JavaScript for Ajax Request

Use this JS (saved as custom-ajax-search.js) to trigger live search:

(function ($) {
  $(function () {
    var input = $('#product-search');
    var results = $('#search-results');

    input.on('input', function () {
      var keyword = $(this).val();
      $.post(custom_ajax_search.ajax_url, {
        action: 'custom_ajax_product_search',
        keyword: keyword,
      }, function (data) {
        results.html(data);
      });
    });
  });
})(jQuery);

Step 3: Load JS in WordPress

Include this code in functions.php to enqueue the script:

function custom_enqueue_ajax_search_script() {
  if (is_search()) {
    wp_enqueue_script('custom-ajax-search', get_stylesheet_directory_uri() . '/custom-ajax-search.js', ['jquery'], '1.0', true);
    wp_localize_script('custom-ajax-search', 'custom_ajax_search', ['ajax_url' => admin_url('admin-ajax.php')]);
  }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_ajax_search_script');

Step 4: Create PHP Handler

Paste this function in functions.php to return products:

function custom_ajax_product_search() {
  check_ajax_referer('custom_ajax_product_search', 'security');
  $keyword = sanitize_text_field($_POST['keyword'] ?? '');

  $args = [
    'post_type' => 'product',
    'post_status' => 'publish',
    's' => $keyword,
    'posts_per_page' => 5,
  ];

  $query = new WP_Query($args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      wc_get_template_part('content', 'product');
    }
    wp_reset_postdata();
  } else {
    echo 'No products found.';
  }
  wp_die();
}
add_action('wp_ajax_custom_ajax_product_search', 'custom_ajax_product_search');
add_action('wp_ajax_nopriv_custom_ajax_product_search', 'custom_ajax_product_search');

Step 5: Test It Live

After setup, test the Ajax product search on the frontend. Ensure WooCommerce is configured and always use proper security best practices.