Magento 2 B2B Extensions

  1. Home
  2. Docs
  3. Magento 2 B2B Extensions
  4. Magento 2 Improved Configurable Products
  5. User Guide

User Guide

1. Overview

Keep improving your Magento 2 product pages to leverage customer experience and convince them into sales.

Our Improved Configurable Products for Magento 2 extension when it comes to configurable products.

What to expect?

2. How Does It Work?

2.1. Magento 2 Configurable Product Wholesale Display

2.1.1 In the frontend

Configurable Wholesale Display
  • Show Price Range for configurable products.
  • Show associated products in a grid table with custom options, for example, color and size
  • Show SKU, Availability, Unit Price, Tier Price, and Subtotal in this grid table. Especially, Tier Price is shown in tooltips when hovering.
  • Work well with the Color swatch function of Magento default with clickable options.
  • Support all types of custom options.

2.1.2 In the backend

Go through Stores ⇒ Configuration ⇒ BSSCommerce ⇒ Configurable Product Wholesale Display.

General settings
  • Enabled: choose Yes to enable the extension.
  • Display Attributes: choose attributes to show in the grid table as wished.
  • Display StockNumber: choose Yes to show the number of stock in the grid table. Choose No, it will show stock status: In stock or Out of stock.
  • Advanced TierPrice:

+ Choose Yes then the total amount is based on tier price of the total quantity of children products added to cart.

This feature is only applied if all added children products having the same tier prices.

For example, the tier price of buying 1-9 Black-S shirt, 1-9 Gray-S shirt is similarly $45. Tier price of buying 10-more for every children product is $40.  If you buy 3 Black-S shirts and 7 Black-XL shirts, tier price is now $40/shirt. The total amount is now $400.

+ Choose No: total quantity will take the default tier price. The total amount is calculated by tier prices of each children product multiply to the total quantity of each chosen children product.

For the above example, when using Magento default tier price calculation, the total amount is determined as $450 because it is calculated based on each tier price of each children product (Tier price is equal to $45/shirt)

  • PriceRange: choose Yes if you want to display Price Range for the configurable product above the table.
  • Ajax Load: choose Yes to load wholesale display table by using Ajax

*Note:

For version 1.1.1, there is another configuration in the product setting, called BSS Configurable Product Wholesale Ajax Load as below. The extension takes priority to the configuration for each product over the general setting.

Ajax per product

Also, choose groups to enable Configurable Product Wholesale Display

Choose group for Wholesale Display
  • Hide Price on Table for Customer Groups: choose which customer groups you want to hide price.
  • Enable for Customer Groups: choose which customer groups to show this wholesale display.

You can also custom the design of the table (for responsive purposes)

Responsive configurable wholesale display
  • Header Row Background Color: pick one color that suits your page’s design
  • Header Row Text Color: pick the color of the text
  • Enabled Mobile Display: choose Yes to make the table responsive on mobiles
  • Display Mobile Attributes: choose attributes to show in the grid table view for mobiles
  • Enabled Tablet Display: choose Yes to make the table responsive on tablets.
  • Display Tablet Attributes: choose attributes you want to show in the grid table on tablets.

2.1.3. Choose the order of attributes

The order of custom attributes shown in configurable product wholesale display is based on the order of selected attributes when you create the configurable product.

For example, you create the Hero Hoodie with two custom options: size and color. Here you see the size is arranged above the color:

Create configurable product

Hence, in the product page, size options are above the color options.

Order of Product Attributes

If you want to change this order, just move the color to above the size to below. Remember to Save changes.

2.2. Simple Details on Configurable Product

2.2.1 In the frontend

This is how Simple Details on Configurable Product is displayed in the frontend:

configurable products in the frontend
  • Show details of children items of the configurable product, such as name, SKU, tier price, stock status, stock number, description, additional information and metadata.
  • Get URL for each child product with pre-selected options.
    • URL: URL will change as chosen options. If customers access to the URL, options are also selected on the product page. Besides, you can get URL included category path as wish
    • Custom URL has a form: …/Product-Name+attr1-Value1+attr2-Value2 (For instance: …/hero-hoodie+color-Black+size-S), it changes when choosing attributes of product.
  • Support minimum quantity for product separately added to cart instead of the default of Magento 2, which only allows for configurable products.
  • Support quantity increment for children products. This function outweighs the default with the ability to set increment for each associated product of the configurable product. For example, if you set 5 for quantity increment for a skirt-red-L, then your customers cannot buy this item with quantity 1-2-3 or 6-7-8, they only choose this product with 5-10-15 etc in quantity box.

