Home › Forums › WoodMart support forum › Breadcrumb Styling – Spacing, Product Name Truncation & Home Icon

Breadcrumb Styling – Spacing, Product Name Truncation & Home Icon

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 20, 2025 at 7:05 pm #661967

    lost.hinata
    Participant

    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.
    May 21, 2025 at 5:43 am #662034

    Hung Pham
    Keymaster

    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

    May 21, 2025 at 12:30 pm #662165

    lost.hinata
    Participant

    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.

    May 21, 2025 at 4:55 pm #662286

    Hung Pham
    Keymaster

    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
Viewing 4 posts - 1 through 4 (of 4 total)