Magento 2: Add custom button in Product Detail Page

Question

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

View/frontend/templates/catalog/product/view/addtocart.phtml

<div class="actions">
            <button type="submit"
                    title="<?= /* @escapeNotVerified */ $buttonTitle ?>"
                    class="action default tocart"
                    id="product-addtocart-button">
                <span><?= /* @escapeNotVerified */ $buttonTitle ?></span>
            </button>       
            <?= $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>
            </a>

        </div>

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

define([
        'jquery'
    ], 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;
            });
        }
    });

view/frontend/templates/custom.phtml

<?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>
    </button>
</div>

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

Answer 1

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

Magento_Catalog/templates/product/view/addtocart.phtml.

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

<?php 
    $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>
        <?php
    endif;
    if(in_array(1,$ctaButtons):
      //addto cart default function here..
    endif;

?>

Answer 2

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

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/templates/template-walkthrough.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!