The Multi-Child Add to Cart feature enables you to display a grid containing all variants of a product (child products) on a single page so customers can quickly select the variants and quantities of the product they want to purchase.

This article concentrates on how to set the order child products are displayed in the grid.

Ordering the Contents of the Multi-Child Add to Cart Grid

By default, the child products listed in a Multi-Child Add to Cart grid are listed in alphabetical order, based on the product name. For example, child products with the product name, "Polo Shirt - Green" will appear within the Multi-Child Add to Cart grid before the product named, "Polo Shirt - Red".

While you can't specify the order of these products within the Multi-Child Add to Cart grid, you can modify the product names to display them in any order you wish.

Modifying Child Product Names

This technique involves adding a brief HTML comment at the beginning of each product name. You can do this by editing the Product Name field within each product's settings page.

In this case, you'll be adding an HTML comment containing a numeric value. If preceded with an exclamation mark, this code is not displayed to the customer. The Multi-Child Add to Cart grid will order each child product alphabetically or numerically based on all of the characters it detects in the Product Name field - even characters that will not be visible to customers on the storefront.

You can add <!010>, <!020>, <!030>, etc. to the beginning of each child product's name to display the products in the order you wish.

The quickest way to modify child products is to use the Search function to display all the child products in the table view. You can then hover over the Product Name column and click Edit to open the column for editing.

This enables you to directly edit the Product Name field without having to go into each product page.

Example

In this example, you have 5 child products being displayed in a Multi-Child Add to Cart grid:

Product Code: 400-B
Product Name: Blue Shirt 

Product Code: 400-G
Product Name: Green Shirt

Product Code: 400-P
Product Name: Purple Shirt

Product Code: 400-R
Product Name: Red Shirt

Product Code: 400-Y
Product Name: Yellow Shirt

To display the products listed above with Red Shirt first, followed by Blue, Yellow, Green, and Purple, add <!010>, <!020>, <!030>, etc. to each product name in order.

Product Code: 400-R
Product Name: <!010> Red Shirt

Product Code: 400-B
Product Name: <!020> Blue Shirt

Product Code: 400-Y
Product Name: <!030> Yellow Shirt

Product Code: 400-G
Product Name: <!040> Green Shirt

Product Code: 400-P
Product Name: <!050> Purple Shirt

Did this answer your question?