By CSS you can do like:
.woocommerce-page section#title {
display: none;
}
Removing breadcrumbs with CSS is not the right solution, cause it still on the page (but hidden) and takes some time on page loading.
Find functions.php in your active theme folder and add this code at the end of the file:
// Remove breadcrumbs from shop & categories
add_filter( 'woocommerce_before_main_content', 'remove_breadcrumbs');
function remove_breadcrumbs() {
if(!is_product()) {
remove_action( 'woocommerce_before_main_content','woocommerce_breadcrumb', 20, 0);
}
}
Using WooCommerce Conditional Tags we can build own logic. For example, code above is removing breadcrumbs on shop and categories pages, but leave it on the single product page.
You can remove breadcrumbs on the shop page, but leave it in categories:
// Remove breadcrumbs only from shop page
add_filter( 'woocommerce_before_main_content', 'remove_breadcrumbs');
function remove_breadcrumbs() {
if(!is_product() && !is_product_category()) {
remove_action( 'woocommerce_before_main_content','woocommerce_breadcrumb', 20, 0);
}
}
Or you can also remove by page id or page slug:
add_action('template_redirect', 'remove_page_breadcrumbs' );
function remove_page_breadcrumbs(){
if (is_page('YOUR_PAGE_ID_OR_SLUG'))
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
}
woocommerce_before_main_content
is an action hook, soadd_action()
is expected instead ofadd_filter()
. Now a lot of themes make customizations on breadcrumbs, So it's not possible anymore to remove the action like in your code. Often, you will need to find out in the theme what changes have been maid regarding breadcrumbs, to be able to remove them… For example it's the case for Storefront theme.