The product price displays the price of the product, with or without discount and with or without taxes.

Tier pricing allows for offering a quantity discount from a product page in the storefront.

<aside> ℹ️ Usually, styling this element takes from-to: 4-6h

</aside>

Where this element can be seen?

A product price is a common element for the e-commerce site. It can be found on the following elements:

• Product page
• Cart item list
• Product list

A tier price can be set optionally by a merchant and, by default, can be found on the PDP.

How should this element be designed?

The product price should be displayed accounting for the following:

• Configurable product price
• Simple and virtual product price
• Simple and virtual product price + discount
• Bundle product price
• Product price may be displayed in multiple orientations
• Product price may be displayed on multiple scales
• If product price may be displayed in multiple orientations
• Product may also have tier prices.

Price without discount

Price with discount

Bundle product price

Configurable product price

Tier prices

How the design may look like?

Design Example 1

Design Example 2

Design Example 3

Issues with the design

• Not mentioned if prices for configurable or bundle products are different, with a label or not.
• Tier Price excluding taxes may be calculated incorrectly.

How to develop styles for this element?

The ProductPrice component is responsible for rendering of product price.

The TierPrices component is responsible for rendering tier prices.

// TODO: Add info about price utility overrides

Notes to take into consideration during development:

• Quantity range for Tier Prices, may not be supported by the BE

  

• Discount is not shown for cart items

  By default in the cart, the discount is not shown for cart items but it is a frequently requested feature in the designs, example of custom implementation can be seen here

  Example of custom implementation

• Different components for PDP, PLP, and Cart items

  For Product Cards on PLP and PDP price for the product is rendered in ProductPrice component. It consists of old price, actual price, schema, and sub-price.

  • ProductPrice.component.js render method "scandipwa": 5.0.7:

  For cart items on the cart page, mini-cart and in the checkout price is rendered in CartItemPrice component. It consists of sub-price and actual price.

  • CartItemPrice.component.js render method "scandipwa": 5.0.7:

  <aside> ➡️ There is no support for a discounted price in CartItemPrice component, however, it is frequently requested in the designs.

  </aside>

Note that the label which is used in the ProductActions depending on the designs should be removed.

Note that font size for the price should be dynamic.

Implementation example #1

Implementation example #2

Implementation example #3