Removing breadcrumbs on Shop Main Page and spacing above body

Support
#1

Hi there,
On my site, dhbrownstaging.wpengine.com, I’m trying to remove the breadcrumbs and some spacing on ONLY the shop main page - https://dhbrownstaging.wpengine.com/storefront/

I’ve tried targeting .woocommerce .page-id-3998 and I can’t figure out how to only remove it from this page. It removes it from all the pages or none.

How can I achieve this? Thanks so much!

#2

Hi @powrider686,

Thank you for reaching out to us. To remove the breadcrumbs and extra spacing from shop page only, please add the following code in the Theme Options > CSS:

.archive.woocommerce .x-breadcrumb-wrap {
    display: none;
}
.archive.woocommerce .x-container>.offset {
    margin-top: 10px;
}
.archive.woocommerce p:empty {
    display: none;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Let us know how this goes!

#3

That did the trick, thank you!

#4

Glad to hear it’s sorted!

#5

Actually on second look, it didn’t quite solve everything. Breadcrumbs are gone from the main store page - https://dylanhbrown.com/storefront, but they are also missing off the collection pages, and I would like them to be on the collection pages https://dylanhbrown.com/collections/black-white/. How can I only target the main storefront page?

Thanks so much!

#6

Hi @powrider686,

In this case, please change the previous custom CSS to this:

 .post-type-archive-product.woocommerce .x-breadcrumb-wrap {
    display: none;
}
.post-type-archive-product.woocommerce .x-container>.offset {
    margin-top: 10px;
}
.post-type-archive-product.woocommerce p:empty {
    display: none;
}

Hope it helps :slight_smile:

#7

That did the trick! Thank you!

#8

Glad that we could be of a help :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.