How to move “addtocart” button to the left side in category view?

Question

I'm pretty new to Magento2 and I'm trying to move elements inside category view.

I would move my add to cart button to the right of the screen in category view, and my quantity box too.

I've created the quantity box in the file :

/var/www/html/vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

by adding this to the form :

<input type="number" min="1" step="1" name="qty" id="qty"
style="width: 7em" maxlength="12"
value="<?php /* @escapeNotVerified */ echo '0' ?>"
title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty" />

I've tried to move an element in

catalog_category_view.xml

in

vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml

but nothing change...

Thanks in advance..!

Answer 1

Please add below code in list.phtml,

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
use Magento\Framework\App\Action\Action;

?>
<?php
// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis

/**
 * Product list template
 *
 * @var $block \Magento\Catalog\Block\Product\ListProduct
 */
?>
<?php
$_productCollection = $block->getLoadedProductCollection();
$_helper = $this->helper(Magento\Catalog\Helper\Output::class);
?>
<?php if (!$_productCollection->count()) :?>
    <div class="message info empty"><div><?= $block->escapeHtml(__('We can\'t find products matching the selection.')) ?></div></div>
<?php else :?>
    <?= $block->getToolbarHtml() ?>
    <?= $block->getAdditionalHtml() ?>
    <?php
    if ($block->getMode() == 'grid') {
        $viewMode = 'grid';
        $imageDisplayArea = 'category_page_grid';
        $showDescription = false;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
    } else {
        $viewMode = 'list';
        $imageDisplayArea = 'category_page_list';
        $showDescription = true;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
    }
    /**
     * Position for actions regarding image size changing in vde if needed
     */
    $pos = $block->getPositioned();
    ?>
    <div class="products wrapper <?= /* @noEscape */ $viewMode ?> products-<?= /* @noEscape */ $viewMode ?>">
        <ol class="products list items product-items">
            <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
            <?php foreach ($_productCollection as $_product) :?>
            <li class="item product product-item">
                <div class="product-item-info" data-container="product-<?= /* @noEscape */ $viewMode ?>">
                    <?php
                    $productImage = $block->getImage($_product, $imageDisplayArea);
                    if ($pos != null) {
                        $position = ' style="left:' . $productImage->getWidth() . 'px;'
                            . 'top:' . $productImage->getHeight() . 'px;"';
                    }
                    ?>
                    <?php // Product Image ?>
                    <a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
                       class="product photo product-item-photo"
                       tabindex="-1">
                        <?= $productImage->toHtml() ?>
                    </a>
                    <?php if($viewMode == 'list') { ?>
                    <div class="product details product-item-details">
                        <div style="float: right;margin-right: 300px;">
                            <div class="actions-primary"<?= strpos($pos, $viewMode . '-primary') ? $block->escapeHtmlAttr($position) : '' ?>>
                            <?php if ($_product->isSaleable()) :?>
                                <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                <form data-role="tocart-form"
                                      data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>"
                                      action="<?= $block->escapeUrl($postParams['action']) ?>"
                                      method="post">
                                    <input type="hidden"
                                           name="product"
                                           value="<?= /* @noEscape */ $postParams['data']['product'] ?>">
                                    <input type="hidden" name="<?= /* @noEscape */ Action::PARAM_NAME_URL_ENCODED ?>"
                                           value="<?= /* @noEscape */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
                                    <?= $block->getBlockHtml('formkey') ?>
                                    <div style="margin-bottom: 10px;">
                                        <input type="number" min="1" step="1" name="qty" id="qty"
                                            style="width: 7em" maxlength="12"
                                            value="<?php /* @escapeNotVerified */ echo '0' ?>"
                                            title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty" />
                                    </div>
                                    <button type="submit"
                                            title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>"
                                            class="action tocart primary">
                                        <span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
                                    </button>
                                </form>
                                <?php else :?>
                                    <?php if ($_product->isAvailable()) :?>
                                        <div class="stock available"><span><?= $block->escapeHtml(__('In stock')) ?></span></div>
                                    <?php else :?>
                                        <div class="stock unavailable"><span><?= $block->escapeHtml(__('Out of stock')) ?></span></div>
                                    <?php endif; ?>
                                <?php endif; ?>
                            </div>
                        </div>
                        <div>
                            <?php
                                $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                            ?>
                            <strong class="product name product-item-name">
                                <a class="product-item-link"
                                   href="<?= $block->escapeUrl($_product->getProductUrl()) ?>">
                                    <?= /* @noEscape */ $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
                                </a>
                            </strong>
                            <?= $block->getReviewsSummaryHtml($_product, $templateType) ?>
                            <?= /* @noEscape */ $block->getProductPrice($_product) ?>
                            <?= $block->getProductDetailsHtml($_product) ?>
                            <div class="product-item-inner">
                                <div class="product actions product-item-actions"<?= strpos($pos, $viewMode . '-actions') ? $block->escapeHtmlAttr($position) : '' ?>>
                                    <div data-role="add-to-links" class="actions-secondary"<?= strpos($pos, $viewMode . '-secondary') ? $block->escapeHtmlAttr($position) : '' ?>>
                                        <?php if ($addToBlock = $block->getChildBlock('addto')) :?>
                                            <?= $addToBlock->setProduct($_product)->getChildHtml() ?>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <?php if ($showDescription) :?>
                                    <div class="product description product-item-description">
                                        <?= /* @noEscape */ $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                                        <a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
                                           title="<?= /* @noEscape */ $_productNameStripped ?>"
                                           class="action more"><?= $block->escapeHtml(__('Learn More')) ?></a>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <?php } else { ?>
                    <div class="product details product-item-details">
                        <?php
                            $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                        ?>
                        <strong class="product name product-item-name">
                            <a class="product-item-link"
                               href="<?= $block->escapeUrl($_product->getProductUrl()) ?>">
                                <?= /* @noEscape */ $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
                            </a>
                        </strong>
                        <?= $block->getReviewsSummaryHtml($_product, $templateType) ?>
                        <?= /* @noEscape */ $block->getProductPrice($_product) ?>
                        <?= $block->getProductDetailsHtml($_product) ?>

                        <div class="product-item-inner">
                            <div class="product actions product-item-actions"<?= strpos($pos, $viewMode . '-actions') ? $block->escapeHtmlAttr($position) : '' ?>>
                                <div class="actions-primary"<?= strpos($pos, $viewMode . '-primary') ? $block->escapeHtmlAttr($position) : '' ?>>
                                    <?php if ($_product->isSaleable()) :?>
                                        <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                        <form data-role="tocart-form"
                                              data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>"
                                              action="<?= $block->escapeUrl($postParams['action']) ?>"
                                              method="post">
                                            <input type="hidden"
                                                   name="product"
                                                   value="<?= /* @noEscape */ $postParams['data']['product'] ?>">
                                            <input type="hidden" name="<?= /* @noEscape */ Action::PARAM_NAME_URL_ENCODED ?>"
                                                   value="<?= /* @noEscape */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
                                            <?= $block->getBlockHtml('formkey') ?>
                                            <button type="submit"
                                                    title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>"
                                                    class="action tocart primary">
                                                <span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
                                            </button>
                                        </form>
                                    <?php else :?>
                                        <?php if ($_product->isAvailable()) :?>
                                            <div class="stock available"><span><?= $block->escapeHtml(__('In stock')) ?></span></div>
                                        <?php else :?>
                                            <div class="stock unavailable"><span><?= $block->escapeHtml(__('Out of stock')) ?></span></div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                                <div data-role="add-to-links" class="actions-secondary"<?= strpos($pos, $viewMode . '-secondary') ? $block->escapeHtmlAttr($position) : '' ?>>
                                    <?php if ($addToBlock = $block->getChildBlock('addto')) :?>
                                        <?= $addToBlock->setProduct($_product)->getChildHtml() ?>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php if ($showDescription) :?>
                                <div class="product description product-item-description">
                                    <?= /* @noEscape */ $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                                    <a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
                                       title="<?= /* @noEscape */ $_productNameStripped ?>"
                                       class="action more"><?= $block->escapeHtml(__('Learn More')) ?></a>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php } ?>
                </div>
            </li>
            <?php endforeach; ?>
        </ol>
    </div>
    <?= $block->getToolbarHtml() ?>
    <?php if (!$block->isRedirectToCartEnabled()) :?>
        <script type="text/x-magento-init">
        {
            "[data-role=tocart-form], .form.map.checkout": {
                "catalogAddToCart": {
                    "product_sku": "<?= $block->escapeJs($_product->getSku()) ?>"
                }
            }
        }
        </script>
    <?php endif; ?>
<?php endif; ?>

Clear cache: php bin/magento cache:clean and check it.