Related Products, Up-sells, Cross-sells in WooCommerce, Shopify, Magento

When you are building your website, it’s important to be mindful of how visitors will navigate through the site. If your customer visits a product, we should show other related products. For example:

  • Fashion & clothing stores – Upsell a gift packaging which you can easily wrap yourself. For example a gift wrap
  • Gadgets & tech stores – Upsell an extended warranty for your (selected) products
  • Adult, cannabis, weed & marijuana stores – Upsell a private and smell proof packaging
  • Services & SaaS stores – Upsell access to premium customer service

Product pages can present unique opportunities and challenges in this context. While the main focus is on the product itself, there’s also an opportunity to display, and cross-sell complementary products.

In this post, we will be looking at the different ways developers can build “smart” options for recommending related products. I’ll also show you how to create a section that displays related products by tag, which will empower your clients to personalize each one of their product pages.

WooCommerce Related Products

In WooCommerce, Product Related could be config in three different ways: Up-sells, Cross-sells and Related by categories, tags.

To add an up-sell or cross-sell to a product:

  1. Go to WooCommerce > Products and select the product on which you’d like to show an up-sell or cross-sell.
  2. Scroll down to the Product Data panel.
  3. Select the Linked Products tab on the left menu.
  4. Add the product you wish to link to by searching for it.
  5. Update.

WooCommerce hide related products

If you want woocommerce disable related products or woocommerce hide related products you just do following:

  1. Go to WooCommerce > Products and select the product on which you’d like to show an up-sell or cross-sell.
  2. Scroll down to the Product Data panel.
  3. Select the Linked Products tab on the left menu.
  4. Remove the product you wish to hide.
  5. Update.

Setup Magento crosssell, magento upsell, magento Related Products

You can setup Magento crosssell, upsell, related products by defining the nature of the relationship between the products

Magento upsell

Up-sell products are items that are similar, but are perhaps of a higher-quality, more popular, or have a better profit margin than the item the customer is considering.

Up-sell products are items that your customer might prefer instead of the product currently considered. An item offered as an up-sell might be of a higher quality, more popular, or have better profit margin. Up-sell products appear on the product page under a heading such as, “You may also be interested in the following product(s).”

To add up-sell product on Magento you need do following steps:

  1. Go to Admin > Products
  2. Open the product in edit mode
  3. Scroll to the section “Related Products, Up-Sells, and Cross-Sells”
  4. Click to Add Up-Sell Products
  5. Use filter to select the products that you want.
  6. Add Selected Products

magento related products

 

Magento crosssell

Magento Cross-sell products are offered on the shopping cart page as last-minute purchases before the checkout process begins. Cross-sell items are similar to impulse purchases positioned next to the cash register in the checkout line. Products offered as a cross-sell appear on the shopping cart page, just before the customer begins the checkout process.

To add cross-sell product on Magento you need do following steps: (Just similar add the upsells)

  1. Go to Admin > Products
  2. Open the product in edit mode
  3. Scroll to the section “Related Products, Up-Sells, and Cross-Sells”
  4. Click to Add Cross-Sell Products
  5. Use filter to select the products that you want.
  6. Add Selected Products

Magento Related Products

Magento Related products are meant to be purchased in addition to the item the customer is viewing. The customer can place the item in the shopping cart by simply clicking the checkbox. The placement of the Related Products block varies according to theme and page layout. In the example below, it appears at the bottom of the Product View page. With a 2 column layout, the Related Product block often appears in the right sidebar.

To add Related products on Magento you need do following steps: (Just similar add the upsells)

  1. Go to Admin > Products
  2. Open the product in edit mode
  3. Scroll to the section “Related Products, Up-Sells, and Cross-Sells”
  4. Click to Add  Related Products
  5. Use filter to select the products that you want.
  6. Add Selected Products

Add Related Products Shopify

The simplest way to recommend related products is to install a related products app. There are several apps for product recommendations. We have tried some apps and see Globo Related Products are the best one. It is Free for Related Products, If you want to Also Bought Products you could charge fee. You can contact to app developer to get more free trial or discount.

If you don’t want to use app, please following to custom your theme

