---
title: "Customers Also Bought"
description: "The Customers Also Bought app adds a product recommendation section to your J2Commerce product detail pages."
url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps/app_customerbought"
markdown_url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps/app_customerbought.md"
last_updated: "2026-11-06T14:28:45+00:00"
version: "J2Commerce 6"
breadcrumbs:
  - title: "Home"
    url: "https://docs.j2commerce.com/"
  - title: "J2Commerce 6"
    url: "https://docs.j2commerce.com/v6"
  - title: "Apps and Extensions"
    url: "https://docs.j2commerce.com/v6/apps-and-extensions"
  - title: "Apps"
    url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps"
  - title: "Customers Also Bought"
    url: "https://docs.j2commerce.com/v6/apps-and-extensions/apps/app_customerbought"
---

# Customers Also Bought

The Customers Also Bought app adds a product recommendation section to your J2Commerce product detail pages. You choose which products appear for each item and customers check the ones they want. The section shows only products that are currently in stock, so customers never encounter unavailable items.

Two layouts are available: Product Cards with a Purchase Together button, and Stacked, a checkbox list with a live subtotal that adds everything with the product's own Add to Cart button.

Use it to suggest complementary products, such as accessories, on the page where the shopper is already choosing the main product.

## Requirements

- PHP 8.3+
- Joomla! 6.x
- J2Commerce 6.6.4 or later

## Purchase and Download

