How to Add Quantity Dropdown in Magento 2 Product and Cart Pages?
In an e-commerce store, providing customers with an intuitive way to select quantities of products is crucial. Magento 2 offers a robust platform for online stores, and customizing the quantity input from a simple text field to a dropdown can enhance the user experience. In this tutorial, we'll walk through the steps to add a quantity dropdown on both the product page and cart page in Magento 2.
Adding Quantity Dropdown to Product Page in Magento 2
Step 1: Create a Custom Module
If you haven't already created a custom module for your Magento 2 store, this is the first step. You can name it something like Mageants_QuantityDropdown.
Step 2: Update catalog_product_view.xmlIn your custom module's Mageants/QuantityDropdown/view/frontend/layout directory, create or edit catalog_product_view.xml with the following content:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="checkout_cart_product_add_after">
<block class="Magento\Catalog\Block\Product\View" name="product.info.qty" template="Mageants_QuantityDropdown::product/view/qty_dropdown.phtml" before="-"/>
</referenceContainer>
</body>
</page>
|
Step 3: Create qty_dropdown.phtml TemplateNow, in your module's Mageants/QuantityDropdown/view/frontend/templates/product/view/ directory, create qty_dropdown.phtml with the following code:
<?php>
$_product = $block->getProduct();
?>
<div class="field qty">
<label class="label" for="qty"><span><?php /*@escapeNotVerified */ echo __('Qty') ?></span></label>
<div class="control">
<select id="qty" name="qty" class="input-text qty" data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>">
<?php for ($i = 1; $i <= 10; $i++): ?>
<option value="<?php echo $i ?>"><?php echo $i ?></option>
<?php endfor; ?>
</select>
</div>
</div>
|
Step 4: Clear Cache
After making these changes, be sure to clear the Magento cache by running:
php bin/magento cache:clean
Displaying Quantity Dropdown in Cart Page in Magento 2
Step 1: Create a Custom Module
|
In your custom module's Mageants/QuantityDropdown/view/frontend/layout directory, create or edit checkout_cart_item_renderers.xml with the following content:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.cart.item.renderers.default">
<arguments>
<argument name="template" xsi:type="string">Mageants_QuantityDropdown::cart/item/default.phtml</argument>
</arguments>
</referenceBlock>
</body>
</page>
|
Step 2: Create default.phtml TemplateNext, in your module's Mageants/QuantityDropdown/view/frontend/templates/cart/item/ directory, create default.phtml with the following code:
<?php>
$_item = $block->getItem();
?>
<div class="item-qty">
<label class="label" for="cart-qty-<?php echo $_item->getId() ?>">
<span><?php /* @escapeNotVerified */ echo __('Qty') ?></span>
</label>
<div class="control">
<select id="cart-qty-<?php echo $_item->getId() ?>" name="cart[<?php echo $_item->getId() ?>][qty]" data-cart-item-id="<?php echo $_item->getSku() ?>" class="qty">
<?php for ($i = 1; $i <= 10; $i++): ?>
<option value="<?php echo $i ?>" <?php echo ($_item->getQty() == $i) ? 'selected="selected"' : '' ?>><?php echo $i ?></option>
<?php endfor; ?>
</select>
</div>
</div>
|
Step 4: Clear Cache
Don't forget to clear the cache again:
php bin/magento cache:clean
Conclusion
By following these steps, you've successfully added a quantity dropdown to both the product and cart pages in Magento 2. This enhancement provides a more user-friendly way for customers to select the quantity of products they wish to purchase, improving their shopping experience on your Magento 2 store.
