Move “Add to Wishlist” Button after “Add to Cart” in Product View

https://magento.stackexchange.com/questions/239014

22-01-2021
|

Question

How to move "Add to wishlist" button after "Add to cart"?

I try using move but it's just working on the configurable products. I want it to work too on the simple products.

Check my catalog_product_view.xml :

...
  <move element="product.addto.wishlist" destination="product.info.addtocart.additional" />
...
  <container name="product.addto.wishlist" as="product_addto_wishlist" htmlClass="product wishlist" htmlTag="div">
      <block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="Magento_Catalog::product/view/addto.phtml"/>
  </container>
...

Add to Wishlist button is not showing on simple products.

Configurable Products :

Thanks.

Solution

I got solutions for my problem.

Just create catalog_product_view_type_simple.xml and use this code below:

...
   <referenceBlock name="product.info.addtocart">
        <block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="Magento_Catalog::product/view/addto.phtml"/>
   </referenceBlock>
...

OTHER TIPS

Just add below code to catalog_product_view.xml file for the simple and configurable product:

For Simple Product

<referenceBlock name="product.info.addtocart">
     <block class="Magento\Wishlist\Block\Catalog\Product\View\AddTo\Wishlist" name="view.addto.wishlist" template="Magento_Catalog::product/view/addto/wishlist.phtml" />
 </referenceBlock>

For Configurable Product

 <referenceBlock name="product.info.addtocart.additional">
     <block class="Magento\Wishlist\Block\Catalog\Product\View\AddTo\Wishlist" name="view.addto.wishlist.bottom" template="Magento_Catalog::product/view/addto/wishlist.phtml" />
 </referenceBlock>

It will look like:

Wishlist in simple product

Wishlist in Configurable Products