Magento 2 B2B Extensions

  1. Home
  2. Docs
  3. Magento 2 B2B Extensions
  4. Magento 2 Configurable Product Wholesale Display
  5. User Guide

User Guide

1. Overview

Configurable Product Wholesale Display for Magento 2 displays all associated products in a grid table view to add multiple children products at once.

This extension absolutely deserves to be a brilliant solution for any Magento site for selling large quantity, like B2B websites.

2. How Does It Work?

2.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 Color swatch function of Magento default with clickable options.
  • Support all type of custom options.

2.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 child products have the same tier prices from v1.3.9 and earlier.

From v1.4.0, the extension does not require setting tier price for all child products for Advanced TierPrice to work. This feature is applied for any child products have the same discount amount and required quantity in tier price.

3 cases of the same discount amount:

1. Discount with a fixed amount 

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

2. Discount with percentage 

For example, the tier price of buying 1-9 Black-S shirt, 1-9 Gray-S shirt is similarly $50. Tier price of buying 10-more for every child product is 15% off - $42,5 after discount. If you buy 3 Black-S shirts and 7 Gray-S shirts, the tier price is now $42.5/shirt. The total amount is now $425.

3. Discount with both a fixed amount and percentage

For example, the tier price of buying 1-9 Black-S shirt, 1-9 Gray-S shirt is similarly $50. Tier price of buying 10-more for Black-S shirt is $42,5 after discounting 15% off and buying 7 Gray-S shirts is the fixed amount of $42,5. If you buy 3 Black-S shirts and 7 Gray-S shirts, the tier price is now $42.5/shirt. The total amount is now $425.

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

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

*NOTE: Special Price Vs. Tier Price

+ If special price < tier price, applying special price to the total amount

+ If tier price 1 < special price < tier price 2, do not apply advanced tier price.

  • 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

 

  • Enable Sorting: Yes to allow sorting by click to the tittle of the collumn on the front end. No to deny.
  • 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.
  • Sorting the Wholesale Display table: by clicking on the attribute of the table.Sorting-the-Wholesale-Display-table
  • Enable/disable the Wholesale Display table per Product: in the product edit page, scroll down to CPWD General. Choose Yes to enable the table and No to disable the display.

CPWD general

Enable Wholesale Display: On/off showing the wholesale table display at the  frontend of the config product.
Use Ajax Load for Wholesale Display: The default is set at Use config, which will apply the config for Ajax Load that you set above. In addition, you can use yes/no to on/off using the Ajax load for the config product. 

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

If you want more information about Configurable Products, check it out:

3. API Support

3.1 RESTful API

Check this sheet to see all the API heads we provide: https://docs.google.com/spreadsheets/d/1nbuKS4myTJAzbKqMizmN8Xyug_ioXyBPJ6MfwpAYfX0/edit#gid=384562771

3.2 GraphQL API

We also provide a handful of GraphQL APIs for you to use and wonder. See more here:

https://docs.google.com/spreadsheets/d/1nbuKS4myTJAzbKqMizmN8Xyug_ioXyBPJ6MfwpAYfX0/edit#gid=2031363831

Was this article helpful to you? Yes No

How can we help?