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

Hello Woodmart Support,

Thank you very much for your help — the custom CSS rules you provided are working perfectly!

The breadcrumb spacing is now just right
Long product names are neatly truncated
And the little home icon displays beautifully

I really appreciate the quality of your support and your attention to detail.

Best regards,
Cédric M.

Hi lost.hinata,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,
Hung PD

[Author]

Posts