How to customize add to cart in Magento 2

The product page is the most important aspect of any ecommerce store as it contains all the details about the products.

However, if the look of your product page is not up to the mark, you can lose a lot of sales. An attractive front end of your store can make your customers stay and can help in boosting sales. The look of add to cart button also plays a vital role in making the product page look attractive.

Magento 2 is one of the most used ecommerce platform, so in this guide I am going to teach you how to customize add to cart button in Magento 2.

I will implement the procedure using a custom module. So let’s start by creating a custom module:

Configuration and Registration of Module

  • Create module.xml in app/code/Magenticians/Mymodule/etc:
<?xml version="1.0"?>
	<configxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
	<module name="Magenticians_Mymodule" setup_version="1.0.0"></module>
</config>
  • Create registration.php in app/code/Magenticians/Mymodule:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'Magenticians_Mymodule',
   __DIR__
);

Copy addtocart.phtml File

Copy addtocart.phtml file from vendor/magento/module-catalog/view/frontend/templates/product/view paste this file in app/code/Magenticians/Mymodule/view/frontend/templates/catalog/product/view.

Now create catalog_product_view.xml file in app/code/Magenticians/Mymodule/view/frontend/layout and add this code in the file:

<?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">
  <head>
        <csssrc="Magenticians_Mymodule::css/colorcart.css"/>
   </head>

   <body>
       <referenceBlock name="product.info.addtocart">
           <action method="setTemplate">
               <argument name="template" xsi:type="string">Magenticians_Mymodule::catalog/product/view/addtocart.phtml</argument>
           </action>
       </referenceBlock>
   </body>
</page>

I have added colorcart.css file which I will use to customize add to cart button.

Edit addtocart.phtml

Now open addtocart.phtml file by going to app/code/Magenticians/Mymodule/view/frontend/templates/catalog/product/view and add css class newcolor in the button tag:

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

// @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>
       <?phpendif; ?>
       <div class="actions">
           <button type="submit"
                   title="<?= /* @escapeNotVerified */ $buttonTitle ?>"
                   class="action primary tocartnewcolor"
                   id="product-addtocart-button">
               <span><?= /* @escapeNotVerified */ $buttonTitle ?></span>
           </button>
           <?= $block->getChildHtml('', true) ?>
       </div>
   </div>
</div>
<?phpendif; ?>
<?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>
<?phpendif; ?>

Create CSS file

Now create a css file colorcart.css in app/code/Magenticians/Mymodule/view/frontend/web/css and add the following code in it:

.newcolor
{
   background: #29487d !important;
   box-shadow: 1px 5px 5px 1px rgba(66, 103, 178, 0.51);
   font-size: 23px !important;
   font-weight: bold !important;
   border-radius: 10px;
   height: 60px;
   font-family: cursive !important;
}

Now go to your Magento 2 root directory through SSH terminal and run these commands:

php bin/magentomodule:enableMagenticians_Mymodule
php bin/magentosetup:upgrade
php bin/magentosetup:di:compile
php bin/magentosetup:static-content:deploy
php bin/magentocache:clean
php bin/magentocache:flush

Launch the product’s front page and you will see the new design applied to the add to cart button:

i

Wrapping Up

I have demonstrated just one example, but you can design your add to cart button according to your style. With the help of this guide, I believe that you can now customize add to cart button in Magento 2. If you want to discuss something related to this tutorial, just use the comment box below and I will get back to you.

Author Bio

Syed Muneeb UlHasan is a Magento Developer and Blogger at Magenticians – a platform to learn Magento. He is an expert in PHP and Magento and prefers to educate users in the implementation of Magento. When not working, he loves to play games and watch cricket. You can follow him on Twitter.

Comments for How to customize add to cart in Magento 2

Please leave comments if you have any questions, feedbacks.