‌**Step 1:** Go to our [**J2Commerce** website](https://www.j2commerce.com/extensions) **->** **Apps**

**Step 2:** Locate the **Customers Also Bought** App **->** click **View Details** **->** **Add to cart** **->** **Checkout**.

**Step 3:** Go to your **My Downloads** under your profile button at the top right corner and search for the app. Click **Available Versions -> View Files -> Download**

## Install the App

Go to **System** **->** **Install** **->** **Extensions**

Upload the plugin ZIP file or use the Install from URL option.

![Joomla System Dashboard with System in the sidebar and the Install section's Extensions link highlighted, used to upload an extension package](https://docs.j2commerce.com/images/docs/shared/address-install.webp)

## Enable the App

Once you have installed the App, you will need to enable it. There are **two** ways you can access the App.

**Option A:** Go to the **J2Commerce** icon at the top right corner **-> Apps**

**Option B:** Go to **Components** on the left sidebar **-> J2Commerce -> Apps**

![Joomla admin navigation to J2Commerce Apps: Components, J2Commerce, Apps in the sidebar, and Apps in the J2Commerce menu, all highlighted](https://docs.j2commerce.com/images/docs/shared/address-apps.webp)

To help you narrow down the list, you can do a search for the **J2Commerce - Customers Also Bought** app, click the **X,** and it will turn into a green checkmark. It is now enabled and ready for setup.

![J2Commerce Apps list searched for "customer", with the Apps menu item, search box and Customers Also Bought enabled status icon highlighted](https://docs.j2commerce.com/images/docs/shared/customers-bought-enable.webp)

## Configure the App

Click on the **Customers Also Bought** title to open the plugin settings. The settings are on two tabs, **Plugin** and **Display**.

### Plugin Tab

| Setting | What It Does | Default | Options |
| --- | --- | --- | --- |
| **Template Style** | The template style used to render the section. Choose the one that matches your front-end theme. | Auto (empty) | The installed template styles, such as bootstrap5 and uikit |
| **Section Title** | Heading displayed above the products. Leave it blank to use Customers Also Bought. | Blank | Any text |
| **Fall Back to Cross-Sells** | When a product has no Customers Also Bought list, shows its cross-sells instead. | No | Yes, No |
| **Debug Mode** | Writes diagnostic messages to `logs/app_customerbought.php`. Turn it off in production. | No | Yes, No |

### Display Tab

The **Display** tab controls the layout and the look of the section on every product page.

| Setting | What It Does | Default | Options |
| --- | --- | --- | --- |
| **Display Layout** | Product Cards shows the add-ons as cards with a Purchase Together button. Stacked shows a checkbox list with a live subtotal; the product's own Add to Cart button adds the product and every ticked item. | Product Cards | Product Cards, Stacked |
| **Display Position** | Where on the product page the section appears. Use Stacked with Before Add to Cart or After Add to Cart. | Before Upsells | Before Upsells, Before Cross-sells, Before Add to Cart, After Add to Cart |
| **Maximum Products** | The most associated products to show at once. | 6 | 1 to 20 |
| **Show Price** | Shows the price of each product. | Yes | Yes, No |
| **Show Discount Badge** | Shows a discount badge when a product has a special price. | Yes | Yes, No |
| **Button Text** | Label of the Purchase Together button. Leave it blank to use Purchase Together. | Blank | Any text |
| **Button CSS Class** | CSS classes applied to the button. Change them to match your theme's button style. | `btn btn-primary` | Any CSS classes |
| **Show Subtotal and Checked Items** | Stacked layout only. Shows the summary line (for example 1 × Product + Add-on) and the subtotal under the list. Shown when **Display Layout** is Stacked. | Yes | Yes, No |
| **Cards per Row** | Product Cards layout only. A table with one row per screen width (**Screen Width** and **Cards per Row**) that sets how many cards fit in a row from that width upwards. A width you leave out uses the row above it; if a width is listed twice, the last row wins. | 1 (XS), 2 (SM), 3 (MD), 4 (LG), 4 (XL), 5 (XXL) | 1 to 6 cards for XS (below 576px), SM (576px and up), MD (768px and up), LG (992px and up), XL (1200px and up), XXL (1400px and up) |

With the Product Cards layout, the section switches to a Swiper.js slider when there are more products than fit in a single row.

Click **Save** or **Save & Close** to apply your changes.

> **Note:** If you used the Responsive Display tab before, your saved card counts still apply. They now appear in the **Cards per Row** table on the **Display** tab.

## Assign Products to Each Product Page

The global settings above apply site-wide. You then assign specific associated products to each individual product. This is done inside the product editing form.

Go to **J2Commerce** **-> Catalog ->** **Products**.

![J2Commerce Products screen after saving, opened through the J2Commerce menu: Catalog and Products highlighted, with an Article saved message](https://docs.j2commerce.com/images/docs/shared/customers-bought-product.webp)

Click on the product you want to configure.

Click on the **J2Commerce** tab **-> Apps.** Scroll down to find the **Customers Also Bought** tab in the product form.

![Product edit, Apps tab highlighted, with the J2Commerce - Customers Also Bought section highlighted below Custom Tabs and Custom Accordions](https://docs.j2commerce.com/images/docs/shared/customers-bought-apps.webp)

To change the layout for this product only, set **Display Layout** at the top of the tab to **Product Cards** or **Stacked**. The default, **Use Plugin Setting**, follows the plugin's Display Layout.

In the **Search Products** field, type a product name or SKU. A dropdown appears as you type (minimum 2 characters).

Select a product from the suggestions. It is added to the table immediately with a live stock status badge — **In Stock** (green) or **Out of Stock** (amber).

![Product edit, Apps tab with Customers Also Bought expanded: product list Nut Sack, Landing Strip and Blonde Bombshell marked In Stock, and the Search Products field highlighted](https://docs.j2commerce.com/images/docs/shared/customers-bought-apps1.webp)

- Repeat for each additional product you want to associate.
- To remove a product, click the red **trash** icon in its row.
- Click **Save** on the product.

Out-of-stock products show a warning in the table to let you know they will not appear on the front end until stock is restored.

### Frontend View

![Product page with the Customers Also Bought section heading highlighted below the Description tab, showing Ring of Fire, Nut Sack (24% off), Landing Strip and Blonde Bombshell cards](https://docs.j2commerce.com/images/docs/shared/customers-bought-frontend.webp)

## How It Works on the Front End

With the Product Cards layout, a shopper who visits a product page where you have configured associated products sees this:

1. The **Customers Also Bought** section appears in the position you selected (before upsells, before cross-sells, before the add-to-cart button, or after it).
2. The current product card appears first with its checkbox pre-checked and locked — it is always included.
3. Associated in-stock products appear alongside it, each with their own checkbox pre-checked.
4. Shoppers can uncheck any product they do not want.
5. A running total updates in real time as checkboxes are toggled.
6. Clicking **Purchase Together** (or your custom button label) adds all checked products to the cart in a single action.

Products that are out of stock are filtered out automatically and never shown to shoppers. If all associated products for a given product page happen to be out of stock, the entire section is hidden.

### Stacked Layout

With the Stacked layout, the section is a checkbox list inside the product's add-to-cart area.

1. Each add-on has a checkbox, its image, its name and its price.
2. The subtotal and the summary line update as the shopper ticks items.
3. The product's own **Add to Cart** button adds the product and every ticked add-on to the cart.

An add-on that has options shows a **Choose Options** link to its product page instead of a checkbox. An add-on priced at 0.00 shows its price and can be ticked like any other.

### Frontend View

![Customers Also Bought section with the four product selection checkboxes, the Total for selected products of $62.25 and the Purchase Together button highlighted](https://docs.j2commerce.com/images/docs/shared/customers-bought-frontend1.webp)

## Display Conditions

The section appears on a product page only when all of the following are true:

- The plugin is enabled.
- The current product has at least one associated product configured in its **Customers Also Bought** tab, or **Fall Back to Cross-Sells** is Yes and the product has cross-sells.
- At least one of those associated products is currently in stock.

## Tips

- Assign 4–6 complementary products per product page for the best experience. Too many choices can be overwhelming.
- Use the **Maximum Products** setting as a safety limit — if you assign 10 products but set the maximum to 6, only the first 6 eligible in-stock products are shown.
- Adjust the **Display Position** to suit your page layout. **Before Upsells** works well when upsells are visually prominent, so the "Also Bought" section leads into them naturally.
- Use the Stacked layout with the Before Add to Cart or After Add to Cart position, so the checkbox list sits next to the button that adds it.
- Every element in both layouts carries a class that starts with `j2c-cb-`. Use these classes in your template's CSS to restyle the section.
- Keep the **Button CSS Class** consistent with your theme's primary action buttons for a polished look.

## Troubleshooting

### The Section Does Not Appear on the Product Page

**Cause:** One or more configuration steps have been missed.

**Solution:**

1. Confirm the plugin is enabled in **J2Commerce** -> **Apps**.
2. Open the product in **J2Commerce** -> **Catalog** -> **Products** and verify that at least one product has been added to the **Customers Also Bought** tab.
3. Confirm that the associated product(s) are published and in stock. Out-of-stock products are automatically hidden.
4. Check that **Display Position** in the **Display** tab matches a position that your current template renders.

### All Associated Products Show as Out of Stock in the Admin

**Cause:** The products have stock management enabled and their availability count is zero (and backorders are not allowed).

**Solution:**

1. Go to **J2Commerce** -> **Catalog** -> **Products** and open each affected associated product.
2. Check the product's stock settings — either increase the stock quantity or allow backorders.
3. Alternatively, disable stock management for that product if stock tracking is not required.

### The Purchase Together Button Does Not Add Products to the Cart

**Cause:** A JavaScript error on the page is preventing the click handler from running.

**Solution:**

1. Open your browser's developer tools (F12) and check the **Console** tab for errors.
2. Clear your browser cache and reload the page.
3. Enable **Debug Mode** in the plugin settings, reproduce the issue, then check `logs/app_customerbought.php` for any server-side messages.

### The Section Appears in the Wrong Location

**Cause:** The **Display Position** setting does not match the desired position.

**Solution:**

1. Go to **J2Commerce** -> **Apps** -> **Customers Also Bought** and open the **Display** tab.
2. Change **Display Position** to the desired value.
3. Click **Save**, then reload the product page to verify the new position.

### Stock Badges Are Not Updating After Adding a Product in Admin

**Cause:** The stock check runs via an AJAX call immediately after you select a product. A network issue or JavaScript error may have interrupted it.

**Solution:**

1. Save the product form and reopen it. The stock status is re-evaluated fresh each time the form loads.
2. If a product consistently fails to show a stock badge, verify the product has a master variant in the database and is published.