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!

• Amit Bera: You have using configurable product?
• Kees Janssen: @AmitBera Yes. Configurable and simple products!

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>

• Kees Janssen: You're brilliant! It worked for me :-) Thank you very much. Do you also maybe know the following issue: magento.stackexchange.com/questions/237178/…
• Tirth Patel: How to do same thing for only custom option available products

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!