1

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!

0

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!

  • Great, You can accept and Up-vote the Answer :) – Pawan Oct 7 '18 at 5:33
  • Welcome Andrew :) – Pawan Oct 10 '18 at 14:47
  • Hi @Pawan, do you know how to Relink the "Add To Cart" button in the product list page (need to change code in the file list.phtml)? In my magento server, the list.phtml file is located in the theme directory. I'm using magento 2.2.6: /public_html/app/design/frontend/Hiddentechies/pixtron/Magento_Catalog/templates/product/list.phtml I can change the button text from "Add To Cart" to "Find Out More", but can not relink it. Thank you !! – Andrew Luong Nov 4 '18 at 11:53
0

You can change it in file: vendor\magento\module-catalog\view\frontend\templates\product\view\addtocart.phtml

But you should copy this file to your custom theme and edit it, because if you edit in this file, you can lost it when you upgrade your magento version.

  • Hi @David Duong, do you know how to Change text and Relink the "Add To Cart" button in the product list page (need to change code in the file list.phtml)? Thank you!!! – Andrew Luong Nov 4 '18 at 11:57
  • You can turn on path hint to find file need edit. If you don't know how to turn it on, you can read: a-zthemes.com/blog/how_enable_path_hints_magento2 – David Duong Nov 5 '18 at 17:05

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.