I want to add button in PDP page which would redirect to the desired location. But it does not capture the size and other customize attributes.

Can anybody help me?

How to add a custom button to Magento 2 product page


<div class="actions">
            <button type="submit"
                    title="<?= /* @escapeNotVerified */ $buttonTitle ?>"
                    class="action default tocart"
                <span><?= /* @escapeNotVerified */ $buttonTitle ?></span>
            <?= $block->getChildHtml('', true) ?>
            <?php /*if($cusdesignLink):?>
              <a href="<?php echo $cusdesignLink; ?>"><?php echo __('Customize Your Design'); ?></a>
            <?php endif */ ?>
            <a href="<?php echo $this->getUrl($cusdesignLink); ?>" title="<?php /* @escapeNotVerified */ echo __($buttonTitle) ?>" id="custom" target="_blank" class="action primary">
                <span><?php /* @escapeNotVerified */ echo __($custombuttonTitle) ?></span>


Creation of button Method 2 where it works as Add to cart and does not replace Form action View/frontend/web/js/custom.js

    ], function ($) {
        "use strict";
        return function (config, element) {
            $(element).click(function () {
                var form = $(config.form);
              var baseUrl = form.attr('action'),
                 buyNowUrl = baseUrl.replace('checkout/cart/add', 'custom/index/index');
              form.attr('action', 'custom/index/index');
                return false;


<?php $addtocartId = "Test"; ?>
<?php $buttonTitle = "Test"; ?>
<?php $formId = $addtocartId ? $addtocartId : "product_addtocart_form"; ?>
<div class="custom-button">
    <button type="submit" title="<?php /* @escapeNotVerified */ echo __($buttonTitle) ?>" id="custom" class="action primary" data-mage-init='
        "Maan_Custom/js/custom": {
            "form": "#<?php echo $formId; ?>"
        <span><?php /* @escapeNotVerified */ echo __($buttonTitle) ?></span>

Actually I have not created button i have added link to display it as a button and have passed link via helper. Had got code for creating button but it does not replace form action instead it gets added to "Add to cart" section enter image description here


Create two custom product attribute, one for multi-select options with two option(Add to Cart, External Link) and other one is textbox. Based on the selection display the external URL textbox.

In frontend, Edit the


Get the custom attribute values and display the button based on the conditions

    $ctaButtonsArr = $_product->getCtaButtons();
    $ctaButtons = explode(",",$ctaButtonsArr);
    $externalLink = $_product->getExternalLink();
    // 1 is Addto cart
    // 2 is External link
    if(in_array(2,$ctaButtons) && $externalLink != ''): ?>
            <a href="<?php echo $externalLink;?>" target="_blank"><?= __('View'); ?></a>
      //addto cart default function here..

  • now if someone selects medium and green color will its custom attributes get captured on external links? – insoftservice Aug 26 at 14:53
  • Yes,the values from configurable product. If you need change the url based on the selected attributes, call the ajax on attribute selection and replace the button based on response. – Rat Aug 27 at 7:10
  • thx for your comments do you have any links for the same. – insoftservice Aug 27 at 9:08
  • Add the custom js below line of code $('[name=product]').change(function(){ $.ajax({ url:CallBackURL, type:"POST", data:{'product_id':$('[name=product]').val()}, success:function(data){ //your code } }); }); – Rat Aug 27 at 13:29
  • its configurable product. So we receive product id of the configurable product by the above method – insoftservice Aug 28 at 12:13

For a start, you should work with Configurable Products.

Check the XML for them and look into the correct templates. See if you are truly locating the file under the block and template that you need them.

Call a new JS to override event default and call your own add to cart function. Otherwise, you need to know what you are doing with the default add to cart from Magento and add all the respective checks that Magento does by default, so you need to read the whole phtml template structure beforehand.

My recommendation would be: Read more before starting deep modifications. https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html


Be careful of what changes you create under add to cart functionality, if you send the wrong data, can trigger other issues later on the cart.

Good luck and Happy Coding!

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.