To implement an Ajax product search in WooCommerce using code, you’ll need to create a custom search form, handle the Ajax request in PHP, and display the search results dynamically. Below are the steps to achieve this:
Step 1: Create a Custom Search Form Create a custom search form where users can enter their search query. Add the following code to your theme’s template file (e.g., searchform.php) or a 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 Custom JavaScript for Ajax Search Create a new JavaScript file in your theme’s folder or a custom plugin. Name it something like custom-ajax-search.js and add the following code:
(function ($) {
$(document).ready(function () {
var searchInput = $('#product-search');
var searchResults = $('#search-results');
searchInput.on('input', function () {
var keyword = $(this).val();
// Send the AJAX request
$.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 the Custom JavaScript File Next, you need to enqueue the custom JavaScript file on the pages where you want to display the search form. Add the following code to your theme’s functions.php file or a custom 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: Create AJAX Handler for Product Search Create the AJAX handler function in your theme’s functions.php file or a custom plugin to handle the Ajax request and return the search results. Add the following code:
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, // Adjust the number of search results to display
);
$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 '<p>No products found.</p>';
}
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: Save Changes and Test Save the changes to your functions.php file or custom plugin. Now, when users type in the search form, Ajax will send the search query to the server and display the search results dynamically without refreshing the page.
Please note that this example assumes you have the WooCommerce templates set up correctly in your theme. If you’re using a custom theme or have overridden WooCommerce templates, you may need to adjust the code to match your template structure.
Always test the functionality thoroughly to ensure it works as expected before implementing it on a live site. Additionally, consider adding security measures, such as nonces, to your Ajax requests to prevent unauthorized access.
