Change WooCommerce Frequently Bought Together Layout

How to change the layout of the frequently bought together section in WooCommerce?

Wondering how to change the layout of the WooCommerce frequently bought together section?

The WooCommerce Frequently Bought Together section adds a dedicated space in your store where you can organically market your products. This ‘Frequently Bought Together’ or ‘Customer also bought’ section is a less intrusive way of communicating your popular products to your customers.

To make your WooCommerce product recommendations effective, you would have to improve the visibility of your products. This is exactly what you are getting with WooCommerce frequently bought together.

You can use the WooCommerce product recommendation plugin – Frequently Bought Together for WooCommerce from WebToffee to set up such a dedicated section in your store. The plugin adds a new widget to the product page where you can add the products that customers usually buy with a certain item. We’ll look into this in detail later.

Why do you need to change the WooCommerce frequently bought together layout?

Every website is different in one form or the other. It may be different in how they look, what they show, how they brand, etc. So, the frequently bought together section should also blend into the other components of your store. This is why changing the layout of your WooCommerce frequently bought together section is so important.

The other thing to note here is that customers (especially online shoppers) are accustomed to certain layouts. For example, almost all online shoppers would have visited the Amazon online store at least once. So they would have an idea of how things should look. If you could replace that in your store, you would be able to attain your customer’s trust.

Like in everything else, familiarity pulls in customers. That is, a user would be more confident to engage with something if they interacted with it earlier. So an Amazon-like frequently bought together section might prompt more customers to check it out. But this doesn’t mean that you should compromise on the design. To ensure this, the ‘WebToffee Customers also bought’ plugin offers three different layouts for you to choose from.

Each layout in the plugin is different from one another to make certain that you can find a layout suitable for your store. Let’s see how you can set it up.

How to add a WooCommerce frequently bought together section and change the layout?

You can add an Amazon-like (or a custom-looking) WooCommerce Frequently Bought Together section in your store with the help of the WebToffee plugin. Once the plugin is purchased, installed and activated on your plugin follow the instructions given below to set up the section.

Step 1: Enable ‘Customers also bought’ section in WooCommerce

  1. Go to WooCommerce > Frequently Bought Together on the left menu bar.
  2. Keep the option Enable frequently bought together checked.
enable frequently bought together

Step 2: Configure the plugin settings

  1. Choose which products you want to show as WooCommerce bought together.
    1. If you choose Custom, you will have to manually specify the product relations for all products for whom this section should be displayed.
    2. If not you can select the products in the related section based on the upsells or cross-sells that you have set up earlier.
    3. You may also use the custom product relations that you have established using the plugin – Related products for WooCommerce.
  2. Select the number of products to show in the section.
  3. Decide whether or not to show the primary product (the product that the customer is currently viewing) in the section.
  4. Specify the default state of primary and related products.
  5. Decide what should happen when customers click on an individual-related product.
  6. If required, configure to hide out-of-stock products.
configure the plugin settings

Step 3: Choose the WooCommerce frequently bought together layout

  1. Select how you want that section to appear. It can take the Table view, List view (Amazon-like), or Gallery view.
list view in customers also bought
List View
table view layout
Table View
gallery view layout in frequently bought together
Gallery View
  1. Specify which fields you want to display. Product thumbnail, price, short description, and quantity counter are available.
  2. Place the widget in a comfortable location. You can choose from a predefined list of positions.
  3. Now configure the changes that you want to make to the labels, buttons, and title texts if any.
  4. Click on Save settings to save the changes made.
plugin display settings

Step 4: Configure the frequently bought together products.

Once you have completed the WooCommerce product recommendation display settings, you can move on to configuring the product relations.

If you have chosen Custom products as the product relation in Step 2.3, go to the product edit page of the product and go to the Frequently Bought Together section in the Product data widget. Add the custom products there and set up discounts on WooCommerce frequently bought together bundles if required.

add custom products

If you have chosen related products, upsells, or cross-sells, go to the Linked Products tab in the same section and configure the recommendations.

add related products and upsells

Once this is configured, update the product.

How will this look in your store?

The store in which the List view (Amazon-like WooCommerce frequently bought together section) is enabled will have a product page like this.

preview list view

The Gallery view in the store will appear this way.

preview table view

This is how the Table view will appear in your store.

preview gallery view

All the products in WooCommerce frequently bought together labels would be selected by default. You can deselect them, change their quantity, and add all of them to the cart in just a few clicks.

Key features of the WooCommerce frequently bought together plugin

The core purpose of this plugin is to add a dedicated bought together recommendation widget to your store. The Customer also bought recommendation plugin offers several configurations and layouts to make the most out of this feature. It includes

  • Set up bundle discounts to encourage purchasing the whole bundle
  • Multiple recommendation layouts
  • Multiple product relationship criteria
  • Customize the display fields in the section
  • Define the default state of products in the section
  • Hide out-of-stock products
  • Limit the number of products to be displayed
  • Remove the primary product from the widget
  • Disable users from unchecking the primary product while adding the bundle to cart
  • Select how the products should open up when clicked on them


The frequently bought together section in WooCommerce stores brings more eyes to your products. This would help you improve the average order value of your orders. Custom layouts for the WooCommerce frequently bought together section enable you to change the layout of the section based on your requirements.

The WooCommerce customer also bought product bundles are easy to set up and improve the visibility of your products.

Hope this article answers all your questions. Thanks for reading and do let us know if you have any further confusion regarding this.

Article by

Content writer @ WebToffee. Fueled by caffeine and a love of sarcasm. When not writing, you can catch her binging the latest drama series.

Got any query? Please leave a comment or reach out to our support

Your email address will not be published. Required fields are marked *