1

How can i add new button on magento 2 product page above add to cart button (as shown in the attached picture)

agento2

  • You want to display that button after price, Am I Right ? – Kishan Savaliya Oct 17 '19 at 15:14
  • @KishanSavaliya Yes after the price – Dev Space Oct 17 '19 at 15:16
  • Okay. Sending you solution after few mins – Kishan Savaliya Oct 17 '19 at 15:16
  • oky Thanks kishan for helping me with the magento 2 – Dev Space Oct 17 '19 at 15:18
0

You need to create two files for that

first you need to add catalog_product_view.xml file here in this path in your theme

app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_product_view.xml

Content for this file is ..

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Catalog\Block\Product\View" name="product.info.custombutton" template="Magento_Catalog::product/view/custombutton.phtml"/>
        </referenceContainer>
        <move element="product.info.custombutton" destination="product.info.main" after="product.info.price" />
    </body>
</page>
  • After adding above xml file you need to create one template file here..

app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/view/custombutton.phtml

Content for this file is ..

<?php echo "Custom Button here.."; ?>

You can change content based on your requirement.

Output :

enter image description here

Hope this answer will help you and you achieve your requirement then accept the answer . :)

| improve this answer | |
  • Kishan is there any specific way to design a button or simple can we user <button> tag as html way – Dev Space Oct 17 '19 at 15:57
  • You can use <button> tag there. – Kishan Savaliya Oct 17 '19 at 15:58
  • I didn't have time yet to try that. asap i let u know – Dev Space Oct 21 '19 at 16:30
0

app/design/frontend/[Package]/[Theme]/Magento_Catalog/templates/product/view/form.phtml

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

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis

/**
 * Product view template
 *
 * @var $block \Magento\Catalog\Block\Product\View
 */
?>
<?php $_helper = $this->helper(Magento\Catalog\Helper\Output::class); ?>
<?php $_product = $block->getProduct(); ?>
<button title="Add to Cart" class="custom-button">
    <span>Custom Button</span>
</button>
<div class="product-add-form">
    <form data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>"
          action="<?= $block->escapeUrl($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="<?= (int)$_product->getId() ?>" />
        <input type="hidden" name="selected_configurable_option" value="" />
        <input type="hidden" name="related_product" id="related-products-field" value="" />
        <input type="hidden" name="item"  value="<?= (int)$block->getRequest()->getParam('id') ?>" />
        <?= $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') ?>
    </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': <?= /* @noEscape */ $block->getJsonConfig() ?>});
    });
</script>

enter image description here

| improve this answer | |
  • you achieve your requirement add button. ? – Ranjeet Kumar Oct 17 '19 at 17:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.