buy multiple sizes and quantities on single product page

Highlighted
Shopify Partner
15 0 0

In a store that sells t-shirts ( for example). On a product page for a white t-shirt I would like to list all the sizes and have quantity boxes next to each size. A user would then be able to select 2 x small, 10 x medium , 3 x large, 25 x X Large click the add to basket button once to add them to their basket. This would avoid the user having to select a quantity of small and add to basket, select a quantity of mediums and then add to basket etc....

Do not want to use an app for this

Any advice on this would be greatly appreciated….

Regards

0 Likes
Highlighted
Astronaut
1082 177 213

Hello,

What you need is to setup variants. Kindly take a look at the documentation for detailed and complete information: https://help.shopify.com/en/manual/products/variants/add-variants

Thank you

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Partner
15 0 0

Thanks

I think that how i described is very clear.

My product has all the variants set up so currently you can slect your size from a drop down and click to buy the size.

I would like to have each size listed on the product page seperatley so you can add a quantity next to each size and click buy and it will add everything to your basket

 

Not sure if that is clearer?

0 Likes
Highlighted
Shopify Partner
2229 483 626

Hey @nb782,

It seems that this is your custom requirements. If you do not want to use the app then I would suggest you to hire Shopify expert for the customization.

The expert will do as per your need.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
15 0 0

I have got the following which is listing all the variants seperatley and putting a quantity box next to each one. Everything is working fine apart from when I click add to cart only the first quantity ( i.e. small ) is added to the cart. any help greatly appreciated.

 

<form action="/cart/add" method="post" id="product-form-{{ variant.id }}">

<table class="desktop-12 tablet-6 mobile-3">
<thead>
<tr>
<th>Size / Item Code</th>
<th>Price</th>
<th style="text-align: center;">Qty</th>
</tr>
</thead>
<tbody>
{% for variant in product.variants%}
<tr>
<td>
<p> <input type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" />{{ variant.title | escape }} </p>
</td>
<td>
<p>{{ variant.price | money }}{% if variant.compare_at_price > variant.price %}<br /><del>{{ variant.compare_at_price | money }}</del>{% endif %}</p>
</td>
<td>
{% if product.available %}

<a class="down" field="quantity"><i class="icon-minus"></i></a>
<input min="1" type="text" id="{{variant.id }}" name="quantity" class="quantity" value="0" />
<a class="up" field="quantity"><i class="icon-plus"></i></a>

{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>

any help greatly appreciated.
{% if product.available %}
<input type="submit" name="button" class="add" value="Add to Cart"/>
<p class="add-to-cart-msg"></p>
{% endif %}

</form>

0 Likes