I want to move ADD TO WISH LIST next to QTY Input box in product details page. Guide me how to achieve this
2 Answers
To move the element next to the input box you have to create these files in your local theme:
app/design/frontend/Custom/default/Magento_Wishlist/layout/catalog_product_view.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="view.addto.wishlist" remove="true"/>
<referenceBlock name="product.info.addtocart">
<block class="Magento\Wishlist\Block\Catalog\Product\View\AddTo\Wishlist" name="add-to-wishlist" template="Magento_Wishlist::catalog/product/view/addto/wishlist.phtml"/>
</referenceBlock>
</body>
</page>
app/design/frontend/Custom/default/Magento_Catalog/templates/product/view/addtocart.phtml
<?php
/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()) :?>
<div class="box-tocart">
<div class="fieldset">
<?php if ($block->shouldRenderQuantity()) :?>
<div class="field qty">
<label class="label" for="qty"><span><?= $block->escapeHtml(__('Qty')) ?></span></label>
<div class="control">
<input type="number"
name="qty"
id="qty"
min="0"
value="<?= $block->getProductDefaultQty() * 1 ?>"
title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
class="input-text qty"
data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
/>
<span class="product-social-links">
<span clas="product-addto-links" data-role="add-to-links">
<?= $block->getBlockHtml('add-to-wishlist') ?>
</span>
</span>
</div>
</div>
<?php endif; ?>
<div class="actions">
<button type="submit"
title="<?= $block->escapeHtmlAttr($buttonTitle) ?>"
class="action primary tocart"
id="product-addtocart-button" disabled>
<span><?= $block->escapeHtml($buttonTitle) ?></span>
</button>
<?= $block->getChildHtml('', true) ?>
</div>
</div>
</div>
<?php endif; ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"Magento_Catalog/js/validate-product": {}
}
}
</script>
The wishlist block will then appear next to the input field in the dom. You will have to use css for the finishing touch:
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>
...
