Published on May 20, 2020

WooCommerce Products Search in Oxygen

Sridhar Katakam

Update on 13 Aug 2021: You may want to follow this method instead.

---

This members-only tutorial provides the steps to set up a search form that searches across WooCommerce products instead of the standard posts & pages and to show the results with pagination on the search results pages.

We shall

  • enable HTML5 output for the search form
  • customise the above HTML to set the post_type to product
  • get the posts_per_page value from WordPress settings page and use it to add pagination on search results pages. By default all products will appear without pagination.

Step 1

Install and activate Code Snippets plugin.

Add a new Snippet.

Title: Enable HTML5 for Search and other elements

Code:

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

Step 2

Add another Snippet.

Title: Customize Search Form

Code:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right