Now that you know how to customize WP eStore using “Add to Cart” and “Buy Now” buttons, the next bit of customization that we’re going to do is to add product search to the sidebar here.
Let’s come back over to one of the lessons and pick up the Download the WP eStore Shortcodes Cheat Sheet. Let’s open that up and what we’re going to do is go down to the Miscellaneous Shortcodes at the very bottom and we’re going to look at a couple of different products searches.
Add a Product Search to a Widget
This is sort of the generic product search. Let’s copy that and go to Appearance and Widgets, we’re going to paste that shortcode into a text widget. Open our primary sidebar, drag a text widget in there and then place that. When we hit save, we will now have a product search.
Let’s use it to search for “Plugin”. There’s what comes up. It doesn’t move the page, it just displays the various plugins that show up along here with links to those.
Customize the Widget Title
It may make sense for us to say here, “Product Search”, let’s see if that improves the appearance of this a little bit. Yeah, well at least it puts that up there. I supposed we could just say “Search Our Store” so we have a nice heading that’s part of the display.
Add “Add to Cart” Button to Search Results
We could also choose to have “Add to Cart” buttons added to these rather than these just being links and this is the example of that here, (wp_eStore_product_search_with_add_to_cart_button).
Let’s come over to the widget and instead of this product search widget, we add this search widget. Then come over and refresh our page. Let’s search for WooCommerce. Now, what happens is we end up with the image and then the “Add to Cart” button.
You can see that because of the width of the sidebar here, this really isn’t that great a choice and this probably would work better either in a sidebar that was wider or in one that was the full width of the page or something like that rather than in a sidebar like this.
And that’s something to keep in mind with this, you could always have a Product Search page and place this on the Product Search page. Then the result would be displayed in the width of the page which of course would be quite nice.
So that’s the way you add product search to a sidebar for WP eStore products.