cancel
Showing results for 
Search instead for 
Did you mean: 

Magento 2. Add simple checkbox on product page

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Magento 2. Add simple checkbox on product page

Good morning. 

 

I need to add custom checkbox on Product page, like a custom field. This checkbox will be displayed on product page. 

 

I've googled some time, but didn't find needed functionality or similar code. 

 

Thanks for any help. 

1 REPLY 1

Re: Magento 2. Add simple checkbox on product page

Hi @denisnagorny 

 

Overwrite vendor/magento/module-catalog/view/frontend/templates/product/view/form.phtml then add checkbox here.

<input type="checkbox" value="1" name="custom_checkbox"> <?= __('My Checkbox')?>

Now template looks like

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * Product view template
 *
 * @var $block \Magento\Catalog\Block\Product\View
 */
?>
<?php $_helper = $this->helper('Magento\Catalog\Helper\Output'); ?>
<?php $_product = $block->getProduct(); ?>

<div class="product-add-form">
    <form data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>"
          action="<?= /* @NoEscape */ $block->getSubmitUrl($_product) ?>" method="post"
          id="product_addtocart_form"<?php if ($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
        <input type="hidden" name="product" value="<?= /* @escapeNotVerified */ $_product->getId() ?>" />
        <input type="hidden" name="selected_configurable_option" value="" />
        <input type="hidden" name="related_product" id="related-products-field" value="" />
        <?= $block->getBlockHtml('formkey') ?>
        <?= $block->getChildHtml('form_top') ?>
        <?php if (!$block->hasOptions()):?>
            <?= $block->getChildHtml('product_info_form_content') ?>
        <?php else:?>
            <?php if ($_product->isSaleable() && $block->getOptionsContainer() == 'container1'):?>
                <?= $block->getChildChildHtml('options_container') ?>
            <?php endif;?>
        <?php endif; ?>

        <?php if ($_product->isSaleable() && $block->hasOptions() && $block->getOptionsContainer() == 'container2'):?>
            <?= $block->getChildChildHtml('options_container') ?>
        <?php endif;?>
        <?= $block->getChildHtml('form_bottom') ?>
        <input type="checkbox" value="1" name="custom_checkbox"> <?= __('My Checkbox')?>
    </form>
</div>
<script>
    require([
        'jquery',
        'priceBox'
    ], function($){
        var dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($_product->getId()) ?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

        priceBoxes = priceBoxes.filter(function(index, elem){
            return !$(elem).find('.price-from').length;
        });

        priceBoxes.priceBox({'priceConfig': <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>});
    });
</script>

 

-----
If Issue Solved, Click Kudos and Accept As solutions.
Sohel Rana, 7x Magento 2, 2x Magento 1 Certified