Then copy and paste the following code to related-products.liquid file

{% if section.settings.show_related_products == true %}
<hr>
<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
 
{% comment %}
  Number of related items per row,
  and number of rows.
{% endcomment %}

{% assign number_of_related_products_per_row = section.settings.related_grid_num %}
{% assign number_of_rows = section.settings.related_grid_row %}

{% comment %}
  Heading.
  Leave blank if you don't need one.
{% endcomment %}

{% assign heading = section.settings.related_title %}

{% comment %}
  Set either or both to true, if you want
  to limit yourself to items with same vendor, and/or type.
{% endcomment %}

{% assign same_vendor = false %}
{% assign same_type = false %}

{% comment %}
  Collections to ignore.
  Never pick related items from those.
{% endcomment %}

{% assign exclusions = 'frontpage,all' | split: ',' %}

{% comment %}
  Looking for a relevant collection.
{% endcomment %}

{% if product.metafields.c_f['Related Products'] %}
  {% assign collection = collections[product.metafields.c_f['Related Products']] %}
{% endif %}

{% assign found_a_collection = false %}
{% if collection and collection.all_products_count > 1 %}
  {% unless exclusions contains collection.handle %}
    {% assign found_a_collection = true %}
  {% endunless %}
{% endif %}
{% unless found_a_collection %}
  {% for c in product.collections %}
    {% unless exclusions contains c.handle or c.all_products_count < 2 %}
      {% assign found_a_collection = true %}
      {% assign collection = c %}
      {% break %}
    {% endunless %}
  {% endfor %}
{% endunless %}

{% comment %}
  If we have a relevant collection.
{% endcomment %}

{% if found_a_collection %}

  {% assign counter = 0 %}
  {% assign break_at = number_of_rows | times: number_of_related_products_per_row %}
  {% assign current_product = product %}
  
  {% case number_of_related_products_per_row %}
    {% when '1' %}
      {% assign grid_item_width = '' %}
  {%- assign max_height = 700 -%}
    {% when '2' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-half' %}
  	  {%- assign max_height = 530 -%}
    {% when '3' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-third' %}
      {%- assign max_height = 345 -%}
    {% when '4' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
  {%- assign max_height = 250 -%}
    {% when '5' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-fifth' %}
  {%- assign max_height = 195 -%}
    {% when '6' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-sixth' %}
  {%- assign max_height = 195 -%}
    {% else %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
  {%- assign max_height = 195 -%}
  {% endcase %}


  {% capture related_items %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">

  {% for product in collection.products %}
  {% unless product.handle == current_product.handle %}
  {% unless same_vendor and current_product.vendor != product.vendor %}
  {% unless same_type and current_product.type != product.type %}
  <div class="grid__item {{ grid_item_width }}">
    {% include 'product-card-grid', max_height: max_height %}
  </div>
  {% assign counter = counter | plus: 1 %}
  {% if counter == break_at %}
  {% break %}
  {% endif %}
  {% endunless %}
  {% endunless %}
  {% endunless %}
  {% endfor %}
</div>
  {% endcapture %}

  {% assign related_items = related_items | trim %}

  {% unless related_items == blank %}

  <aside class="grid">
    <div class="grid__item">
      {% unless heading == blank %}
      <header class="section-header">
        <h2 class="section-header__title">{{ heading }}</h2>
      </header>
      {% endunless %}
      <div class="grid-uniform">
        {{ related_items }}
      </div>
    </div>
  </aside>

  {% endunless %}
     
{% endif %}
  
</div>
{% endif %}

{% schema %}
{
  "name": "Related products",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_related_products",
      "label": "Show related products",
      "default": false
    },
    {
      "id": "related_title",
      "type": "text",
      "label": "Section title",
      "default": "Other fine products"
    },
    {
      "type": "select",
      "id": "related_grid_num",
      "label": "Products per row (Desktop)",
      "default": "4",
      "options": [
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        }
      ]
    },
    {
      "type": "select",
      "id": "related_grid_row",
      "label": "Number of rows (Desktop)",
      "default": "1",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        }
      ]
    }
  ]
}
{% endschema %}