{"id":27,"date":"2020-04-19T11:02:16","date_gmt":"2020-04-19T08:02:16","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=27"},"modified":"2025-06-05T16:06:24","modified_gmt":"2025-06-05T13:06:24","slug":"woocommerce-product-categories-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/woocommerce-product-categories-pro\/","title":{"rendered":"WooCommerce Product Categories widget"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Add the widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
Add the widget to the canvas <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/i><\/span>\n\t\t\t<\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To access and use a widget:<\/strong><\/p>\n

    \n
  1. \n

    In Elementor Editor, click +.
    All available widgets are displayed.<\/p>\n<\/li>\n

  2. \n

    Click or drag the widget to the canvas. For more information, see Add elements to a page<\/a>.<\/p>\n<\/li>\n<\/ol>\n

    \n
    \n \n\t\t\t\t\t\n\t\t\t\t <\/svg><\/span>\n <\/div>\n
    \n Note<\/strong>\n
    This widget is only available if you have WooCommerce installed. <\/div>\n <\/div>\n <\/div><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    What is the Product Categories widget?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The Product Categories widget is mostly used on product archive pages. It allows you to create a page that displays your products by categories.<\/span><\/p>\n

    See all the options available with the Product Categories widget.\u00a0\u00a0<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    \n
    \n \n\t\t\t\t\t\n\t\t\t\t <\/svg><\/span>\n <\/div>\n
    \n Note<\/strong>\n
    You must have WooCommerce installed in order to use its features, including products and WooCommerce widgets.<\/div>\n <\/div>\n <\/div><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Common use case\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Frances is creating a website for a bakery. The site will include a catalog of their products so customers can order online.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Example<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Video<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    See a video demonstrating the widget in action.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t
    <\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Adding a Product Categories widget: Step-by-step<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    In the example below, we’ll create a page displaying the types of goods available at a bakery.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Add a Product Categories widget<\/h3>\n

    To add a Product Categories widget:<\/strong><\/p>\n

      \n
    1. Go to your WP-Admin page.
      \"\"
      <\/span><\/li>\n
    2. Navigate to <\/span>Templates>Theme Builder<\/b>.
      \"\"
      <\/span><\/li>\n
    3. Click <\/span>Products Archive<\/b>.
      \"\"<\/span><\/li>\n
    4. Click <\/span>Add New <\/b>in the upper right corner.
      \"\"
      <\/span><\/li>\n
    5. Click <\/span>X<\/b>, in the upper right corner, to close the library window.
      \"\"<\/span><\/li>\n
    6. Click the folder icon on canvas.
      This opens the template library.
      <\/span><\/li>\n
    7. Add a Header to the page.
      \"\"<\/li>\n
    8. In the top bar, click the + icon to access the widgets.
      \"\"<\/span><\/li>\n
    9. Drag the Product Categories widget to the canvas.
      This isn\u2019t exactly what we want so let\u2019s edit the contents and style.
      First, we don\u2019t want to display the category Uncategorized<\/b>.
      \"\"
      <\/span><\/li>\n
    10. In the panel, open the <\/span>Query<\/b> field.
      The Source<\/b> field allows you to filter what categories are displayed by the archive.\u00a0
      \"\"
      <\/span><\/li>\n
    11. Use the dropdown menu to choose <\/span>Manual Selection<\/b>.
      \"\"
      <\/span><\/li>\n
    12. Use the text box to enter the names of the categories we want to include. In this case, we\u2019ll include all categories except <\/span>Uncategorized<\/b>.
      In order to give each category more room, we can display two columns on each row instead of four.
      \"\"
      <\/span><\/li>\n
    13. Open the Layout section.
      \"\"<\/li>\n
    14. In the <\/span>Column<\/b> field, enter <\/span>2<\/b>.
      By default, the Product Category widget displays the number of products in the category. In our case we don\u2019t need that. We\u2019ll do this through the Style<\/b> tab.
      \"\"
      <\/span><\/li>\n
    15. Click the <\/span>Style<\/b> tab.
      \"\"
      <\/span><\/li>\n
    16. Scroll down to the <\/span>Count<\/b> section.
      \"\"<\/span><\/li>\n
    17. Click the pencil icon next to <\/span>Typography<\/b>.
      \"\"<\/span>
      <\/span><\/li>\n
    18. Reduce the font size to <\/span>1<\/b>.
      The page is now ready.
      \"\"
      <\/span><\/li>\n
    19. Click <\/span>Publish<\/b>.
      The Conditions window appears.
      \"\"
      <\/span><\/li>\n
    20. We don\u2019t want to add any special conditions, so click <\/span>Save & Close<\/b>.
      \"\"
      The template is ready.\u00a0
      <\/span><\/li>\n<\/ol>\n

      To see how to create an archive that will display the products within a category, check this <\/span>video tutorial<\/span><\/a>.<\/span><\/p>\n

      \u00a0<\/p>\n

      \u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t

      Settings for the Menu widget<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t

      Content tab<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      Add, delete, and edit menu items and controls.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t
      \n\t\t\t\t\t