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 -> 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.

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

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.

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

Display Tab

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

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.

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.

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.

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).

• 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

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

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.