{"id":37794,"date":"2024-05-02T20:51:14","date_gmt":"2024-05-02T20:51:14","guid":{"rendered":"https:\/\/10web.io\/blog\/?p=37794"},"modified":"2024-05-02T20:51:15","modified_gmt":"2024-05-02T20:51:15","slug":"how-to-display-product-categories-on-shop-page-woocommerce","status":"publish","type":"post","link":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/","title":{"rendered":"How to Display Product Categories on Your WooCommerce Shop Page"},"content":{"rendered":"<p><span>Navigating WooCommerce setups can be daunting for new and seasoned users alike. This comprehensive guide provides clear, step-by-step directions on how to display product categories on your shop page in WooCommerce. By demystifying these processes, the article ensures that every WooCommerce store owner can enhance their site&#8217;s functionality and user experience effectively.<\/span><\/p>\n<h2>FAQ<\/h2>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">How do I display product category names in WooCommerce?<\/p>\n    <div class=\"faq_content\"> To showcase product category names in your WooCommerce store, you&#8217;ll need to access your <strong>WordPress dashboard<\/strong>. Navigate to <strong>Appearance &gt; Customize &gt; WooCommerce &gt; Product Catalog<\/strong>. Here, you&#8217;ll find the option <strong><a href=\"https:\/\/10web.io\/blog\/how-to-edit-woocommerce-shop-page\/\">Shop page display<\/a><\/strong>. You can opt to display Categories, Products, or both. Picking Categories will list just the categories on the shop page.<\/div>\n<\/div>\n\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">How do I show subcategories on WooCommerce category page?<\/p>\n    <div class=\"faq_content\"> If you&#8217;re aiming to present subcategories on your WooCommerce category pages, you&#8217;d go to the <strong>WooCommerce &gt; Settings<\/strong> section in your dashboard. Under the <strong>Products<\/strong> tab, and in the <strong>Display<\/strong> settings, select Show both in the <strong>Default category display<\/strong> to have subcategories visible alongside parent categories on your archive pages.<\/div>\n<\/div>\n\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">How do I display products from a specific category in WooCommerce?<\/p>\n    <div class=\"faq_content\"> To feature products from a specific category, you can use shortcodes on post or page editors. The shortcode <strong>[products category=&#8217;your-category-slug&#8217;]<\/strong> can be customized with your desired category slug, replacing &#8216;your-category-slug&#8217; with the slug from the category you wish to display.<\/div>\n<\/div>\n\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">How do I show product descriptions on the WooCommerce shop page?<\/p>\n    <div class=\"faq_content\"> To show product descriptions on your WooCommerce shop page, you&#8217;ll typically manipulate the theme files. However, for a safer route that respects your theme updates, use a plugin that allows for additional hooks and edits, or check if your theme has options for displaying product descriptions directly in the customizer under WooCommerce settings.<\/div>\n<\/div>\n\n<h2>Setting up your categories<\/h2>\n<p>In WooCommerce, organizing your products into categories is an essential step to help your customers navigate your shop.<\/p>\n<p>Categories act as a hierarchy to structure your store and group similar items together. Much like chapters in a book, categories make it easy to find products based on their type.<\/p>\n<p>You&#8217;ll start by creating a <strong>Parent category<\/strong>, which serves as a broad group\u2014think of it as a primary chapter. Under this, you can add <strong>Subcategories<\/strong> to break down products even further.<\/p>\n<p>This section guides you through adding new categories to your store and making adjustments to existing ones.<\/p>\n<h3>Adding new product categories<\/h3>\n<p>When managing categories, go to <strong>Products &gt; Categories<\/strong> where you will see the options to <strong>Add new category<\/strong> or customize existing ones.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category.jpg\" alt=\"Adding and editing categories in the WordPress admin's Products, categories section.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37849\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>To <strong>add a new product category<\/strong> in WooCommerce:<\/p>\n<ol class=\"black\">\n<li>Navigate to <strong>Products<\/strong> &gt; <strong>Categories<\/strong> in your WordPress dashboard.<\/li>\n<li>In the <strong>Add new category<\/strong> section:<\/li>\n<\/ol>\n<ul>\n<li><strong>Name<\/strong>: Enter a name for your category.<\/li>\n<li><strong>Slug<\/strong>: Input a URL-friendly version of the name (optional).<\/li>\n<li><strong>Parent<\/strong>: If applicable, choose a parent category to create a hierarchy.<\/li>\n<li><strong>Description<\/strong>: Write a short description for your category.<\/li>\n<li><strong>Display type<\/strong>: Select the type of display for this category. This determines what is shown on the category\u2019s landing page.<\/li>\n<li><strong>Thumbnail<\/strong>: <a href=\"https:\/\/10web.io\/blog\/how-to-add-images-in-wordpress\/\">Upload an image<\/a> that represents this category.<\/li>\n<\/ul>\n<p>By using the <strong>Display type<\/strong>, you control the visibility of your products on the category page. You can showcase just products, subcategories, or a combination of both.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-category-page.jpg\" alt=\"Choosing what displays on the category page.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37850\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-category-page.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-category-page-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-category-page-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-category-page-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-category-page-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-category-page-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-category-page-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-category-page-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>After filling out the details, click on the <strong>Add new category<\/strong> button to save your new category.<\/p>\n<h3>Editing existing categories<\/h3>\n<p>To <strong>edit an existing product category<\/strong>:<\/p>\n<ol class=\"black\">\n<li>Go to <strong>Products<\/strong> &gt; <strong>Categories<\/strong> from your WordPress dashboard.<\/li>\n<li>You\u2019ll see a list of categories. Hover over the category you want to edit and click <strong>Edit<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category.jpg\" alt=\"Adding and editing categories in the WordPress admin's Products, categories section.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37849\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/add-new-category-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/li>\n<li>From here, you can change the category\u2019s:<\/li>\n<\/ol>\n<ul>\n<li><strong>Name<\/strong><\/li>\n<li><strong>Slug<\/strong><\/li>\n<li><strong>Parent<\/strong><\/li>\n<li><strong>Description<\/strong><\/li>\n<li><strong>Display type<\/strong><\/li>\n<li>The associated <strong>thumbnail<\/strong><\/li>\n<\/ul>\n<p>Make sure to press the <strong>Update<\/strong> button to apply your changes.<\/p>\n<h2>How to display product categories on the shop page in WooCommerce<\/h2>\n<p>When setting up your store, displaying product categories on the shop page in WooCommerce enhances user navigation and product discovery. Let\u2019s walk through the different methods to show product categories on your shop page.<\/p>\n<h3>Using WooCommerce settings<\/h3>\n<p>To use the WooCommerce settings for displaying categories on your shop page, start by logging into your WordPress dashboard:<\/p>\n<ol class=\"black\">\n<li>Navigate to <strong>Appearance<\/strong> &gt; <strong>Customize<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/customizer-woocommerce-category.jpg\" alt=\"The appearance, customize menu in the WordPress dashboard.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37851\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/customizer-woocommerce-category.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/customizer-woocommerce-category-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/customizer-woocommerce-category-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/customizer-woocommerce-category-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/customizer-woocommerce-category-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/customizer-woocommerce-category-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/customizer-woocommerce-category-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/customizer-woocommerce-category-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/li>\n<li>In the Customizer menu, click on <strong>WooCommerce<\/strong> and then select <strong>Product Catalog<\/strong>.<\/li>\n<li>Here, find the <strong>Shop page display<\/strong> option. Click on the dropdown menu, and you have the choice between:<\/li>\n<\/ol>\n<ul>\n<li><strong>Show products<\/strong><\/li>\n<li><strong>Show categories<\/strong><\/li>\n<li><strong>Show categories and products<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-shop-page.jpg\" alt=\"How to display categories on the shop page in WooCommerce using the Customizer.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37852\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-shop-page.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-shop-page-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-shop-page-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-shop-page-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-shop-page-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-shop-page-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-shop-page-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-shop-page-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>Select the desired display option for your shop page. This default method is straightforward and does not require any coding knowledge.<\/p>\n<h3>Customizing your shop page<\/h3>\n<p>For more control over the layout and how you show categories on your shop page, you may opt to create a new page that you can edit in the block editor. Using this method allows you to display your products and product categories similar to a default WooCommerce shop page.<\/p>\n<ol class=\"black\">\n<li>Go to <strong>Pages<\/strong> on your dashboard and select <strong>Add New<\/strong>.<\/li>\n<li>Design your shop page using the editor your theme provides. You can use blocks or a <a href=\"https:\/\/10web.io\/blog\/how-to-edit-woocommerce-shop-page-with-elementor\/\">page builder<\/a> if your theme supports it.\u00a0Different <strong>Product<\/strong> blocks, filters, and WooCommerce shortcodes can help add other product details to the page.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/how-to-customize-shop-page-block.jpg\" alt=\"How to customize the WooCommerce shop page in the block editor.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37391\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/how-to-customize-shop-page-block.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/how-to-customize-shop-page-block-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/how-to-customize-shop-page-block-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/how-to-customize-shop-page-block-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/how-to-customize-shop-page-block-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/how-to-customize-shop-page-block-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/how-to-customize-shop-page-block-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/how-to-customize-shop-page-block-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/li>\n<li>Insert the <strong>Products by Category<\/strong> or <strong>Product Categories <\/strong>block.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-block.jpg\" alt=\"Displaying product categories on the shop page in WooCommerce.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37853\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-block.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-block-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-block-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-block-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-block-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-block-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-block-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-block-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/li>\n<li>Once you&#8217;re satisfied with your design, <strong>Publish<\/strong> the page, and use it like a shop page.<\/li>\n<\/ol>\n<p><strong>Customizing with shortcodes<\/strong><\/p>\n<p>In addition to the built-in blocks, you can also <a href=\"https:\/\/10web.io\/blog\/how-to-edit-woocommerce-shop-page-with-elementor\/\">customize your shop page<\/a> using WooCommerce shortcodes to show specific categories:<\/p>\n<ol class=\"black\">\n<li>Edit the page where you want the categories to appear or create a new page to display products, like a shop page.<\/li>\n<li>Add a <strong>Shortcode<\/strong> block to insert the <code>[product_categories]<\/code> shortcode to your page.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-shortcode.jpg\" alt=\"Adding a WooCommerce shortcode to display product categories on the shop page.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37854\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-shortcode.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-shortcode-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-shortcode-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-shortcode-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-shortcode-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-shortcode-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-shortcode-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/product-categories-shortcode-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/li>\n<li>You can tailor the shortcode by using attributes like:<\/li>\n<\/ol>\n<ul>\n<li><strong>number<\/strong>: to set a limit on the number of categories displayed.<\/li>\n<li><strong>columns<\/strong>: to set the number of columns.<\/li>\n<li><strong>orderby<\/strong>: to sort categories by a specific attribute like <strong>name<\/strong> or <strong>slug<\/strong>.<\/li>\n<li><strong>order<\/strong>: to set the order direction, ascending or descending.<\/li>\n<li><strong>ids<\/strong>: to display specific category IDs.<\/li>\n<li><strong>parent<\/strong>: to only display categories from a certain parent category.<\/li>\n<li><strong>hide_empty<\/strong>: to hide categories without products.<\/li>\n<li><strong>slug<\/strong>: to display categories by their slug.<\/li>\n<\/ul>\n<p>For example:<\/p>\n<pre>[product_categories number=\"12\" columns=\"4\" orderby=\"name\" order=\"ASC\"]<\/pre>\n<p>This shortcode displays up to twelve categories in four columns, with the categories sorted by name in ascending order.<br \/>\n\r\n<style>\r\n  #ctablocks_inline_84{\r\n          background-color: #000000;\r\n        color: #ffffff;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  #ctablocks_inline_84 p{\r\n    color: #ffffff;\r\n  }\r\n  #ctablocks_inline_84 .button{\r\n        background-color: rgb(51,57,241);\r\n      color: #ffffff;\r\n    border-color: #3339f1 !important;\r\n  }\r\n  #ctablocks_inline_84 .button:hover{\r\n    background: rgba(51,57,241,0.8);\r\n    color: #ffffff;\r\n    opacity: 1;\r\n  }\r\n        #ctablocks_inline_84 .ctablocks_content_info p {\r\n        padding-left: 36px;\r\n      }\r\n      #ctablocks_inline_84 .ctablocks_content_button {\r\n          margin-left: 37px;\r\n      }\r\n  @media screen and (min-width: 768px) and (max-width: 1260px) {\r\n      #ctablocks_inline_84 .ctablocks_content_button {\r\n          margin-left: 37px !important;\r\n      }\r\n  }\r\n  ;\r\n<\/style>\r\n<div id=\"ctablocks_inline_84\" class=\"ctablocks_container inline_type\r\n        \">\r\n\r\n  <div class=\"ctablocks_content clear\">\r\n    <div class=\"ctablocks_content_info\">\r\n      \r\n            <div class=\"title-wrap\">\r\n\t\t\t\t\t                  <img decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Group-175063@2x.png\" alt=\"Looking to sell online?\" title=\"Looking to sell online?\">\r\n\t\t\t\t\t            <h4>Looking to sell online?<\/h4>\r\n        <\/div>\r\n              <p>Create your custom online store in minutes with 10Web AI Ecommerce Website Builder and take your business online. <\/p>\r\n          <\/div>\r\n    <div class=\"ctablocks_content_button\">\r\n              <a href=\"https:\/\/10web.io\/ai-website-builder\/\" class=\"button\" data-gtag=\"sign-up-blog\" data-buttontype=\"sign-up\" data-gtag=\"cta-84\" data-buttontype=\"cta-inline\"\r\n\t        >Generate Your Store<\/a>\r\n            \r\n    <\/div>\r\n  <\/div>\r\n    <\/div>\r\n<\/p>\n<h2>Advanced category display options<\/h2>\n<p>You can also display product categories on your WooCommerce shop page using widgets, plugins, themes, or custom code.<\/p>\n<h3>Modifying with widgets<\/h3>\n<p>You can leverage <strong><a href=\"https:\/\/10web.io\/blog\/how-to-add-widgets-to-wordpress\/\">Widgets<\/a><\/strong> to display product categories on your shop page.<\/p>\n<p>For instance, the <strong>Product Categories Widget<\/strong> allows you to place a list or a dropdown of categories in your shop&#8217;s sidebar.<\/p>\n<p>To add this, navigate to <strong>Appearance<\/strong> &gt; <strong>Widgets<\/strong> and drag the <strong>Product Categories Widget<\/strong> to the desired sidebar or widget area.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-widget.jpg\" alt=\"Displaying product categories on the shop page sidebar using product category widgets.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37855\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-widget.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-widget-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-widget-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-widget-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-widget-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-widget-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-widget-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/display-product-categories-widget-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>Here, you can choose to show product counts per category or hide empty categories.<\/p>\n<h3>Using plugins for additional functionality<\/h3>\n<p>Numerous WooCommerce plugins and themes offer expanded functionality for displaying categories on the shop page.<\/p>\n<p>These plugins can create more dynamic layouts, such as grids or sliders, and often include features like AJAX filtering to help customers find categories faster.<\/p>\n<p>Explore the WooCommerce marketplace or WordPress plugin directories to find the right options for displaying categories exactly as you want them.<\/p>\n<h3>Customizing with code<\/h3>\n<p>If you&#8217;re comfortable with creating a <a href=\"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/\">child theme<\/a> and <a href=\"https:\/\/10web.io\/blog\/how-to-customize-a-wordpress-theme\/\">altering theme files<\/a>, you can add a custom shortcode or modify WooCommerce hooks to tweak how and where categories appear.<\/p>\n<p>Remember, this approach is best for those with coding knowledge, as incorrect code can disrupt your site&#8217;s functionality. Before you begin making changes to your site&#8217;s files, it&#8217;s best to perform a backup.<\/p>\n<p><strong>Method 1: Modify <code>archive-product.php<\/code><\/strong><\/p>\n<p style=\"margin-top: 20px;\">If your child theme does not already have an <code>archive-product.php<\/code> file, you can create one by copying it from the WooCommerce templates directory in the WooCommerce plugin folder (<code>woocommerce\/templates\/<\/code>) to your child theme directory, maintaining the directory structure.<\/p>\n<p>Here\u2019s a basic example of how you might modify this file:<\/p>\n<ol class=\"black\">\n<li><strong>Copy <code>archive-product.php<\/code><\/strong>: Copy this file from <code>wp-content\/plugins\/woocommerce\/templates\/archive-product.php<\/code> to <code>wp-content\/themes\/your-child-theme\/woocommerce\/archive-product.php<\/code>.<\/li>\n<li><strong>Edit the file to include product categories<\/strong>: You can add the following snippet at the top of the file or wherever you want the categories to appear:\n<pre><code class=\"!whitespace-pre hljs language-php\"><span class=\"hljs-meta\">&lt;?php<\/span>\r\n<span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">'&lt;div class=\"product-categories\"&gt;'<\/span>;\r\n<span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-title function_ invoke__\">do_shortcode<\/span>(<span class=\"hljs-string\">'[product_categories number=\"0\" parent=\"0\"]'<\/span>);\r\n<span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">'&lt;\/div&gt;'<\/span>;\r\n<span class=\"hljs-meta\">?&gt;<\/span><\/code><\/pre>\n<p>This uses the <code>[product_categories]<\/code> shortcode to display all top-level product categories. You can adjust the <code>number<\/code> attribute to limit the number of categories shown, or remove it to display all categories.<\/li>\n<\/ol>\n<p><strong>Method 2: Use WooCommerce hooks in <code>functions.php<\/code><\/strong><\/p>\n<p style=\"margin-top: 20px;\">This method does not require overriding template files and is often safer for future WooCommerce updates. Add the following snippet to your child theme\u2019s <code>functions.php<\/code> file:<\/p>\n<pre>add_action('woocommerce_before_shop_loop', 'display_product_categories', 15);\r\n\r\nfunction display_product_categories() {\r\n    if (is_shop() || is_product_category()) {\r\n        echo do_shortcode('[product_categories number=\"0\" parent=\"0\"]');\r\n    }\r\n}\r\n<\/pre>\n<p>This function hooks into <code>woocommerce_before_shop_loop<\/code>, which runs before products are displayed on the shop page. It checks if the current page is the shop or a product category page, and if so, it displays the product categories.<\/p>\n<p><strong>Choosing where to insert:<\/strong><\/p>\n<ul style=\"margin-top: 20px;\">\n<li><strong>For modifying the template file (<code>archive-product.php<\/code>)<\/strong>: This method gives you fine control over exactly where the categories will appear relative to other elements on the page.<\/li>\n<li><strong>For using the <code>functions.php<\/code> file<\/strong>: This method is generally safer as it keeps changes independent of the WooCommerce template structure, which can change with updates.<\/li>\n<\/ul>\n<p><span>These modifications should help you display product categories on your WooCommerce shop page effectively. If you need further customization, you might need to adjust the shortcode attributes or add <a href=\"https:\/\/10web.io\/blog\/how-to-edit-css-in-wordpress\/\">additional styling<\/a> to fit your site\u2019s design.<\/span><\/p>\n<h2>Enhancing the visual layout<\/h2>\n<p>When customizing your WooCommerce shop, visually appealing product category displays can significantly impact user engagement and sales.<\/p>\n<h3>Adding category images<\/h3>\n<p>To make your product categories stand out, adding category images is a must.<\/p>\n<p>This is a simple yet effective way to guide customers through your store&#8217;s offerings, such as clothing, t-shirts, pants, and accessories.<\/p>\n<p>Navigate to <strong>Products &gt; Categories<\/strong> in your WordPress dashboard. Here you can edit each Category to upload a <strong>Thumbnail<\/strong>, ensuring visual consistency and appeal on your shop\u2019s homepage.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/category-thumbnail.jpg\" alt=\"Adding a category thumbnail.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37856\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/category-thumbnail.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/category-thumbnail-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/category-thumbnail-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/category-thumbnail-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/category-thumbnail-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/category-thumbnail-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/category-thumbnail-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/category-thumbnail-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<h3>Customizing appearance with theme options<\/h3>\n<p>The appearance of your shop page layout is largely influenced by your active theme. Themes like <b>Astra <\/b>offer rich customization abilities specific to WooCommerce stores.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/woocommerce-theme.jpg\" alt=\"WooCommerce friendly themes often add options for customizing the shop page.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37858\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/woocommerce-theme.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/woocommerce-theme-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/woocommerce-theme-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/woocommerce-theme-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/woocommerce-theme-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/woocommerce-theme-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/woocommerce-theme-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/woocommerce-theme-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>By going to <strong>Appearance &gt; Customize<\/strong>, you can access theme options to modify your homepage template and overall design. Here, you can adjust the way your product categories are displayed on your shop page without overshadowing the individual products.<\/p>\n<h2>Optimizing for search engines and conversions<\/h2>\n<p>When setting up your <a href=\"https:\/\/10web.io\/blog\/how-to-make-an-ecommerce-website-with-wordpress\/\">WooCommerce shop<\/a>, ensuring your <a href=\"https:\/\/10web.io\/blog\/speed-up-woocommerce-store\/\">site runs smoothly<\/a>\u00a0and that product categories are SEO-friendly is key to boosting visibility and conversions.<\/p>\n<p>WooCommerce allows you to add rich <strong>Product descriptions<\/strong> for your categories. This is not only helpful from a shopper&#8217;s perspective but also from an SEO standpoint. Make sure these descriptions are keyword-rich and informative, as they show up along with the product category on the shop page. This can influence both search rankings and customer decisions.<\/p>\n<p>For <strong>navigation<\/strong>, it&#8217;s important to consider how customers and search crawlers will find products within your store. Creating a logical menu with clear category labels can improve the user experience and the site&#8217;s crawlability.<\/p>\n<p>Use <strong>breadcrumbs<\/strong> for easy navigation and to reinforce the structure of your site to search engines.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/breadcrumbs.jpg\" alt=\"Breadcrumbs are user friendly and may have SEO benefits.\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-37860\" srcset=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/breadcrumbs.jpg 1920w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/breadcrumbs-742x416.jpg 742w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/breadcrumbs-1484x835.jpg 1484w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/breadcrumbs-150x84.jpg 150w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/breadcrumbs-768x432.jpg 768w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/breadcrumbs-1536x864.jpg 1536w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/breadcrumbs-371x208.jpg 371w, https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/breadcrumbs-600x338.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<p>Ensure that your most popular categories\u2014or those on sale\u2014are highlighted. Popularity and sales drive conversions, so making them easily accessible can benefit your store.<\/p>\n<p>Lastly, don&#8217;t forget analytics! Review which categories are performing well in terms of search results and conversions regularly. Use this data to tweak your SEO strategy for your WooCommerce product categories.<\/p>\n<h2>Troubleshooting common issues<\/h2>\n<p>When setting up your WooCommerce site to display product categories on the shop page, you might encounter some issues. Here&#8217;s how to identify and resolve some of the most common problems.<\/p>\n<h3>Category display problems<\/h3>\n<p>If your product categories aren&#8217;t appearing as expected on your shop page, first ensure that your display settings are properly configured. Navigate to <strong>Appearance<\/strong> &gt; <strong>Customize<\/strong> &gt; <strong>WooCommerce<\/strong> and select <strong>Product Catalog<\/strong>.<\/p>\n<p>If your product categories aren&#8217;t appearing as expected on your shop page, first ensure that your display settings are properly configured. Navigate to <strong>Appearance<\/strong> &gt; <strong>Customize<\/strong> &gt; <strong>WooCommerce<\/strong> and select <strong>Product Catalog<\/strong>. You should see the option for <strong>Shop page display<\/strong>. Make sure you have the desired display method selected, whether it&#8217;s <strong>Show products<\/strong>, <strong>Show categories<\/strong>, or <strong>Show categories and products<\/strong>.<\/p>\n<p>In some cases, after setting up the categories, they still don&#8217;t show up due to caching issues. Clear your website cache from your hosting control panel and browser to see if that resolves the problem.<\/p>\n<p>Additionally, verify the code integrity in your theme&#8217;s <strong>functions.php<\/strong> file, if you&#8217;ve added any code related to category display.<\/p>\n<h3>Conflicts with themes and plugins<\/h3>\n<p>Occasionally, the problem lies not within WooCommerce itself but due to conflicts with other <strong>themes<\/strong> or <strong>plugins<\/strong>. To troubleshoot theme conflicts, try switching to a default WordPress theme, such as Twenty Twenty-One, and check if the category display issue is resolved.<\/p>\n<p>For plugin conflicts, navigate to <strong>Plugins<\/strong> and deactivate all plugins except for WooCommerce. If the categories display correctly, reactivate other plugins one by one until you find the culprit. Once identified, you can either seek an alternative plugin or contact the plugin developer for a fix.<\/p>\n<p>It&#8217;s also important to keep WooCommerce, your theme, and plugins up-to-date to avoid compatibility issues. Navigate to <strong>Dashboard<\/strong> &gt; <strong>Updates<\/strong> to check for and apply any available updates. Remember, before making any changes, it&#8217;s always wise to back up your site.<\/p>\n<h2>Conclusion<\/h2>\n<p>Knowing how to display product categories on your shop page in WooCommerce can be essential for <span>driving your sales and improving customer navigation.<\/span><\/p>\n<p><span>Whether through simple dashboard settings, shortcodes, or advanced customizations, you have the tools to fine-tune your store&#8217;s layout and functionality. Keep exploring different configurations to discover what works best for your store. Good luck, and enjoy crafting an engaging WooCommerce shop page!<\/span><br \/>\n\r\n<style>\r\n  #ctablocks_scrollbox-with-icon_91{\r\n            color: #ffffff;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  #ctablocks_scrollbox-with-icon_91 p{\r\n    color: #ffffff;\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91 .button{\r\n          background-color: rgb(51,57,241);\r\n        color: #ffffff;\r\n    border-color: #3339f1 !important;\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91 .button:hover{\r\n    background: rgba(51,57,241,0.8);\r\n    color: #ffffff;\r\n    opacity: 1;\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91.ctablocks_container {\r\n    left: 100%;\r\n  }\r\n  @media screen and (max-width: 1300px) {\r\n      #ctablocks_scrollbox-with-icon_91.ctablocks_container {\r\n          left: 0;\r\n          margin: 0 auto;\r\n      }\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91 .ctablocks_content {\r\n      background-color: #000000;\r\n  }\r\n<\/style>\r\n<div id=\"ctablocks_scrollbox-with-icon_91\" class=\"ctablocks_container scrollbox-with-icon_type\r\n      \">\r\n\r\n  <div class=\"ctablocks_content clear\">\r\n    <div class=\"ctablocks_content_info\">\r\n              <h4>Simplify WordPress with 10Web<\/h4>\r\n        <h4 class=\"mobile-title\">Simplify WordPress with 10Web<\/h4>\r\n              <p>Skip and automate manual work with 10Web Managed WordPress Hosting and the 10Web AI Website Builder.<\/p>\r\n          <\/div>\r\n    <div class=\"ctablocks_content_button\">\r\n              <a href=\"https:\/\/10web.io\/ai-website-builder\/\" class=\"button\" data-gtag=\"sign-up-blog\" data-buttontype=\"sign-up\" data-gtag=\"cta-91\" data-buttontype=\"cta-scrollbox-with-icon\"\r\n\t        >Learn How<\/a>\r\n            \r\n    <\/div>\r\n  <\/div>\r\n    <span class=\"close_ctablocks\">\r\n      <img decoding=\"async\" class=\"close-icon\" src=\"https:\/\/10web.io\/blog\/wp-content\/plugins\/cta-blocks\/assets\/images\/close_w.svg\" class=\"close\">\r\n      <img decoding=\"async\" class=\"floating-icon\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Info-icon_Blog.png\" alt=\"Simplify WordPress with 10Web\" title=\"Simplify WordPress with 10Web\">\r\n<!--      <img decoding=\"async\" class=\"arrow-icon white\" src=\"\/cta-blocks\/assets\/images\/arrow-icon.svg\" class=\"close\">\r\n-->      <img decoding=\"async\" class=\"arrow-icon purple\" src=\"https:\/\/10web.io\/blog\/wp-content\/plugins\/cta-blocks\/assets\/images\/arrow-icon-purple.svg\" class=\"close\">\r\n  <\/span>\r\n<\/div>\r\n<br \/>\n <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Navigating WooCommerce setups can be daunting for new and seasoned users alike. This comprehensive guide provides clear, step-by-step directions on how to display product categories on your shop page in WooCommerce. By demystifying these processes, the article ensures that every WooCommerce store owner can enhance their site&#8217;s functionality and user experience effectively. FAQ Setting up your categories In WooCommerce, organizing&#8230;<\/p>\n","protected":false},"author":11,"featured_media":35073,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"two_page_speed":[],"footnotes":"","tenweb_blog_toc":"<ul>\r\n\t<li>\r\n\t\t<a href=\"#faq\">FAQ<\/a>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#setting-up-your-categories\">Setting up your categories<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#adding-new-product-categories\">Adding new product categories<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#editing-existing-categories\">Editing existing categories<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#how-to-display-product-categories-on-the-shop-page-in-woocommerce\">How to display product categories on the shop page in WooCommerce<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#using-woocommerce-settings\">Using WooCommerce settings<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#customizing-your-shop-page\">Customizing your shop page<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#advanced-category-display-options\">Advanced category display options<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#modifying-with-widgets\">Modifying with widgets<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#using-plugins-for-additional-functionality\">Using plugins for additional functionality<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#customizing-with-code\">Customizing with code<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#enhancing-the-visual-layout\">Enhancing the visual layout<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#adding-category-images\">Adding category images<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#customizing-appearance-with-theme-options\">Customizing appearance with theme options<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#optimizing-for-search-engines-and-conversions\">Optimizing for search engines and conversions<\/a>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#troubleshooting-common-issues\">Troubleshooting common issues<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#category-display-problems\">Category display problems<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#conflicts-with-themes-and-plugins\">Conflicts with themes and plugins<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#conclusion\">Conclusion<\/a>\r\n\t<\/li>\r\n<\/ul>\r\n","tenweb_blog_competitor_type":"","tenweb_blog_competitor_names":"","tenweb_blog_twb_version":0,"tenweb_blog_type":""},"categories":[506],"tags":[],"class_list":["post-37794","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Display Product Categories on WooCommerce Shop Pages<\/title>\n<meta name=\"description\" content=\"Learn how to display product categories on your WooCommerce shop page with our expert tips and tricks. Customizer, blocks, widgets and more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Product Categories on Your WooCommerce Shop Page\" \/>\n<meta property=\"og:description\" content=\"Learn how to display product categories on your WooCommerce shop page with our expert tips and tricks. Customizer, blocks, widgets and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"10Web - Build &amp; Host Your WordPress Website\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/10Web.io\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-02T20:51:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-02T20:51:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/display_product_categories_on_shop_page_woocommerce.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1569\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tigran Nazaryan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@10Web_io\" \/>\n<meta name=\"twitter:site\" content=\"@10Web_io\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tigran Nazaryan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Display Product Categories on WooCommerce Shop Pages","description":"Learn how to display product categories on your WooCommerce shop page with our expert tips and tricks. Customizer, blocks, widgets and more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Product Categories on Your WooCommerce Shop Page","og_description":"Learn how to display product categories on your WooCommerce shop page with our expert tips and tricks. Customizer, blocks, widgets and more.","og_url":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/","og_site_name":"10Web - Build &amp; Host Your WordPress Website","article_publisher":"https:\/\/www.facebook.com\/10Web.io\/","article_published_time":"2024-05-02T20:51:14+00:00","article_modified_time":"2024-05-02T20:51:15+00:00","og_image":[{"width":1569,"height":880,"url":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/display_product_categories_on_shop_page_woocommerce.jpg","type":"image\/jpeg"}],"author":"Tigran Nazaryan","twitter_card":"summary_large_image","twitter_creator":"@10Web_io","twitter_site":"@10Web_io","twitter_misc":{"Written by":"Tigran Nazaryan","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/#article","isPartOf":{"@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/"},"author":{"name":"Tigran Nazaryan","@id":"https:\/\/10web.io\/blog\/#\/schema\/person\/9466e64f67fc213397b384bbe3af3bd0"},"headline":"How to Display Product Categories on Your WooCommerce Shop Page","datePublished":"2024-05-02T20:51:14+00:00","dateModified":"2024-05-02T20:51:15+00:00","mainEntityOfPage":{"@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/"},"wordCount":2284,"commentCount":0,"publisher":{"@id":"https:\/\/10web.io\/blog\/#organization"},"image":{"@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/display_product_categories_on_shop_page_woocommerce.jpg","articleSection":["WooCommerce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/","url":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/","name":"How to Display Product Categories on WooCommerce Shop Pages","isPartOf":{"@id":"https:\/\/10web.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/display_product_categories_on_shop_page_woocommerce.jpg","datePublished":"2024-05-02T20:51:14+00:00","dateModified":"2024-05-02T20:51:15+00:00","description":"Learn how to display product categories on your WooCommerce shop page with our expert tips and tricks. Customizer, blocks, widgets and more.","breadcrumb":{"@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/#primaryimage","url":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/display_product_categories_on_shop_page_woocommerce.jpg","contentUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/display_product_categories_on_shop_page_woocommerce.jpg","width":1569,"height":880,"caption":"How to display product categories on the shop page in WooCommerce."},{"@type":"BreadcrumbList","@id":"https:\/\/10web.io\/blog\/how-to-display-product-categories-on-shop-page-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/10web.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Display Product Categories on Your WooCommerce Shop Page"}]},{"@type":"WebSite","@id":"https:\/\/10web.io\/blog\/#website","url":"https:\/\/10web.io\/blog\/","name":"10Web Blog - Build & Host Your WordPress Website","description":"10Web is an All-in-One Website Building Platform, offering Managed WordPress Hosting on Google Cloud, Beautiful Templates, Premium Plugins and Services.","publisher":{"@id":"https:\/\/10web.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/10web.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/10web.io\/blog\/#organization","name":"10Web","url":"https:\/\/10web.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/10web.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/Logo-768x686-1.png","contentUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/Logo-768x686-1.png","width":768,"height":686,"caption":"10Web"},"image":{"@id":"https:\/\/10web.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/10Web.io\/","https:\/\/x.com\/10Web_io","https:\/\/www.instagram.com\/10web.io\/","https:\/\/www.linkedin.com\/company\/10web\/mycompany\/","https:\/\/www.youtube.com\/c\/10Web"]},{"@type":"Person","@id":"https:\/\/10web.io\/blog\/#\/schema\/person\/9466e64f67fc213397b384bbe3af3bd0","name":"Tigran Nazaryan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/10web.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ce2393558e7591a237212f11acac58fb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ce2393558e7591a237212f11acac58fb?s=96&d=mm&r=g","caption":"Tigran Nazaryan"},"description":"Tigran Nazaryan is an experienced science and technology professional. After seeing great potential in the automation of web development, he co-founded and became CInO of 10Web. Tigran is passionate about creating solutions to bring AI automation into web development and turning great ideas into powerful technological achievements.","sameAs":["https:\/\/www.linkedin.com\/in\/tnazaryan\/"],"url":"https:\/\/10web.io\/blog\/author\/tigran\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/posts\/37794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/comments?post=37794"}],"version-history":[{"count":0,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/posts\/37794\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/media\/35073"}],"wp:attachment":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/media?parent=37794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/categories?post=37794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/tags?post=37794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}