Woo Commerce Breadcrumb customizing | WordPress.org

Hi there @omaco 👋

I have three things I was hoping it was possible to customize on breadcrumbs:

Thank you for reaching out to us. It appears that the active theme on the site at is Rehub theme.

Per the theme’s CSS file:

Theme Name: Rehub theme
Theme URI:
Description: A Hybrid magazine/shop/review/news WordPress Theme
Author: Wpsoul
Author URI:
Version: 18.3
Tags: two-columns, fluid-layout, custom-background, threaded-comments, translation-ready, custom-menu
License:
License URI:
Text Domain: rehub-theme

Feel free to get in touch with its developers, for assistance with the CSS customizations you are writing here.

I hope this helps!

HI,

Correct theme is Rehub. In addition using Plugin Woo Commerce. And is using woocommerce-breadcrumb, so was hoping Woo Commerce experts could advice.
Has managed to find out the following code:
nav.woocommerce-breadcrumb a, nav.woocommerce-breadcrumb span{color: #ff4136;}
nav.woocommerce-breadcrumb a, nav.woocommerce-breadcrumb span{font-weight: bold;}

Hello @omaco,

Since your theme is probably overriding the default templates, it’s better if you ask them for these changes. Perhaps the theme has these features built-in without the need for any code whatsoever.

That said, I went ahead and wrote the code below for your first request and to make the “grey shadow” appear on all breadcrumbs.

I made the hover colour shift to the same one in the menu.

/* Make breadcrumbs hover colour orange and add a grey padding */

nav.woocommerce-breadcrumb a:hover {
   color: #ff4136 !important;
   transition-delay: 0.25s;
}

nav.woocommerce-breadcrumb {
   padding: 4px 8px;
   background-color: #f5f5f5;
   border-radius: 3px;
   color: #111 !important;
   display: inline-block;
   margin-bottom: 5px;
   line-height: 13px;

}

You can add it in your Customizer > Add CSS

Hope it helps!

Hi,
Thank you so much. Tested and code worked.