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

addtocartmagento2.2.6

Change "Add To Cart" button text to "Find Out More" and relink in Magento 2.2.6

Hello everyone! Does anyone know how to change 'Add To Cart' button text and relink the button?
I followed these 2 guides to change the code in the file addtocart.phtml and list.phtml:
https://community.magento.com/t5/Magento-1-x-Admin-Configuration/Changing-Add-to-cart-button-text-and-relink/td-p/11658

https://www.tigren.com/change-add-cart-button-text-magento/

But they're the guide for Magento 1.9. The curent version is Magento 2.2.6 and the code is different, I can change the button text,
but can not relink it. To relink the button, I created an atrribute 'get_link' for the product to get the external URL from user's input, but it did not work.

This is the original code in the file addtocart.phtml within my theme:

<?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>
            <div class="control">

                <input type="number"
                       name="qty"
                       id="qty"
                       maxlength="12"
                       value="<?php /* @escapeNotVerified */ echo $block->getProductDefaultQty() * 1 ?>"
                       title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="qty-default input-text qty"
                       data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       />
                <span class="qty-main">
                    <span class="qty-btn qty-inc"><i class="fa fa-plus" aria-hidden="true"></i></span>
                    <span class="qty-btn qty-dec"><i class="fa fa-minus" aria-hidden="true"></i></span>
                </span>
                <script type="text/javascript">
                    require(['jquery'], function(){
                        jQuery(document).ready(function(){
                            jQuery('.qty-inc').click(function () {
                                jQuery('.qty-default').val(Number(jQuery('.qty-default').val())+1);
                            });

                            jQuery('.qty-dec').click(function () {
                                    var value = Number(jQuery('.qty-default').val())-1;
                                    if(value > 0){
                                        jQuery('.qty-default').val(value);
                                    }

                            });
                        });
                    });
                </script>
            </div>
        </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": false
            }
        }
    }
</script>
<?php endif; ?>

Or, if you know where I can find information for this problem?
Hope you will help me with this.
Thank a lot!

Best Answer

Approach:

Copy below file from

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

to

{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!

Related Topic