{"id":53252,"date":"2015-09-01T04:52:41","date_gmt":"2015-09-01T08:52:41","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=53252"},"modified":"2020-01-27T10:44:58","modified_gmt":"2020-01-27T15:44:58","slug":"woocommerce-how-to-work-with-layered-navigation-widget","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/woocommerce-how-to-work-with-layered-navigation-widget.html","title":{"rendered":"WooCommerce. How to work with Layered Navigation widget"},"content":{"rendered":"

\r\n

This tutorial will show you how to manage Layered Navigation widget in Woocommerce.<\/p>\r\n

WooCommerce. How to work with Layered Navigation widget<\/a><\/p>\r\n

WooCommerce Layered Nav widget<\/strong> allows the user to refine products based on attributes.<\/p>\r\n

Layered Navigation is a powerful widget which empowers your users to drill down through your catalog of products via attributes<\/strong>, effectively helping them find what they are looking for quicker.<\/p>\r\n

To add the Layered Navigation widget<\/strong>, please do the following:<\/p>\r\n

    \r\n
  1. \r\n

    Navigate to ‘Appearance->Widgets’<\/strong> in your WooCommerce Dashboard.<\/p>\r\n<\/li>\r\n

  2. \r\n

    Locate the WooCommerce Layered Nav widget on the left and drag it to any location on the right<\/strong> like sidebar, footers, header area, etc. depending on your needs:<\/p>\r\n

    \"WooCommerce.<\/a>\r\n<\/li>\r\n

  3. \r\n

    Add the widget Title<\/strong> which is normally ‘Filter By’<\/strong> by default.<\/p>\r\n<\/li>\r\n

  4. \r\n

    Select the attribute<\/strong> for the items to be filtered by.<\/p>\r\n

    To add the new attribute<\/strong> to the product, please navigate to ‘Products’ -> ‘Attributes’<\/strong> in your Dashboard.<\/p>\r\n

    To learn more how to manage attributes in WooCommerce<\/strong>, please refer to this tutorial:<\/p>\r\n

    \"WooCommerce.<\/a>\r\n <\/li>\r\n

  5. \r\n

    You can set the Display Type to ‘List’<\/strong> for the filter options to have the list layout:\r\n<\/p>\r\n

    \"WooCommerce.<\/a><\/p>\r\n

    \"WooCommerce.<\/a><\/p>\r\n

    Select the ‘Dropdown’<\/strong> type to make the filter options display as the dropdown:<\/p>\r\n

    \"WooCommerce.<\/a>\r\n<\/li>\r\n

  6. \r\n

    In the ‘Query type’<\/strong> field you can choose whether you want the users to be able to filter by ‘AND’<\/strong> or ‘OR’<\/strong> query types:<\/p>\r\n

    \"WooCommerce.<\/a><\/p>\r\n

    – Selecting the ‘AND’<\/strong> Query type will make the widget work in such a way that if a user selects two attributes, the products which match both attributes only will be located.<\/p>\r\n

    – When the ‘OR’<\/strong> query type is selected for the widget, the products matching either the first or the second attribute will be located.<\/p>\r\n<\/li>\r\n

  7. \r\n

    You can define the pages and devices for the widget to display on using the Visibility option in widget settings. Please use this tutorial<\/a> to learn more about managing the widgets visibility:<\/p>\r\n

    \"WooCommerce.<\/a>\r\n<\/li>\r\n

  8. \r\n

    Click ‘Save’<\/strong> and check your ‘Shop’ page to see the WooCommerce Layered Nav widget in action.<\/p>\r\n<\/li>\r\n

  9. \r\n

    Please note that the layered navigation widget will only display on product archives<\/strong> (i.e. WooCommerce template ‘Shop’ page), not on product description pages, etc.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n

    WooCommerce. How to work with Layered Navigation widget<\/a><\/p>\r\n<\/p>\r\n

    <\/p>","protected":false},"excerpt":{"rendered":"

    This tutorial will show you how to manage Layered Navigation widget in Woocommerce.<\/p>\n","protected":false},"author":62,"featured_media":53261,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1556],"tags":[1375,557,634,2418],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53252"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=53252"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53252\/revisions"}],"predecessor-version":[{"id":85651,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53252\/revisions\/85651"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/53261"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=53252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=53252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=53252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}