How to create and display product variation in the marketplace website


I am building a non-profit sustainable marketplace, where farmers or sustainable product owners can sell their products on this website. Currently, I am struggle with “how to display product attributes and the difference price for every product variation”

Here are the steps that seller will follow:

Step 1: Seller create variable product

Step 2: Add product attributes (such as size and color), add attribute value (size S, M, White, Black,…)

Step 3: Generate variations, so that each one has a unique SKU number and “the price”.

The product page will display (as the following screenshot). When customers click on color and size, it will show “the price”

In the database, I set up as the following:

Attribute Value {name} (white, black, S, M}

Attribute { name; attribute value(s)} (Color: white, black; Size: S, M)

Product variation {Name, Price, Image, attribute vale(s)} (T-shirt size S, white = price: 30$; and T-shirt size M white= price 45$ and so on)

Product {product variation(s), attribute(s)}

The database look okie, but when it is come to display on “the product page” I can not figure out how to display and set up like the screenshot:

  • Display all the attribute name and its attribute value

  • When customers choose size, color; it will appear “the price”

1 Like

Hi, did you ever figure it out ?