How to move Wish List next to Qty input box in product detail page?

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

15-04-2021
|

Question

I want to move ADD TO WISH LIST next to QTY Input box in product details page. Guide me how to achieve this

Solution

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:

OTHER TIPS

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>
...

Licensed under: CC-BY-SA with attribution

Not affiliated with magento.stackexchange