Frequently Bought Together

Hi Team,

Can you help us optimize the FBT block details as below? Kindly provide css code for some changes.

1. Replace the title “Frequently Bought Together” to be “Pairs Well with”

2. Right side titles column optimize
2.1) Short each item title charactors lenth to be within 15, and with “…”end, because it saves spacing,
2.2) Smaller the item price font size same as title, and let price at same line as title,
2.3) Reduce the spacing between each line, to be close,
2.4) Smaller the total price font size to be 16px.

We found the original look doesn’t look good when the items come over 5 or more, by above methods, it should be improved without break your theme structure.

You can find a clear look from my attached pictures.

Thank you very much!

Chen

Attachments:

You must be logged in to view attached files.

Hello,

1. Change the section title to “Pairs Well with”

– If you use a custom Single Product layout (Layout Builder):
– Go to Dashboard -> Layouts, edit your Single Product layout, open the “Frequently bought together” element, set the Title to “Pairs Well with,” then save and clear any caches.

– If you use the default product layout:
– Go to Dashboard -> Loco Translate -> Themes -> WoodMart.
– Create or open your site language in the Custom location, click Sync if needed.
– Search for the source string “Frequently bought together” and set its translation to “Pairs Well with.”
– Save and clear caches.

2. Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Desktop CSS Section:

/* 1. Set each item row to a single line with space between title & price */
.wd-fbt-product-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

/* 2. Format label & truncate title to ~15 characters with "..." */
.wd-fbt-product-heading label {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 8px !important;
}

.wd-fbt-product-heading .wd-entities-title {
    display: inline-block !important;
    max-width: 15ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* 3. Keep price on the same line, right-aligned, matching title font size */
.wd-fbt-product-heading .price,
.wd-fbt-product-heading .price * {
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

/* 4. Reduce vertical spacing between each list item */
.wd-fbt-product {
    margin-bottom: 3px !important;
    padding-bottom: 0 !important;
}

/* 5. Set total price font size to 16px */
.wd-fbt-purchase .price,
.wd-fbt-purchase .price .amount,
.wd-fbt-total .price,
.wd-fbt-total-price {
    font-size: 16px !important;
}

Best Regards.

Hi Team,

I do appreciate for your guide! I have changed the title successfully.

For the title blocks, please futher do,
1. Reduce the empty space in the title section dark area on the desktop, so we are able to add more items on the left.
2. Also provide the same css code to short the mobile device FBT item title length.
2.1) Short each item title charactors lenth to be within 15, and with “…”end
2.2) Smaller the item price font size same as title, and let price at same line as title,
2.3) Reduce the spacing between each line, to be close,
2.4) Smaller the total price font size to be 16px.

I have attched clear pictures for your reference.

Thank you very much!

Attachments:

You must be logged in to view attached files.

Hello,

To apply these changes across all devices (Desktop, Tablet, and Mobile), please add the styling as follows:

1. Paste the main formatting CSS into Theme Settings >> Custom CSS >> Global CSS so it applies to both desktop and mobile:

/* 1. Set each item row to a single line with space between title & price */
.wd-fbt-product-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

/* 2. Format label & truncate title to ~15 characters with "..." */
.wd-fbt-product-heading label {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 8px !important;
}

.wd-fbt-product-heading .wd-entities-title {
    display: inline-block !important;
    max-width: 15ch !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* 3. Keep price on the same line, right-aligned, matching title font size */
.wd-fbt-product-heading .price,
.wd-fbt-product-heading .price * {
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

/* 4. Reduce vertical spacing between each list item */
.wd-fbt-product {
    margin-bottom: 3px !important;
    padding-bottom: 0 !important;
}

/* 5. Set total price font size to 16px */
.wd-fbt-purchase .price,
.wd-fbt-purchase .price .amount,
.wd-fbt-total .price,
.wd-fbt-total-price {
    font-size: 16px !important;
}

2. Paste the following snippet into Theme Settings >> Custom CSS >> Desktop CSS section to narrow the summary box and give more width to the left products column:

/* Reduce width of FBT right summary box on Desktop */
.wd-fbt-wrapper .wd-fbt-purchase,
.wd-fbt-form {
    max-width: 300px !important;
    width: 100% !important;
    flex: 0 0 260px !important;
}

/* Allow left products section to take up the remaining space */
.wd-fbt-wrapper .wd-fbt-products {
    flex: 1 1 auto !important;
}

Please save the settings and clear your browser cache to see the updates.

Best Regards

Hi Team,

On the desktop, you code has reduced the title and prices spacing, but the whole title block does not move to the right align with the container, can you further check? It can’t give more width to the left products column.

Attachments:

You must be logged in to view attached files.

Hello,

Please try to use the custom CSS code below and paste it into Theme Settings >> Custom CSS >> Desktop CSS Section:

.wd-fbt-wrapper,
.wd-fbt {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
}

Best Regards

Hi,

Thank you for your help.
Lastly, on the desktop device, fbt block, please provide css code to hide the product label and add to wishlist button, we want to show full product thumb picture content on the desktop.

I also attached the desktop picture with marked.

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Please add it under Theme Settings > Custom CSS > Desktop CSS.

/* Hide product labels and wishlist button inside FBT product items on Desktop */
.wd-fbt .product-label,
.wd-fbt .wd-wishlist-btn {
    display: none !important;
}

Best Regards.

[Author]

Posts