Styling the Frequently Bought Together Widget

The Frequently Bought Together section is built to inherit your theme, so on most stores it already looks at home. There are no colour or font settings for it, so anything beyond what your theme gives you is done with a few lines of custom CSS.

How It Works

The section takes its cues from your theme wherever it can, and falls back to a neutral built-in style for its own parts.

• Text picks up your theme’s fonts and colours.
• The add button uses your theme’s own button style, so it matches the other buttons on the page.
• The panel itself, the row separators and the total use a plain built-in style you can override.

Here are the parts you can target, so you know what to aim at before you write anything.

Where to Put Your CSS

Custom CSS belongs with your theme, never in the plugin’s own files, so it survives every plugin update.

Step 1. Go to Appearance and open Editor, then choose Styles.

Step 2. Click the three dots at the top of the Styles panel and choose Additional CSS.

Step 3. Paste your CSS, then save.

If your theme is a classic one rather than a block theme, the same box lives under Appearance, then Customise, then Additional CSS.

Keep in mind that this CSS is stored against the theme you are using, so if you switch themes later you will need to move it across.

The Names to Target

Each part of the section has its own name you can style.

• .wcf-fbt-widget is the panel around everything
• .wcf-fbt-widget-title is the “Frequently bought together” heading
• .wcf-fbt-widget-row is one product line
• .wcf-fbt-widget-thumb is the small product image
• .wcf-fbt-widget-name is the product name
• .wcf-fbt-widget-price is the price on the right of a row
• .wcf-fbt-widget-toggle is the “Show more” link
• .wcf-fbt-widget-total is the total in the footer
• .wcf-fbt-widget-add is the add button

A Worked Example

This is the whole of what produced the change below.

.wcf-fbt-widget.wcf-fbt-widget {
	border: 2px solid #d9b382;
	border-radius: 14px;
	background: #fdf4e6;
	padding: 24px;
}

.wcf-fbt-widget-title {
	font-size: 18px;
	color: #7c4a11;
}

.wcf-fbt-widget-total {
	color: #b45309;
}

Notice the first line has the panel’s name written twice. That is deliberate, and it matters.

If a Change Does Not Show Up

The section brings its own styling for the outer panel, which can win over yours for things like the border, the background and the corners. Writing the name twice, as in the example above, gives your rule enough weight to take over.

You only need this for the outer panel. The heading, prices, rows and total all take a single name without any trouble.

If something still does not change, clear any caching plugin you are running and reload the page, since a cached copy of the page can hold on to the old styling.

Common Changes

A few short recipes for the things people usually ask about.

Make the product images bigger

.wcf-fbt-widget-thumb {
	width: 60px;
	height: 60px;
}

Hide the product images entirely

.wcf-fbt-widget-thumb {
	display: none;
}

Remove the lines between products

.wcf-fbt-widget-list > * + * {
	border-top: none;
}

Make the total stand out

.wcf-fbt-widget-total {
	font-size: 24px;
	color: #b45309;
}

Frequently Asked Questions