buy multiple sizes and quantities on single product page

nb782
Shopify Partner
19 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

Replies 6 (6)

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

nb782
Shopify Partner
19 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?

dmwwebartisan
Shopify Partner
12282 2546 3694

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 | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
nb782
Shopify Partner
19 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>

JoshMaher
Excursionist
14 0 5

Hey, did you ever find a solution for this?

Jahangir
Shopify Partner
96 2 16

Hello @JoshMaher and @nb782,
Have you found any solution yet? If not, you can check out the MultiVariants - Bulk Order app to display all the variants with a quantity box and allow bulk add to cart for all selected variants.

Here is the demo you can take a look at.

You can do this by using the FREE plan of the app.

MultiVariants to allow buy multiple sizes and quantities on single product pageMultiVariants to allow buy multiple sizes and quantities on single product page

 

Jahangir | EFOLI
- Was my reply helpful? Please Like and Accept Solution!
- Selling Personalized Products? Try Inkybay | For bulk variant order, check MultiVariants