0

I have been trying to move the swatches and can't get them to work inside of the addtocart.phtml. There must be an easier way.

0

Here is what I used to get the swatches after quantity and before the add to cart button. Not perfect, but working for me.

app/design/frontend/Custom/Theme/Magento_Catalog/templates/product/view/addtocart.phtml

// @codingStandardsIgnoreFile

/** @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><?= /* @escapeNotVerified */ __('Qty') ?></span></label>
            <div class="control">
                <input type="number"
                       name="qty"
                       id="qty"
                       value="<?= /* @escapeNotVerified */ $block->getProductDefaultQty() * 1 ?>"
                       title="<?= /* @escapeNotVerified */ __('Qty') ?>"
                       class="input-text qty"
                       data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       />
            </div>
        </div>
        <?php endif; ?>





    </div>
</div>
<?php endif; ?>
<?php if ($block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/product/view/validation": {
                "radioCheckboxClosest": ".nested"
            }
        }
    }
</script>
<?php else : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/js/validate-product": {}
        }
    }
</script>
<?php endif; ?>

app/design/frontend/Custom/Theme/Magento_Catalog/templates/product/view/addtocart-button.phtml

<div class="actions">
    <button type="submit"
            title="Add to cart"
            class="action primary tocart"
            id="product-addtocart-button">
        <span>Add to cart</span>
    </button>
</div>

app/design/frontend/Custom/Theme/Magento_Catalog/layout/catalog_product_view.xml

<container name="theme.product.addtocartbutton.only.container" htmlClass="addtocartbutton-only__outer" htmlTag="div">
     <container name="addtocartbutton.only" htmlClass="addtocartbutton-only" htmlTag="div">
             <block class="Custom\Catalog\Block\Product\SingleProduct" name="theme.product.addtocartbutton.only" template="Magento_Catalog::product/view/addtocart-button.phtml" />
     </container>
 </container>

<move element="product.info.options.swatches" destination="product.info.form.options" before="theme.product.addtocartbutton.only.container"/>
<move element="theme.product.addtocartbutton.only.container" destination="product.info.form.options" after="-"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.