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
to
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
Hope above will help!