2.2.2 In the backend

2.2.2.1 GENERAL CONFIGS

Go through Stores ⇒ Settings ⇒ Configuration⇒ BSS Commerce ⇒ Simple Details on Configurable Product.

enable extension

In General:

  • Enabled: choose Yes to enable the module.

NOTE:

  • You can also enable/disable this module for a particular configurable product in SDCP General in the product edit page easily.
  • In case, in General configuration you set No, and in the SDCP General you still choose Yes, the module won’t be enabled.
This image has an empty alt attribute; its file name is 2-general-confi.png

In Attributes Display Config: choose Yes to show the attributes you want in the frontend:

  • SKU
  • Name
  • Description
  • Tier Price
  • Stock Status
  • Gallery Switch Strategy:
    • Replace: replace all parent product’s images by child product’s images
    • Prepend: add child product’s images at the beginning of parent product’s images
    • Disable: display only parent product’s images even when customers select the child product option
  • Child Product Image When Not Have Images Itself (from v1.1.7):
    • Use Parent Product Image: display parent product’s images
    • Use Default Placeholder: display default placeholder of Magento
  • Min/Max Quantity Allow in the shopping cart: this default feature now can support for simple products individually. Edit each child item page in the backend to set minimum or maximum quantity.
  • Quantity Increment: this default feature supports every simple product of the configurable product. Edit each simple product to set quantity increment.
  • Additional Info: show swatch additional information in the More Information tab when customers choose all options of the parent product.
  • Meta Data: auto-create meta data (meta description, title, meta keyword) of child products when choosing all options of the parent product.

In Advanced Settings:

  • Custom URL: choose Yes to enable the child product’s URL to change when the option is selected. The format of this URL is: …/Product-Name+attr1-Value1+attr2-Value2 (For instance: …/hero-hoodie+color-Black+size-S). Note: you should not include characters such as “-“, “~” or “+” in the attribute labels since it might hard to read the URL
  • Add custom child products’ URLs to XML sitemap: If choose Yes, custom child products’ URLs will be added to XML sitemap and Google can index/follow these custom URLs

NOTE: we have fix this child product’s URL format so you cannot change it even in Product Page Details ⇒Search Engine Optimization ⇒ URL Key

2.2.2.2  DETAILED CONFIGURATION

Go to the product details page in the backend.

  • In SDCP General tab
    • Pre-select: the attributes are pre-selected in the product detail page in the backend.
    • Enacle Module: enable the module on this product
    • Enabled Ajax Load Detail
  • In SDCP Preselect tab: display the pre-selected attributes
This image has an empty alt attribute; its file name is detail-confi.png

NOTE: in Magento 2.0.x version, there will be a separate Pre-select tab in product detail page:

pre-select tab
2.2.2.3 IMPORT PRE-SELECT

Go to System ⇒ Data Transfer ⇒ Import SDCP Preselect

This image has an empty alt attribute; its file name is import.png
  • In Import Settings, select SDCP Pre-select in the drop-down list of Entity Type
  • In Import Behavior:
    • Add/Update: This option allows administrators to add new pre-selected attributes the website. In addition, it also updates attributes if their pre-selected attributes exist.
    • Replace: This option allows administrators to add new pre-selected attributes into the website. In case pre-selected attributes in the import data match with pre-selected attributes of existing attributes, these attributes are deleted and new records are created using the CSV data.
    • Delete: This option allows administrators to remove pre-selected attributes in case their pre-selected attributes exist.

Next, you select one option from the drop-down list to determine how the system operates when there are errors in the import process.

  • Stop on Error: the system stops importing when there are errors
  • Skip error entries: the system skips errors and continues to import
  • Allowed Errors Count: This setting allows you to choose the allowed maximum number of errors when importing. If the number of errors happening in the import process exceeds that maximum number you fill in this field, the system will stop importing
  • Filed separator: Choose a character to separate two field column (sku & preselect). In our CSV sample file, the comma (,) is set up as default value
  • Multiple value separator: Choose a character to separate multiple attributes in a field column. In our CSV sample file, the comma (,) is set up as default value
  • CVS file preparation

Before you import product attributes via a CSV file, you need to prepare the CSV file with enough necessary information. You can download this CSV sample file by clicking “Download Sample File”. Then you open this file and fill in fields:

  • In “sku” column: enter the SKU of the configurable products
  • In “preselect” column: enter the attributes with their value
Was this article helpful to you? Yes No

How can we help?