{"id":3521,"date":"2020-11-07T19:57:01","date_gmt":"2020-11-07T19:57:01","guid":{"rendered":"https:\/\/www.futurestatemedia.com\/?p=3521"},"modified":"2021-04-09T08:10:10","modified_gmt":"2021-04-09T08:10:10","slug":"how-to-remove-woocommerce-breadcrumbs-from-woo-product-page","status":"publish","type":"post","link":"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/","title":{"rendered":"How To Remove WooCommerce Breadcrumbs From Woo Product Page"},"content":{"rendered":"<p class=\"wp-block-paragraph\">As with all things WooCommerce you can remove WooCommerce breadcrumbs in a few different ways. We specialise in providing answers that DON&#8217;T require you to custom code your WooCommerce store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That being said, we do provide some code based solutions to demonstrate the alternative (wrong) way to hide WooCommerce Breadcrumbs (in our opinion).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;ll briefly also mention using WordPress and how to turn off breadcrumbs in WordPress more generally.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">WooCommerce Remove Breadcrumbs From Product Page<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0f0f0\"><em>This article contains affiliate links which means we may earn a small commission if you purchase plugins and services we mention at no extra cost to you. We only recommend the best plugins and services &#8211; which we have used and can recommend.<\/em><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Remove_WooCommerce_Breadcrumbs_with_Custom_CSS\"><\/span>Remove WooCommerce Breadcrumbs with Custom CSS<span class=\"ez-toc-section-end\"><\/span><\/h2><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a8368a0ea1a5\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a8368a0ea1a5\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/#Remove_WooCommerce_Breadcrumbs_with_Custom_CSS\" >Remove WooCommerce Breadcrumbs with Custom CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/#How_to_Remove_WooCommerce_Breadcrumbs_on_desktop_AND_mobile\" >How to Remove WooCommerce Breadcrumbs on desktop AND mobile<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/#How_to_Remove_WooCommerce_Breadcrumbs_on_Mobile_only\" >How to Remove WooCommerce Breadcrumbs on Mobile only<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/#How_to_Remove_WooCommerce_Breadcrumbs_on_Desktop_Only\" >How to Remove WooCommerce Breadcrumbs on Desktop Only<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/#How_to_Remove_WooCommerce_Breadcrumbs_with_a_Page_Builder\" >How to Remove WooCommerce Breadcrumbs with a Page Builder<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/#WordPress_turn_off_breadcrumbs\" >WordPress turn off breadcrumbs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/#Related_Topics_%E2%80%93_Removing_Elements_From_WooCommerce\" >Related Topics &#8211; Removing Elements From WooCommerce<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<p class=\"wp-block-paragraph\">The simplest, and probably the easiest way to disable WooCommerce Breadcrumbs is by entering some CSS code into the Additional CSS section of the WooCommerce Theme Customizer.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Remove_WooCommerce_Breadcrumbs_on_desktop_AND_mobile\"><\/span>How to Remove WooCommerce Breadcrumbs on desktop AND mobile<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Enter the following CSS Code into the Additional CSS Section of the WooCommerce Theme Customizer<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>\/*Remove Breadcrumbs on Desktop and Mobile*\/<br> .woocommerce-breadcrumb {<br> display: none;<br> }<\/code><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Remove_WooCommerce_Breadcrumbs_on_Mobile_only\"><\/span>How to Remove WooCommerce Breadcrumbs on Mobile only<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>\/*Remove Breadcrumbs on Mobile*\/<br> @media (max-width: 980px){<br> .woocommerce-breadcrumb {<br> display: none;<br> }}<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Remove_WooCommerce_Breadcrumbs_on_Desktop_Only\"><\/span><br>How to Remove WooCommerce Breadcrumbs on Desktop Only<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>\/*Remove Breadcrumbs on Desktop*\/<br> @media (min-width: 981px){<br> .woocommerce-breadcrumb {<br> display: none;<br> }}<\/code><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Remove_WooCommerce_Breadcrumbs_with_a_Page_Builder\"><\/span>How to Remove WooCommerce Breadcrumbs with a Page Builder<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can build an entire new product page using a page builder without using a single line of code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You don&#8217;t have to build anything fancy &#8211; you can in fact just build an almost exact copy of the default WooCommerce Product page and tweak the design to your requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So in this example, you can simply &#8220;switch to page builder&#8221; on the product page and build the page WITHOUT WooCommerce Breadcrumbs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;re not hiding WooCommerce Breadcrumbs<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;re not disabling WooCommerce Breadcrumbs<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;re removing WooCommerce Breadcrumbs from the Product Page altogether.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is, as far as we&#8217;re concerned the right answer from a technical standpoint and a much more sustainable and attainable answer for WooCommerce users who aren&#8217;t developers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">YOU DON&#8217;T need to be a developer to create and run a WooCommerce store &#8211; custom code solutions are damaging ways of creating poorly performing WooCommerce stores that are hacked together with &#8220;customisations&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use a page builder like Divi &#8211; which you can check out here &#8211; <a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=64400&amp;url=64705\" target=\"_blank\" rel=\"noopener\">Read More About the Divi Theme and Page Builder all in one<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=64400_5_1_18\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/www.elegantthemes.com\/affiliates\/media\/banners\/divi_300x250.jpg\" alt=\"Divi WordPress Theme\"\/><\/a><\/figure><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_turn_off_breadcrumbs\"><\/span>WordPress turn off breadcrumbs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If your WordPress theme has breadcrumbs built into it, you&#8217;ll need to consult your theme developer on exactly how to switch off the breacrumbs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re using a decent WordPress theme you&#8217;ll more than likely find a tick box or radio button under &#8220;Theme Options&#8221; or in the WordPress &#8220;Theme Customizer&#8221; to disable breadcrumbs in WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember, you can choose to hide WordPress Breadcrumbs using custom CSS, but this approach is typically a &#8220;work around&#8221; &#8211; as you can end up with lots of CSS designed to hide elements on the page, which can build up over time! These don&#8217;t help with site speed, so it&#8217;s best to use the Theme Options where possible.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"block-editor-block-list__block wp-block is-selected rich-text block-editor-rich-text__editable wp-block-heading\" id=\"block-8a6cf029-35b4-482f-ae00-61210f0481ef\"><span class=\"ez-toc-section\" id=\"Related_Topics_%E2%80%93_Removing_Elements_From_WooCommerce\"><\/span>Related Topics &#8211; Removing Elements From WooCommerce<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.futurestatemedia.com\/en\/how-do-i-remove-checkout-option-from-woocommerce\/\">How to remove checkout option from WooCommerce stores<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.futurestatemedia.com\/en\/change-woocommerce-thank-you-page-without-code-customization\/\">How to edit the WooCommerce thank you page without code<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.futurestatemedia.com\/en\/remove-related-products-in-woocommerce\/\">How to disable and removed related products from the WooCommerce product page<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-hide-category-sku-on-product-page\/\">How to hide the category label on a WooCommerce product page<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-disable-account-creation-how-to-why\/\">How to disable account creation on your WooCommerce store<\/a><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">You Searched For:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">remove woocommerce breadcrumbs<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce remove breadcrumbs<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce breadcrumbs<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">remove breadcrumbs woocommerce<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce breadcrumbs plugin<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>As with all things WooCommerce you can remove WooCommerce breadcrumbs in a few different ways. We specialise in providing answers that DON&#8217;T require you to custom code your WooCommerce store. That being said, we do provide some code based solutions to demonstrate the alternative (wrong) way to hide WooCommerce Breadcrumbs (in our opinion). I&#8217;ll briefly&hellip; <a class=\"more-link\" href=\"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/\">Continue reading <span class=\"screen-reader-text\">How To Remove WooCommerce Breadcrumbs From Woo Product Page<\/span><\/a><\/p>","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[30,20],"tags":[],"class_list":["post-3521","post","type-post","status-publish","format-standard","hentry","category-ecommerce-stores","category-website-design","entry"],"_links":{"self":[{"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/posts\/3521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/comments?post=3521"}],"version-history":[{"count":0,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/posts\/3521\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/media?parent=3521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/categories?post=3521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/tags?post=3521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}