0

I am trying to change product swatches container and putting it in detailed info tabs.But it move whole option block.How to move only swatches.Table is a watches image.

<move element="product.info.options.swatches" destination="full.area.tabs" before="-"/>

enter image description here

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

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

<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="-"/>

Hope it works for you..!!

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.