Hide the Qty Box in bundle product

Question

I'm trying to find how to remove the qty box on the individual product options in bundles.

User doesn't have permission to edit the qty in these box and I want to remove them for a cleaner look.

Thanks!

Answer 1

You should not remove these forms from template instead hide these qty boxes using simple css, because these fields are in different element templates and you have to comment out in all files but for your ease and understanding i am putting down both methods :

Method 1 CSS :

using css just add this in your css / less file :

.bundle-options-container .nested .field.qty:last-child
{
    display : none;
}

Method 2 Changing in template(s) :

copy catalog/product/view/type/bundle/option/ folder from (/vendor/magento/module-bundle/view/frontend/templates/) and paste in your theme's Magento_Bundle/templates folder. there you can comment out qty box field html in all related element html file.

like in radio.phtml file comment this block :

<div class="field qty qty-holder">
            <label class="label" for="bundle-option-<?= /* @escapeNotVerified */ $_option->getId() ?>-qty-input">
                <span><?= /* @escapeNotVerified */ __('Quantity') ?></span>
            </label>
            <div class="control">
                <input <?php if (!$_canChangeQty) echo ' disabled="disabled"' ?>
                       id="bundle-option-<?= /* @escapeNotVerified */ $_option->getId() ?>-qty-input"
                       class="input-text qty<?php if (!$_canChangeQty) echo ' qty-disabled' ?>"
                       type="number"
                       name="bundle_option_qty[<?= /* @escapeNotVerified */ $_option->getId() ?>]"
                       data-selector="bundle_option_qty[<?= /* @escapeNotVerified */ $_option->getId() ?>]"
                       value="<?= /* @escapeNotVerified */ $_defaultQty ?>"/>
            </div>
      </div>

So if you compare both methods , i would suggest css method since it is easier.

NOTE : after making any front end changes deployment deploy your static content ( php bin/magento setup:static-content deploy -f ) and clear cache ( php bin/magento cache:flush )

Answer 2

I just encountered a similar issue and thanks to @Naveed Asim's answer I managed to follow his approach and create an exercise for my own.

I was able to hide the Quantity field for Select Option when the quantity predefined from Admin Disabled.

Here are the steps I did on (V2.2.9):

1- Locate the file (based on your requirements, also see checkbox.phtml, multi.phtml, radio.phtml files as well):

/vendor/magento/module-bundle/view/frontend/templates/catalog/product/view/type/bundle/option/select.phtml

2- Copy the file and place it in your theme path under the following directory (create the directory if it doesn't exist)

/app/design/frontend/VENDOR/THEME/Magento_Bundle/templates/catalog/product/view/type/bundle/option/select.phtml

3- In the second part of the file wrap <div class="nested"> which contains the Qty field in a an if statement to only show it if the _canChangeQty is true at line 51.

    <?php if ($_canChangeQty): ?>

 <div class="nested">
                <div class="field qty qty-holder">
                    <label class="label" for="bundle-option-<?= /* @escapeNotVerified */ $_option->getId() ?>-qty-input">
                        <span><?= /* @escapeNotVerified */ __('Quantity') ?></span>
                    </label>
                    <div class="control">
                        <input <?php if (!$_canChangeQty) echo ' disabled="disabled"' ?>
                            id="bundle-option-<?= /* @escapeNotVerified */ $_option->getId() ?>-qty-input"
                            class="input-text qty<?php if (!$_canChangeQty) echo ' qty-disabled' ?>"
                            type="number"
                            name="bundle_option_qty[<?= /* @escapeNotVerified */ $_option->getId() ?>]"
                            data-selector="bundle_option_qty[<?= /* @escapeNotVerified */ $_option->getId() ?>]"
                            value="<?= /* @escapeNotVerified */ $_defaultQty ?>"/>
                    </div>
                </div>
            </div>

<?php endif; ?>

Then run your stuff:

php bin/magento cache:flush

And if on Production Mode, then most likely will need to compile and/or deploy.