How to Add Custom Field Below Apply Discount Code in Magento 2 Cart Page
Magento 2 is the most preferred CMS for developers owing to its customization capabilities. Today, I am giving one such customized solution to add custom field below apply discount code in Magento 2 cart page.
You can use this solution for multiple purposes and make the most out of the cart page when the customer is about to checkout.
At this step, the shopper has almost decided to convert and hence he/she is trusting your brand. Why not push them for more?
For instance, if you are offering a discount code, you can prompt them to click on a custom field below the discount code and ask to explore the detailed offer benefits or encourage them to avail a superior membership for more discounts.
Moreover, at this step, you can add a custom link that redirects them to check your best seller products. In this way, you can increase your average order value and boost sales.
Also, if you are offering product personalization, you can offer a custom button to start designing the product if they didn’t do it earlier. In this way, improve the shoppers’ store experience in Magento 2 store.
Lastly, if there’s any data you want from the customers that can be insightful data for your marketing strategy, use the below solution to add a custom textbox where they can enter the asked information!
Also read: How to Setup Discount with Minimum Purchase in Magento 2
Check this code if you want to implement any of the above scenarios or any other custom field based on your business requirements on the Magento 2 cart page.
Also, if you are looking to add a custom field on the checkout page in Magento 2, you can refer to my solution.
Method to Add Custom Field Below Apply Discount Code in Magento 2 Cart Page
-
Create registration.php file at app\code\Vendor\Module\registration.php
1234<?phpuse \Magento\Framework\Component\ComponentRegistrar;ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__); - Create module.xml file at app\code\Vendor\Module\etc directory
12345<?xml version="1.0"?><config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"><module name="Vendor_Module" setup_version="1.0.0"/></config>
- Create checkout_cart_index.xml file at app\code\Vendor\Module\view\frontend\layout
1234567891011<?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"><body><referenceBlock name="checkout.cart.container"><block class="Vendor\Module\Block\Cart\Custom" name="checkout.cart.custom" as="storecredit"template="Vendor_Module::cart/custom.phtml" after="cart.discount"/></referenceBlock></body></page> - Create Custom.php file at Vendor\Module\Block\Cart
1234567891011<?phpnamespace Vendor\Module\Block\Cart;class Custom extends \Magento\Framework\View\Element\Template{public function __construct(\Magento\Framework\View\Element\Template\Context $context){parent::__construct($context);}} - Create custom.phtml file at Vendor\Module\view\frontend\templates\cart
1234<div class="control"><label>Enter Value:</label><input type="text" class="input-text" id="custom" name="custom"/></div>
Once implemented, you can see the custom field on the cart page in Magento 2 storefront as shown below:
That’s it.
If you have queries regarding this solution, feel free to ask in the Comments section below.
I would be happy to answer your question.
Do consider sharing this post with Magento Community via social media.
Thank you.
Magento 2 Coupon Code Link extension makes it easy to apply coupon code using a link instead of manually typing the code.
Sanjay Jethva
Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe.
His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.
4 Comments
i do the same u post , but it not work , can u explain to me why??
Hello,
You can find the exact cause by adding a log and make sure that all files are getting called.
It might be possible any third-party module conflict is there.
Thank You
Thanks a lot for your tutorials.
In this one, once the customer proceeds to checkout, how is the custom field’s value saved in database? With controller or observer? Should we add a new column to table?
Hello Shadow,
No, there’s no need to use a controller or observer.
Create extension_attribute and add that column in quote related table.
Thank You.