Return to previous page

Display breadcrumbs only on category pages

This topic has 6 replies, 3 voices, and was last updated 9 months, 1 weeks ago ago by Andrew Mitchell

Kombajn88

Participant

March 26, 2024 at 17:17
Hello,

I just want to make sure if my way of displaying breadcrumbs only on the products page is the most optimal way, or if there is perhaps some other simpler way to osiagn this effect.

I have added JavaScript code to display breadcrumbs only on pages with the initial category address
```
document.addEventListener('DOMContentLoaded', function() {
  var breadcrumbContainer = document.querySelector('.page-heading');
  if (breadcrumbContainer) {
    var path = window.location.pathname;
    if (path === '/shop' || path.startsWith('/shop/') || path.startsWith('/category/')) {
      breadcrumbContainer.style.display = 'block'; 
    } else {
      breadcrumbContainer.style.display = 'none';
    }
  }
});
```
It annoys me a little that when loading the page for a fraction of a second you can see breadcrumbs on pages where I removed them.

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.
#388712 Copied Theme version: 9.3
5 Answers
Luca Rossi

Support staff

March 27, 2024 at 07:25
Hello @Kombajn88,

Thank you for reaching out to us with your query regarding the display of breadcrumbs on your products page.

From your description, it seems you have implemented a JavaScript-based solution to control the visibility of breadcrumbs on your website. While your current method is functional, the brief visibility of breadcrumbs on page load that you’ve mentioned is a common side effect known as “flash of unstyled content” (FOUC). This occurs because the JavaScript only executes after the page has started loading.

To mitigate this issue, you might consider a CSS-based approach if your website structure allows for it. For example, you could use CSS to hide the breadcrumbs by default and then specifically display them on pages that match the product or category pattern. Here’s a simple example:
```
/* Hide breadcrumbs by default */
.page-heading {
  display: none;
}

/* Show breadcrumbs only on shop and category pages */
body.shop .page-heading,
body.tax-product_cat .page-heading {
  display: block;
}
```
Please note that the above CSS assumes that your body tag has a class that corresponds to the shop or category pages. You would need to adjust the selectors according to your site’s actual classes or IDs.

If a CSS-only solution is not feasible due to the structure of your website, you might consider modifying your JavaScript to hide the breadcrumbs by default using inline styles or classes, and then remove that style or class when your conditions are met.

Additionally, if you’re using a content management system or a server-side language, you might be able to implement a server-side solution to determine when to display breadcrumbs, which would prevent them from appearing momentarily on page load.

If you require further assistance or have additional questions, please do not hesitate to contact us. We’re here to help ensure your website provides the best user experience possible.

Best Regards,
8Theme’s Team
#388747 Copied
Kombajn88

Participant

March 27, 2024 at 12:16

I managed to edit with css, but unfortunately now I am missing some functionality.

When you select a category from the menu at the top of the store (image) the breadcrumbs do not appear, with Javascript this functionality worked.
The menu from the photo is inserted based on custom html link (I added these items myself)

Is it possible to do something staying with css to make it work?

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#388792 Copied
Luca Rossi

Support staff

March 27, 2024 at 13:30
Hi @Kombajn88,

We couldn’t login to your website. Could you please check?

https://prnt.sc/H2zd3RxLKgho

We also check your custom CSS, please update your custom CSS to this:
```
.page-heading{
     display:none
}
body.post-type-archive-product .page-heading,
body.shop .page-heading,
body.tax-product_cat .page-heading {
     display:block
} 
```
Best Regards,
8Theme’s Team
#388802 Copied
Kombajn88

Participant

March 27, 2024 at 19:24

Works great, thank you very much

#388837 Copied

Andrew Mitchell

Support staff

March 27, 2024 at 19:24

Dear Kombajn88,

We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

Click here to rate now: https://themeforest.net/downloads

Thank you sincerely for your ongoing support!

Best Regards,
The 8Theme Team

#388838 Copied
Tagged: best selling, category pages, woocommerce themes
Viewing 6 results - 1 through 6 (of 6 total)