Home > Docs > Frequently Bought Together for WooCommerce > Display Frequently Bought Together Products Bundle on a Custom Page with Shortcodes

Display Frequently Bought Together Products Bundle on a Custom Page with Shortcodes

Last updated on January 12, 2024

The Frequently Bought Together for WooCommerce plugin by WebToffee provides the ability to display the frequently bought together (FBT) products and provide good deals on buying them together. However, in some instances, you may need some additional assistance, such as:

  • FBT bundles may not appear on the product page due to some theme conflict.
  • The store owner wants to display a particular FBT bundle on a specific page (cart page, checkout page).

This article addresses the issues and how to rectify them with the help of simple shortcodes. Here are the cases we will look into in this article:

  1. Scenario 1: WooCommerce product page hooks overridden by theme.
  2. Scenario 2: WooCommerce product page hook missing in the theme.
  3. Scenario 3: To display the FBT bundle on a custom post.
  4. Scenario 4: To display the FBT bundle on a custom page.

Scenario 1: WooCommerce product page hooks overridden by theme

In a few themes, the WooCommerce single product page hooks will be overridden by the hooks of the child theme. Since the Frequently Bought Together plugin is searching for WooCommerce hooks to attach to, the FBT bundles won’t be displayed on the single product page. To resolve this issue, follow the below-mentioned steps:

  • From the WordPress admin dashboard, navigate to Appearance > Theme File Editor.
  • Under the child theme folder, from the woocommerce folder, locate the file belonging to the single product page.
  • From the file, locate the hook that replaced the WooCommerce default hook.
  • Note down the hook.
  • From the WordPress admin dashboard, navigate to Appearance > Theme File Editor.
  • Under the theme files, select functions.php
  • Paste the given code snippet at the end of the file.
  • Replace the woocommerce_single_product_summary with the hook copied from the child theme folder.
  • Save the functions.php file.

The single product page will now showcase the FBT bundle.

Scenario 2: WooCommerce product page hook missing in the theme

There are cases where the WooCommerce single product page hooks will be missing from the child theme file. Hence, there are no hooks for the Frequently Bought Together plugin to attach to, the FBT bundle won’t be displayed on the single product page. To resolve this issue, follow the below-mentioned steps:

  • From the WordPress admin dashboard, navigate to Appearance > Theme File Editor.
  • Under the child theme folder, from the woocommerce folder, locate the file belonging to the single product page.
  • Add the given code in the appropriate location on the single product page.

Save the file.

The single product page will now showcase the FBT bundle.

Scenario 3: To display the FBT bundle on a custom post

In some instances, the store owner may want to display a Frequently Bought Together bundle on a custom post type, such as in a blog post to demonstrate the FBT bundles. You can easily accomplish this by using a shortcode.

To display an FBT bundle in a post:

  • Open the post edit page of the particular post to display the FBT bundles.
  • Add the below-mentioned shortcode to the content.
  • Update the post.
Adding FBT bundles in the post edit page
Adding FBT bundles in the post edit page
  • The blog post will now showcase the FBT bundle associated with product ID 295 as shown below.
Blog post with FBT bundles
Blog post with FBT bundles

Scenario 4: To display the FBT bundle on a custom page

In some instances, the store owner may want to display a Frequently Bought Together bundle on a custom page type, such as in the cart page or checkout page, for promotional purposes. You can easily accomplish this by using a shortcode.

To display an FBT bundle on a page:

  • Open the page to display the FBT bundles.
  • Click on Edit Page.
  • Add the Shortcode provided below to the page as shown below.
  • Update the page.
Adding shortcode in Cart page
Adding shortcode in Cart page
  • The cart page will now showcase the FBT bundle associated with product ID 295 as shown below.
FBT bundles displayed on cart page
FBT bundles displayed on cart page