{"id":1677389,"date":"2020-09-15T12:47:47","date_gmt":"2020-09-15T12:47:47","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1677389"},"modified":"2021-05-18T16:41:46","modified_gmt":"2021-05-18T16:41:46","slug":"creating-a-page-with-a-custom-product-search","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/creating-a-page-with-a-custom-product-search\/","title":{"rendered":"Creating a Page with a Custom WooCommerce Product Search"},"content":{"rendered":"
\n
\"Custom<\/a>
Custom Search for WooCommerce Products created with Toolset<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

Setting up a page with the search View<\/h2>\n\n\n\n
  1. Add a new page.<\/li>
  2. Insert the Toolset View<\/strong> block.<\/li>
  3. In the View-creation wizard, enable the Search <\/strong>option.<\/li>
  4. Choose Products<\/strong> as the type of content this View will display.<\/li><\/ol>\n\n\n\n

    Creating the product search form<\/h2>\n\n\n\n

    In the upper part of your View\u2019s editing area you add filters.<\/p>\n\n\n\n

    1. Click on the Add Search Field<\/strong> button to add filters.<\/li><\/ol>\n\n\n
      \n
      \"Adding<\/a>
      Adding filters to your product search<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n
      1. Use the Add Search Button<\/strong> to add the submit button which will trigger the searching.<\/li>
      2. Insert the Toolset Grid <\/strong>block and drag-and-drop your filters into it to arrange your filters into columns.<\/li><\/ol>\n\n\n\n

        Creating search results<\/h2>\n\n\n\n

        In the bottom part of your View’s editing area you design your search results.<\/p>\n\n\n\n

        1. Insert blocks into the WordPress Archive Loop<\/strong> area to design a single item of your View loop.<\/li>
        2. Use the Toolset Heading <\/strong>and Single Field<\/strong> blocks with dynamic sources to display your product title, excerpt, custom fields, and taxonomies.<\/li>
        3. Use blocks from the Toolset WooCommerce<\/strong> section to insert WooCommerce elements such as the Add to Cart Button<\/strong>, Product Price<\/strong>, and more. You will notice that all Toolset WooCommerce blocks allow you to select a custom or native output type<\/a>.<\/li><\/ol>\n\n\n\n

          What else you can do with your product search<\/h2>\n\n\n\n

          You can enhance your search by:<\/p>\n\n\n\n