How to create the buttons increase and decrease quantity on the product detail page in Magento 2

► Fanpage: https://www.facebook.com/giaphugroupcom/
► Subscribe to my channel: https://www.youtube.com/giaphugroupcom?sub_confirmation=1
► Skype: cuongnq87
► The website link: https://www.giaphugroup.com/magento-2-extensions.html

Hi everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series.
#magento2tutorial
Today, I am going to show everybody a best practice, How to create the buttons increase and decrease quantity in Magento 2.

This will be the results after we complete this practice.

Before doing this practice, we need to determine the layout of the product detail page and the template phtml we will override.

For now, we will determine correctly the path of the product detail page.
So the layout for the product detail page is catalog_product_view.xml
this file will be put in the folder named frontend/layout of the module named Magento_Catalog.

And now, we will determine correctly the template phtml file need to override.
Find this file product/view/addtocart.phtml in the layout catalog_product_view.xml

This is the block name product.info.addtocart.additional we will override.

Okie, let's go.

Let's do this practice, you need to follow steps by step:

Step 1: Declaring a new module called PHPCuong_Qty
- Create the namespace PHPCuong in the path app\code.
- Create the module named Qty in the path app\code\PHPCuong.
- Create the file named registration.php in the path app\code\PHPCuong\Qty

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'PHPCuong_Qty',
__DIR__
);

- Create the file named module.xml in the path app\code\PHPCuong\Qty\etc

End of the step #1, I have been completed the step to create a new module called PHPCuong_Qty.

Step 2: Override the template phtml
- Create the new layout named catalog_product_view.xml in the path app\code\PHPCuong\Qty\view\frontend\layout

- Create the new template phtml named addtocart.phtml in the path app\code\PHPCuong\Qty\view\frontend\templates\product\view

Step 3: Add the .less file for compiling to .css
- Create the new file named _module.less in the path app\code\PHPCuong\Qty\view\frontend\web\css\source

Step 4: Test and See the results
Run the commands line following:
php bin/magento setup:upgrade (Install the new modules)
php bin/magento setup:static-content:deploy (Deploy the static contents)
php bin/magento cache:flush (Flush caches)

Go to the product detail page.

Yeah, it works perfectly.

Thank you for your watching. If you have any questions about this practice please feel free to leave a comment below.

Don't forget to like, comment, share and subscribe to my channel for getting the latest videos.

Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2.

Get the source codes of this practice in the Github https://github.com/php-cuong/magento2-qty