Woo Commerce Breadcrumb customizing

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 https://www.blackfridayoversikten.no is Rehub theme.

Per the theme’s CSS file:

Theme Name: Rehub theme
Theme URI: https://themeforest.net/item/rehub-directory-multi-vendor-shop-coupon-affiliate-theme/7646339
Description: A Hybrid magazine/shop/review/news WordPress Theme
Author: Wpsoul
Author URI: https://wpsoul.com/
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!

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 @omaco,

Tested and code worked.

I’m glad Saif’s CSS worked for you. Thanks for letting us know!

If you have a few minutes, we’d love it if you could leave us a review: https://ww.wp.xz.cn/support/plugin/woocommerce/reviews/

Cheers.