Enhancing the user experience of your WooCommerce-powered restaurant ordering system is crucial, and adding a live product search feature can significantly improve navigation. This feature allows customers to quickly find food items in your WooFood-powered menu without manually browsing through categories.
In this article, we’ll show you how to integrate a live product search above the accordion menu in WooFood using a simple jQuery script and PHP snippet.
Why Add Live Product Search to WooFood?
A live product search feature can:
✔ Improve the ordering experience by allowing instant product searches
✔ Enhance navigation, especially for menus with large numbers of items
✔ Increase conversions by helping customers find what they want faster
How to Implement Live Product Search in WooFood
To add a live search bar above the WooFood accordion menu, insert the following PHP snippet into your theme’s functions.php file:
add_action("wp_footer", function()
{
?>
<style>
input.woofood-live-search
{
width: 100%;
margin-bottom: 10px;
border: none;
border: 1px solid #bdb0b0;
padding: 10px;
}
</style>
<script>
jQuery(document).ready(function()
{
jQuery( "<input type='text' class='woofood-live-search' placeholder='Search for Products...'/> " ).insertBefore( ".woofood-accordion:first" )
jQuery( "<div class='woofood-live-results'><ul class='woofood-products'></ul></div>" ).insertBefore( ".woofood-accordion:first" )
});
jQuery(document).on('propertychange input', '.woofood-live-search', function (e) {
var valueChanged = false;
var search_value = jQuery(this).val();
var vthis = jQuery(this);
if (search_value=="")
{
jQuery('.woofood-live-results .woofood-products').html("");
}
else
{
if (e.type=='propertychange') {
valueChanged = e.originalEvent.propertyName=='value';
} else {
valueChanged = true;
}
if (valueChanged) {
}
jQuery('.woofood-live-results .woofood-products').html("");
jQuery('.woofood-product-loop').each(function( index ) {
console.log( index + ": " + jQuery( this ).find('.product-title span:first').text().toLowerCase() );
if(jQuery( this ).find('.product-title span').text().toLowerCase().includes(search_value.toLowerCase()))
{
jQuery( this).clone().appendTo( ".woofood-live-results .woofood-products" );
}
else
{
}
});
}
});
</script>
<?php
});How This Code Works
✅ The script inserts a search bar above the WooFood accordion menu.
✅ As the user types, the script searches through product titles in the menu.
✅ Matching products are cloned and displayed dynamically without refreshing the page.
✅ If the search box is empty, the search results are cleared.
Best Practices for Using This Live Search Feature
🔹 Ensure your WooFood setup is working properly before adding this customization.
🔹 Modify the CSS styles to match your restaurant theme design.
🔹 Test the feature on both desktop and mobile devices for the best user experience.
Need a Complete WooCommerce Restaurant Ordering System?
If you’re looking for a powerful and fully automated WooCommerce food ordering solution, WooFood – WooCommerce Food Delivery Plugin is the best choice.
With WooFood, you can:
✅ Accept pickup and delivery orders seamlessly
✅ Provide customers with an interactive and mobile-friendly ordering experience
✅ Add features like live search, cart customization, and real-time order updates
👉 Check out WooFood here and enhance your WooCommerce food ordering system today! 🚀