Magento 2.2.5 change 'Add To Cart' button to 'View Product' at category page

Question

Is it possible to change the 'Add To Cart' button to 'View Product' at the category pages? I have for almost every product some attributes, so it's weird for my visitors to click on "Add To Cart" but than go the the product with an alert that they have to choose the size and color..

Hope somebody can help me out!

Answer 1

First you have to do this changes at your theme level.

Goto

app/design/frontend/{ThemeVendorname}/{ThemeName}/Magento_Catalog/templates/product/

And open list.phtml and delete the code:

<form data-role="tocart-form" data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>" action="<?= /* @NoEscape */ $postParams['action'] ?>" method="post">
    <input type="hidden" name="product" value="<?= /* @escapeNotVerified */ $postParams['data']['product'] ?>">
    <input type="hidden" name="<?= /* @escapeNotVerified */ Action::PARAM_NAME_URL_ENCODED ?>" value="<?= /* @escapeNotVerified */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
    <?= $block->getBlockHtml('formkey') ?>
    <button type="submit"
        title="<?= $block->escapeHtml(__('Add to Cart')) ?>"
        class="action tocart primary">
    <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
    </button>
</form>

And put this code

<div class="stock available">
<a class="product-item-link" href="<?= /* @escapeNotVerified */ $_product->getProductUrl() ?>">
    <span><?= /* @escapeNotVerified */ __('View Product') ?></span>
</a>
</div>

Answer 2

In addition to the solution of Amit above, this is only for the category page. To change it on the homepage i did the following too:

Goto

app/design/frontend/{ThemeVendorname}/{Themename}/{ThemeVendorname}_ProductWidget/templates/product/widget/content/list.phtml

Somewere in line 173 you see this code:

<button data-mage-init='{"redirectUrl":{"url":"<?php /* @escapeNotVerified */ echo $block->getAddToCartUrl($_item) ?>"}}'
                 type="button"
                 title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
                 class="action tocart btn btn-default btn-cart">
                <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
               </button>

Change this code with

<a href="<?php /* @escapeNotVerified */ echo $_item->getProductUrl() ?>" title="<?php echo __('View Product') ?>" class="btn btn-default"><?php echo __('View Product') ?></a>

Go to line 184 and see this code

<button data-post='<?php /* @escapeNotVerified */ echo $postData; ?>'
                 type="button"
                 title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
                 class="action tocart btn btn-default btn-cart">
                <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
               </button>

And change also this code with

<a href="<?php /* @escapeNotVerified */ echo $_item->getProductUrl() ?>" title="<?php echo __('View Product') ?>" class="btn btn-default"><?php echo __('View Product') ?></a>

Maybe you have to style the generated URL with CSS. Hope it helped somebody else too!