Magento2 – Change Add to Cart Template on Product View

addtocartlayoutmagento2

I am using a slightly modified Luma theme and want to differ the text on the Add to cart button for product pages only. For this I have created another addtocart.phtml called addtocartmain.phtml which I want to use as the template for add to cart block for product pages. I have then attempted to override the default template using the below code within vendor/theme/Magento_Catalog/layout/catalog_product_view.xml to the body node.

<referenceBlock name="product.info.addtocart">
        <action method='setTemplate'>
            <argument name="template" xsi:type="string">Magento_Catalog::product/view/addtocartmain.phtml</argument>
        </action>
</referenceBlock>

The addtocartmain.phtml is located within:

'vendor/theme/Magento_Catalog/templates/product/view'

After hours or attempting multiple methods of changing the template this is not changing the add to cart button. What could be stopping this from working? I can change the referenceBlock to any other block name and override them just fine with my new template. I have even removed all modules, removed everything but this one modification and tried making these modifications within the core vendor files and still this block is not changing.

Best Answer

After tinkering around for a while I noticed that there was another block that was using the addtocart.phtml in the core:

'product.info.addtocart.additional'

Overriding this block and the original 'product.info.addtocart' block was they key to switching out my add to cart button with a new button on all pages. Add the below code to catalog_product_view.xml within the body node as suggested by thaddeusmt and Ben Crook.

<referenceBlock name="product.info.addtocart" template="Magento_Catalog::product/view/addtocartmain.phtml" />
<referenceBlock name="product.info.addtocart.additional" template="Magento_Catalog::product/view/addtocartmain.phtml" />

Related Solutions

Magento – Dropdown for add to cart qty in Magento 2

Replace addtocart.phtml with below code,

File PATH: app/design/frontend/{Vendor}/{themename}/Magento_Catalog/templates/product/view/addtocart.phtml

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

// @codingStandardsIgnoreFile

/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()): ?>
<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()): ?>
        <div class="field qty">
            <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>               
            <select name="qty" id="qty" title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" 
                   class="input-text qty" data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>">
                   <?php $i = 1 ; ?>
                    <?php 
                     while( $i < 5) { ?>
                        <option value="<?php echo $block->getProductDefaultQty() * $i; ?>"><?php echo $block->getProductDefaultQty() * $i; ?></option>
                        <?php $i++; ?>
                     <?php } ?>
            </select>

        </div>
        <?php endif; ?>
        <div class="actions">
            <button type="submit"
                    title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
                    class="action primary tocart"
                    id="product-addtocart-button">
                <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
            </button>
            <?php echo $block->getChildHtml('', true) ?>
        </div>
    </div>
</div>
<?php endif; ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/product/view/validation": {
                "radioCheckboxClosest": ".nested"
            }
        }
    }
</script>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "catalogAddToCart": {
                "bindSubmit": true
            }
        }
    }
</script>
<?php endif; ?>

Magento 2.2.6 – Changing ‘Add To Cart’ Button Text and Relink

Approach:

Copy below file from

{MagentoRoot}/vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml

{MagentoRoot}/app/design/frontend/[Package]/[theme]/Magento_Catalog/templates/product/view/addtocart.phtml

We will get attribute value in addtocart.phtml and if value exist, we will prevent default Add to cart and redirect to link based on attribute value.

Add below code at the end of addtocart.phtml

<script type="text/javascript">
    require(['jquery', 'jquery/ui'], function($){
      jQuery(document).ready( function() {
        jQuery("#product-addtocart-button").click(function(event){
                var link = '<?php echo $_product->getGetLink(); ?>';
                if(link){
                    event.preventDefault();
                    window.location.href = link;
                }
        });
      });
    });
</script>

Do not modify in core file, Override addtocart.phtm in your theme

Hope above will help!

Best Answer

Related Solutions

Magento – Dropdown for add to cart qty in Magento 2

Magento 2.2.6 – Changing ‘Add To Cart’ Button Text and Relink

Related Topic