Breadcrumb Styling – Spacing, Product Name Truncation & Home Icon

Hello dear support team,

I have a few styling questions regarding the breadcrumb navigation on my product pages.

Vertical spacing
The breadcrumb appears too far down the page, with too much vertical margin.
I would like to move it up, closer to the navigation bar, and ideally control its position with pixel precision.
Can you please tell me how to adjust this spacing?

Long product names
As shown in the screenshot I attached, some product names are very long and get added to the end of the breadcrumb.
This sometimes causes the breadcrumb to wrap onto two lines, which I would prefer to avoid.
Is it possible to truncate the product name within the breadcrumb (for example, with an ellipsis …) to keep the whole line on one row?

Home icon
I would also love to add a small house icon before the “Home” link at the beginning of the breadcrumb trail — just a simple visual cue for users.
Can this be done via the theme settings, or do you have a small CSS/HTML solution to recommend?

Thanks a lot for your support and all your help as always!

Best regards,
Cédric M.

Attachments:

You must be logged in to view attached files.

Hi lost.hinata,

Thanks for reaching to us.

1. Please use below Custom CSS:

main.wd-content-layout {
    padding-block: 20px;
}

2. Please use below Custom CSS:

.wd-last {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px; /* or any desired width */
}

3. Please use below Custom CSS:

.wd-breadcrumbs.woocommerce-breadcrumb a:first-child::before {
    content: "\f144";
    font-family: "woodmart-font";
    margin-right: 5px;
    display: inline-block;
}

Regards,
Hung PD

[Author]

Posts