WooCommerce Ajax Product Search with Custom Code

WooCommerce Ajax Product Search with Custom Code

  Implementing an Ajax-based product search in WooCommerce requires setting up a search form, handling Ajax in PHP, and rendering real-time results. Follow these steps:

Step 1: Design the Custom Search Form

Insert the form into your theme (e.g., searchform.php) or custom plugin:

<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: Add Ajax JavaScript

Create a JavaScript file (e.g., custom-ajax-search.js) and include the code:

(function ($) {
  $(document).ready(function () {
    var searchInput = $('#product-search');
    var searchResults = $('#search-results');

    searchInput.on('input', function () {
      var keyword = $(this).val();

      $.ajax({
        type: 'POST',
        url: custom_ajax_search.ajax_url,
        data: {
          action: 'custom_ajax_product_search',
          keyword: keyword,
        },
        beforeSend: function () {
          searchResults.html('<p>Loading...</p>');
        },
        success: function (response) {
          searchResults.html(response);
        },
      });
    });
  });
})(jQuery);

Step 3: Enqueue JavaScript File

Enqueue the JS in your theme’s functions.php or plugin:

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

Step 4: PHP Handler for Ajax

Add this in functions.php or plugin to process Ajax request:

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

  $args = array(
    'post_type' => 'product',
    'post_status' => 'publish',
    's' => $keyword,
    'posts_per_page' => 5,
  );

  $search_query = new WP_Query($args);

  if ($search_query->have_posts()) {
    while ($search_query->have_posts()) {
      $search_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: Final Testing

After saving changes, test the Ajax search on your site. Ensure WooCommerce templates are compatible and consider adding nonces for security.