Hire a web Developer and Designer to upgrade and boost your online presence with cutting edge Technologies

Thursday, October 23, 2025

How to Send Magento 2 Order Confirmation Email After Payment Success

 

In the normal scenario, after you set up order confirmation Email in the Magento 2 customers receive order confirmation Email immediately after the order is placed. As online purchases don’t allow them to get their products instantly, the confirmation gives them the patience to wait for the delivery after they have spent their money! Such a service is helpful for customer satisfaction and hence improving the customer experience of your store!

Default Magento automatically sends a confirmation Email once the order is placed. But the question is what if the payment is done via a third party payment gateway or what if the card is declined and payment fails? Default Magento 2 falls short in such a situation. So I have come up with custom code to allow to send order confirmation Email after payment success in Magento 2.

To send email confirmation on successful order payment, we need to tie Magento 2 observer with an event of checkout_onepage_controller_success_action.
Create a simple method isEnable() using OrderIdentity.php to ensure that order confirmation email is not sent twice. 

Register event under events.xml using below code
[Package_Name]\[Module_Name]\etc\frontend\events.xml

<?xml version="1.0">   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">     <event name="checkout_onepage_controller_success_action">         <observer name="checkout_onepage_controller_success_action_sendmail" instance="[Package_Name]\[Module_Name]\Observer\SendMailOnOrderSuccess" />     </event> </config>

Once the event is registered, create Observer class in the following file:
[Package_Name]\[Module_Name]\Observer\SendMailOnOrderSuccess.php

<?php   namespace [Package_Name]\[Module_Name]\Observer;   use Magento\Framework\Event\ObserverInterface;   class SendMailOnOrderSuccess implements ObserverInterface {     /**      * @var \Magento\Sales\Model\OrderFactory      */     protected $orderModel;       /**      * @var \Magento\Sales\Model\Order\Email\Sender\OrderSender      */     protected $orderSender;       /**      * @var \Magento\Checkout\Model\Session $checkoutSession      */     protected $checkoutSession;       /**      * @param \Magento\Sales\Model\OrderFactory $orderModel      * @param \Magento\Sales\Model\Order\Email\Sender\OrderSender $orderSender      * @param \Magento\Checkout\Model\Session $checkoutSession      *      * @codeCoverageIgnore      */     public function __construct(         \Magento\Sales\Model\OrderFactory $orderModel,         \Magento\Sales\Model\Order\Email\Sender\OrderSender $orderSender,         \Magento\Checkout\Model\Session $checkoutSession     )     {         $this->orderModel = $orderModel;         $this->orderSender = $orderSender;         $this->checkoutSession = $checkoutSession;     }       /**      * @param \Magento\Framework\Event\Observer $observer      * @return void      */     public function execute(\Magento\Framework\Event\Observer $observer)     {         $orderIds = $observer->getEvent()->getOrderIds();         if(count($orderIds))         {             $this->checkoutSession->setForceOrderMailSentOnSuccess(true);             $order = $this->orderModel->create()->load($orderIds[0]);             $this->orderSender->send($order, true);         }     } }

After adding observer code, an email will be sent to customers on successful order payment. To avoid order duplication Email, we need to create a plugin using the di.xml file.
[Package_Name]\[Module_Name]\etc\di.xml

<?xml version="1.0"?>   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">     <type name="Magento\Sales\Model\Order\Email\Container\OrderIdentity">         <plugin name="change_is_enable_method" type="\[Package_Name]\[Module_Name]\Plugin\Sales\Order\Email\Container\OrderIdentityPlugin"/>     </type> </config>

Create another file along with ‘di.xml’ that is OrderIdentityPlugin.php to remove duplication of email.
[Package_Name]\[Module_Name]\Plugin\Sales\Order\Email\Container\ OrderIdentityPlugin.php

<?php   namespace [Package_Name]\[Module_Name]\Plugin\Sales\Order\Email\Container;   class OrderIdentityPlugin {     /**      * @var \Magento\Checkout\Model\Session $checkoutSession      */     protected $checkoutSession;       /**      * @param \Magento\Checkout\Model\Session $checkoutSession      *      * @codeCoverageIgnore      */     public function __construct(         \Magento\Checkout\Model\Session $checkoutSession     )     {         $this->checkoutSession = $checkoutSession;     }       /**      * @param \Magento\Sales\Model\Order\Email\Container\OrderIdentity $subject      * @param callable $proceed      * @return bool      */     public function aroundIsEnabled(\Magento\Sales\Model\Order\Email\Container\OrderIdentity $subject, callable $proceed)     {         $returnValue = $proceed();           $forceOrderMailSentOnSuccess = $this->checkoutSession->getForceOrderMailSentOnSuccess();         if(isset($forceOrderMailSentOnSuccess) && $forceOrderMailSentOnSuccess)         {             if($returnValue)                 $returnValue = false;             else                 $returnValue = true;               $this->checkoutSession->unsForceOrderMailSentOnSuccess();         }           return $returnValue;     } }

There you go!
Now you may start sending the order confirmation Emails to your customers only after the payment is successful. ?

Start Emailing today itself. We’d love to hear how your order Emails are now organized in a better way.

Thank you!

How to Clear Magento 2 Cache

 

Cache is a particular area of your hosting server. It helps to increase the page load speed by storing the web pages through browsers. Also, it reduces resource requirements in the situation of heavy traffic.

The basic advantage of using cache is faster performance. If you are unsure of why the changes made on the website don’t reflect, the very first step you should try is to refresh the cache to reflect those changes in the frontend.

Everyone wants the fastest way to delete cache in Magento 2! Here are the three methods for Magento 2 Clear Cache which might prove useful to you

Method 1: Clear Magento 2 Cache via Admin Panel

  • Navigate to Admin Panel > System > Cache Management
  • Define the cache types that is to be refreshed
  • Select the Cache Type blocks that are assigned Invalidated status. You may select “All” if you don’t know what to refresh.
  • Set the “Refresh” action and click on the “Submit” button.
  • Additionally, you may use “Flush Magento Cache” or “Flush Cache Storage” buttons.
    • Flush Magento Cache: Refresh the cache in the backend and inner cache with Magento tag.
    • Flush Cache Storage: Refresh cache of all Magento stores sharing one cache storage, though based on different servers.
clear cache from admin panel

Method 2: Magento 2 Clear Cache via Command Line

You can delete cache manually using the below commands from Command Line:

  • Enable the cache:

php bin/magento cache:enable

  • Disable the cache:

php bin/magento cache:disable

  • Flush the cache:

php bin/magento cache:flush

  • Clean the cache in the website:

php bin/magento cache:clean

To clean specific cache types, you need to specify the types, e.g.: config, layout, block_html, collections, reflection, db_ddl, eav, etc.

Method 3: Magento 2 Clear Cache Programmatically

Store admin may have the requirements to clean and flush cache programmatically in Magento 2. It is advisable to implement it in order to offer a speedy store to store users.

<?php
use Magento\Framework\App\PageCache\Version;
use Magento\Framework\App\Cache\TypeListInterface;
use Magento\Framework\App\Cache\Frontend\Pool;
protected $cacheTypeList;
protected $cacheFrontendPool;
public function __construct(TypeListInterface $cacheTypeList,
Pool $cacheFrontendPool){
$this->cacheTypeList = $cacheTypeList;
$this->cacheFrontendPool = $cacheFrontendPool;
}
public function cacheFunction(Version $subject)
{
$types = array('config','layout','block_html','collections','reflection','db_ddl','eav','config_integration','config_integration_api','full_page','translate','config_webservice');
foreach ($types as $type) {
$this->cacheTypeList->cleanType($type);
}
foreach ($this->cacheFrontendPool as $cacheFrontend) {
$cacheFrontend->getBackend()->clean();
}
}

Full Page Cache

Enable Full Page Cache to enhance the performance of your website and increase the page load speed:

  • Navigate to Stores Configuration Advanced System Full Page Cache
  • Choose either Built-In Cache or Varnish Cache

Note: Varnish cache is 4 to 9 times faster than Built-In Cache

Full page caching in Magento 2 store

You can implement the Full Page Cache Warmer for Magento 2. The module allows for speeding up your online store due to timely cache warming whenever needed. Also, you can exclude separate pages from warming and enable the auto-update cache after changes.

Know the difference between Magento 2 cache clean and cache flush:

Magento 2 Clean Cache: Deletes all enabled Cache type from Magento 2 due to which the disabled cache types are not cleaned.
Magento 2 Flush Cache: Cleans all the cache types collected in storage. It may affect other processing applications that run the same cache storage.

How to enable Cache Types?

For clearing specific cache types which have not been assigned Invalidated status, go to Cache Management and configure the following settings:

  • Select the cache types you want to enable.
  • Set Enable from the upper left drop-down menu.
  • Click “Submit” button.
enabling cache types

That’s all about Clearing Magento 2 Cache! I have tried to elaborate basic Magento 2 cache concepts, apply methods to cache your Magento 2 store and improve store performance.

Happy Caching

How to Manage Magento 2 URL Rewrite

 

A Magento 2 store may undergo changes from time to time. There may be changes in product or catalogue pages or changed the location entirely! In such cases, if the URL rewriting is not taken care of, then the store might lose potential customers due to landing on a page that does not exist anymore. Also, the admin would want to rewrite the URL with higher-value keywords to make it more search friendly and improve the SEO of the store. If you’re going to do the same for your store, learn how to manage the Magento 2 URL rewrite! Remember, a misconfigured URL rewrite can cause Magento 2 404 error.

Enable Magento 2 URL rewrite for your store when you want to redirect the old links to a new address. There are two ways to enable URL rewrites in Magento 2

1. URL Rewrites via the Admin Panel

1. Follow the below steps

1_enable-web-server-rewrites

2. Configure automatic URL Redirect

2_Enable-permanent-redirects

3. Change product or category page URLs

  • Go to Products > Catalog, select the products of which the URLs has to be rewritten
  • Select the drop-down menu of the Search Engine Optimization section
  • Update the URL Key here, and use only lowercase characters
  • Save the changes and refresh the cache.
3_Add-URL-key-for-product

Configuring these settings will give you the desired results. The visitors will be redirected to the new page from the old URL.

4. See Magento 2 URL Rewrite tableNavigate to Marketing > SEO&Search > URL Rewrites in Admin Panel to see the redirect records. As shown in the image below, the most recent redirects will appear at the top of the Magento 2 URL Rewrites table.

4_URL-rewrites-table

5. Add URL Rewrite using the Add URL Rewrite buttonGo to Marketing > SEO&Search > URL Rewrites. If you have followed the instructions above, then you are in the required tab. Click the “Add URL Rewrite” button. Configure the following settings:

  • Create URL Rewrite: Choose the custom option for category, product or CMS page.
  • Store: Select the store view
  • Request Path: Input a new URL key and suffix for the category or the product
  • Target Path: Enter the targetted path
  • Redirect Type: Choose either Temporary (302) or Permanent (301) redirect type
  • Description: Describe the rewrite
  • Save your settings
5_Adding-URLl-Rewrite-for-Category

2. Magento 2 URL Rewrite Programmatically

Enable 301 URL redirect to create search redirection to go on working with the customers after building new URLs.

Follow the below steps:

1. Generate a constructor file

<?php
/**
*/
protected $_urlRewriteFactory;
/**
* @param Context $context
* @param \Magento\UrlRewrite\Model\ResourceModel\UrlRewriteFactory $urlRewriteFactory
*/
public function __construct(
Context $context,
\Magento\UrlRewrite\Model\ResourceModel\UrlRewriteFactory $urlRewriteFactory
)
{
$this->_eavAttributeFactory = $eavAttributeFactory;
parent::__construct($context);
}

2. Fill in custom URL rewrite in execute method

$urlRewriteModel = $this->_urlRewriteFactory->create();
/* set current store id */
$urlRewriteModel->setStoreId(1);
/* this url is not created by system so set as 0 */
$urlRewriteModel->setIsSystem(0);
/* unique identifier - set random unique value to id path */
$urlRewriteModel->setIdPath(rand(1, 100000));
/* set actual url path to target path field */
$urlRewriteModel->setTargetPath("www.example.com/customModule/customController/customAction");
/* set requested path which you want to create */
$urlRewriteModel->setRequestPath("www.example.com/xyz");
/* save URL rewrite rule */
$urlRewriteModel->save();

That’s it.
Now besides the importance of URL rewrite you know how to create and manage it.

How to Change the Logo in Magento 2

 

The business logo plays a crucial role in making a lasting impression of your brand. It helps customers to relate to your brand when they see the logo.

Immediately after you install Magento 2, the very first thing you require is to change the logo in Magento 2. Uploading the brand logo makes your store professional & reliable for users. Especially it builds brand awareness.

The size & location of the logo in Magento 2 in the header is determined by the current theme of the store. By default, the logo in Magento 2 with the sample data is in SVG format, so upload SVG image in Magento 2 custom module to enhance visual content. It can also be uploaded and saved in various file formats such as PNG, GIF, JPG, or JPEG and uploaded from the admin panel of the website. But before uploading your brand logo, we suggest using an image resizer tool to adjust it accordingly.

By default in Magento 2, the logo image resides at app/design/frontend/[vendor]/[theme]/web/images/logo.svg path on the server and any image file with the same name and in the same location can be used as the theme logo.

How to change the logo in Magento 2:

For Magento 2.0.x
Navigate to Stores > Configuration > General > Store View > Header

For Magento 2.1.x and 2.2.x
Move to Content > Configuration > Select Your Current Theme > Header

upload-logo-image

Configure the following settings:

  • Logo Image: Click the ‘Upload’ button to upload a new logo.
  • Logo Image Width/ Logo Image Height: enter the image width and height for the logo
  • Welcome Text: Input a custom welcome text for your landing page in the store.
  • Logo Image Alt: Input the image alt text here.
  • Save Config: Save your settings

You may face particular issues while changing the logo in Magento 2.

Check the following actions:

  • Double check if you have saved your configurations.
  • Flush and refresh the Cache

You can also refer to our blog post on get logo URL, alt text, logo height and width in Magento 2 to compare the updated logo with the existing one and validate logo information.

That’s all you need for logo customization in Magento 2! Create and upload beautiful logos in Magento 2 to increase brand awareness. Likewise you can also change default admin logo in Magento 2 for branding purposes.

You can also refer to Change the Logo in Magento 2 from our Magento 2 video tutorial series:

You can also change welcome message in Magento 2 store for better frontend, or change favicon in Magento 2!

You may comment below if you find any doubts in the above method.
Rate us with 5 stars if you found the article helpful!

Best wishes for your business!

How to Add Color Picker in Magento 2 Admin Configuration

 

Sometimes while creating an extension, you may need to provide admin the complete control of the frontend UI. Changing UI includes the change of background color, font colors which arises the need of adding color picker in Magento 2 Admin Configuration.

Generally, the settings in a Magento 2 extension resides under Stores –> Configuration and here you need to add the color picker to allow change the color in frontend UI. Here, I’ll show to add color picker in Magento 2 Admin Configuration in just three steps!

Steps to Add Color Picker in Magento 2 Admin Configuration:

1. Add color picker to textbox through system.xml file located at app\code\Vendor\Module\etc\adminhtml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">     <system>         <section>             <group id="my_color_group" ...>                 <field id="my_color_option" translate="label" type="text" sortOrder="10" showInDefault="1"                        showInWebsite="1" showInStore="1">                     <label>Background Color</label>                     <comment><![CDATA[Background color]]></comment>                     <frontend_model>Vendor\Module\Block\Color</frontend_model>                 </field>             </group>         </section>     </system> </config>

2. Create one Color.php file at below location under the hood of extension app\code\Vendor\Module\Block

<?php namespace Vendor\Module\Block; use Magento\Config\Block\System\Config\Form\Field; use Magento\Backend\Block\Template\Context; use Magento\Framework\Registry; use Magento\Framework\Data\Form\Element\AbstractElement; class Color extends Field {     protected $_coreRegistry;     public function __construct($context, Registry $coreRegistry, array $data = [])     {         $this->_coreRegistry = $coreRegistry;         parent::__construct($context, $data);     }     protected function _getElementHtml(AbstractElement $element)     {         $html = $element->getElementHtml();         $cpPath = $this->getViewFileUrl('Vendor_Module::js');         if (!$this->_coreRegistry->registry('colorpicker_loaded')) {             $html .= '<script type="text/javascript" src="' . $cpPath . '/' . 'jscolor.js"></script>';             $this->_coreRegistry->registry('colorpicker_loaded', 1);         }         $html .= '<script type="text/javascript">         var el = document.getElementById("' . $element->getHtmlId() . '");         el.className = el.className + " jscolor{hash:true}";         </script>';         return $html;     } } ?>

3. Add the JS file at Vendor_Module/view/adminhtml/web/js/jscolor.js, click here to copy jscolor.js

Clear the cache and navigate to stores configuration. The color picker option will be displayed. Use this color picker anywhere in Magento 2 with your own customized code when needed!

How to Apply Indian GST in Magento

 

Goods and Service Tax is the largest tax reform in India. Introduced on July 01, 2017, it is compulsory for every business to follow the GST rules and Magento is no exception. Magento dominates E-commerce, and with the advent of GST in India, Magento store owners are looking for the ways to configure it in their stores. If you own a Magento store and are yet fumbling for GST implementation, you are at the right place. Read the tutorial to learn how to apply Indian GST in Magento with tax rules.

First of all, the store owners need to find the GST rates under which their products fall. Refer GST Rate Finder to decide the GST rates of your products. Once this task is done, proceed with the given method below.

Here, in the blog, consider the GST rate as 12% and business origin as Gujarat state to better understand the steps. Business origin play vital role in calculating CGST-SGST, or IGST.  If the selling is performed Intra-state i.e Gujarat to Gujarat, CGST (69%) and SGST (6%) will be applied and equally divided to make GST. However, if the selling is performed Inter-State i.e states other than Gujarat, IGST (12%) will be applied.

Now, let’s dig into the steps to apply GST in Magento.

Steps to apply Indian GST in Magento

1. First of all, navigate to Sales > Tax > Product Tax Classes and click Add New.

1_Create-Product-Tax-Class

2. Name the product tax class as GST to easily identify the tax class while creating tax rules and rates for all 3 SGST, CGST, and IGST.

2_Set-Class-Name

3. Before creating tax rates, follow this guide to install states script to get auto state selection for Indian states. Now navigate to Sales > Tax > Manage Tax Zones & Rates to create tax rates for CGST, SGST, and IGST. While creating tax rates, set 6% of rate and Gujarat as the business origin for both CGST and SGST. And for IGST, you have to create 28 rates of 12% IGST for all the states other than Gujarat to make GST work for all the states of India. Click save once all the rates have been created.

3_Create-Tax-Rate

4. Once all the 3 tax rates are created, they can be seen enlisted under Sales > Tax > Manage Tax Zones & Rates.

4_Saved-Tax-Rates

5. Whenever the selling is performed intra-state, SGST and CGST are equally divided into two halves of the whole rate of the GST, i.e., 6% to make the complete 12%.
As per the government rule, sellers have to bifurcate CGST, SGST and IGST separately in order details and invoices for every single order. To split CGST-SGST equally into two, you have to custom code as below.
Go to app/design/frontend/base/default/template/tax/checkout/tax.phtml and find the blow code at line number 54.

<?php if ($isFirst): ?>                 <td <?php echo $this->getValueProperties()?> rowspan=" 1 <?php echo count($rates); ?>">                     <?php echo $_order->formatPrice($amount); ?>                 </td> <?php endif; ?>

Replace the above code with this to bifurcate CGST-SGST on cart and checkout page.

<?php //if ($isFirst): ?>                <td style="<?php echo $_style ?>" class="a-right" rowspan="1 <?php //echo count($rates); ?>">                    <?php echo $this->helper('checkout')->formatPrice($amount / ($percent/(float)$rate['percent'])); ?>                </td> <?php //endif; ?>

6. Now create tax rules from Sales > Tax > Manage Tax Rules for all the 3 CGST, SGST and IGST. Select product tax class as GST and tax rate for each of them respectively as created.

5_Create-Tax-Rule

7. Once tax rules are created and saved, they can be seen enlisted under Sales > Tax > Manage Tax Rules.

6_Saved-Tax-Rules

8. Enable the “Display Full Tax Summary” in System > Configuration > Sales > Tax > Shopping Cart Display Settings to show detailed tax summary with the bifurcation of CGST-SGST and IGST.

7_Tax-Summary

9. To assign tax class as GST to all the products, simply go to Catalog > Manage Products, select all the products, select Update Attributes from the Action drop-down, go to Tax Class, tick Change and set GST from the drop-down and save.

8_Update-Attributes

10. To test the above steps and proper implementation of GST in Magento, add a product to cart and select the country as India and state as Gujarat. You will see the SGST and CGST tax rate applied on order.

9_SGST-CGST-Applied-on-Order

11. To test the IGST, select a different state in the above step. The below image shows the calculation of IGST when Goa state is chosen.

10_IGST-applied-on-order

Follow all these steps to apply Indian GST in Magento! But to make it work for all the Indian states, you have to create 28 IGST tax rates which are really a tiresome task. Moreover, the process is more complicated if you have products which belong to multiple tax rate slabs.

If you are not really ready to try your hands on creating these many tax rates and put yourself in trouble, No Worries :), you can have a look at our Magento GST India extension which is the ultimate module for auto calculation of Indian GST in your Magento store! Try our Free GST Calculator to calculate the GST rates more accurately in a precise way. Adding GST in Magento using this extension is as easy as ABC, just take a look at the features the extension serve and try the live demo to test before you buy!

Let me know which of the choices you will prefer to Apply Indian GST in Magento. In either case, if you stuck somewhere, I’ll be happy to help as always!

Award 5 stars to my GST guide if found helpful!

How to Apply Indian GST in Magento 2

 

Goods and Service Tax (GST) is a value-added tax levied at all points in the supply chain on products and services. It was introduced in India on 1 July, 2017 which put an end to multiple taxes charged by Central and State Government.

Being the most popular platform, Magento 2 store owners are in a race to implement GST in their stores at the rate of knots. They need to develop and implement a system which integrates Indian GST to their Tax Calculation in Magento 2. Here I’m sharing the detailed guide to apply Indian GST in Magento 2.

Before starting to create GST rules and rates, store owners need to find GST rate under which their products fall. The GST rates for all the products can be found under GST Rate Finder website objectively created by the Indian government. Once you find GST rates for your store products, you can start creating GST tax rules and rates in Magento 2.

In the below steps, we are considering the GST rate as 5%, origin of the business i.e state as Gujarat. Here, the business location plays vital role in calculating CGST-SGST or IGST. If the selling is performed Intra-state, CGST (2.5%) and SGST (2.5%) will be applied and equally divided to make GST. But if the selling is performed Inter-State, IGST (5%) will be applied. Let’s have a look at detailed steps to apply Indian GST in Magento 2.

Steps to Apply Indian GST in Magento 2

1. First of all, you need to create 3 new tax rules named SGST, CGST and IGST. Go to Stores > Taxes > Tax Rules and click on “Add New Tax Rule”. Name it and click add new tax rate to add tax rate for the rule you are creating.

Create a new ta rule

2. While creating SGST and CGST, you have to set the rate to 2.5% and state as Gujarat as we are considering as the business origin. But for IGST, you have to set the tax rate to 5% and you have to create as many rules for it as many states are there in India i.e 29 rather than Gujarat. Click save once done.

2_Create-Tax-rate

3. Now from Additional Settings, create product tax class named GST and select the same for all 3 CGST, SGST and IGST Rules.

3_Additional-Settings

4. Create tax rules and rates for SGST and IGST as explained. Once done, the saved rules can be seen enlisted under Tax Rules.

4_Saved-tax-rules

5. Tax Rates for CGST, SGST and IGST can be seen under Stores > Taxes > Manage Tax Zones & Rates.

5_Saved-tax-rates

6. Now, SGST and CGST are equally divided in two halves of the amount of tax rates, i.e., 5%. According to the government rule, sellers have to split and bifurcate CGST and SGST taxes separately in order details and invoices for every single order.To bifurcate GST taxes to show separately in all the order related documents, you have to custom code as default Magento 2 doesn’t provide the facility.Copy file from Magento_Root/vendor/magento/module-tax/view/frontend/web/js/view/checkout/summary/tax.js and paste it in Magento_Root/app/design/frontend/[Your_Theme]/Magento_Tax/view/frontend/web/js/view/checkout/summary/tax.js

Add following code in the copied file at line no. 99

var taxSegment = totals.getSegment('tax');     amount = amount / taxSegment['extension_attributes']['tax_grandtotal_details']['0']['rates']['length'];

After adding, the whole code will look as

formatPrice: function (amount) {             var taxSegment = totals.getSegment('tax');             amount = amount / taxSegment['extension_attributes']['tax_grandtotal_details']['0']['rates']['length'];             return this.getFormattedPrice(amount);         },

7. Now assign tax class as GST to all the products in Products > Catalog using update attributes actionSimply go to Product > Catalog, select products, select Update Attributes action from the dropdown, go to Tax Class, tick Change and set GST from the dropdown.

6_update-attributes

8. To display the tax summary in detail, set Yes to “Display Full Tax Summary” in Stores > Configuration > Sales > Tax > Shopping Cart Display Settings.

7_Shopping-cart-display-settings

9. Now when you have followed all the steps above, you are ready to see the GST applied on Magento 2 products. Simply add products to cart, select country and state. Here, set Gujarat state to check CGST-SGST applied on order.

8_SGST-CGST-applied-on-order

10. Now to check the application of IGST, select states other than Gujarat for which you have created rules and rates. Here, we have selected Karnataka to get you an idea on how IGST will be applied.

9_IGST-applied-on-order

The above steps are enough to apply GST in Magento 2. But it needs you to create 29 tax rates for IGST, don’t you think it takes your much time and efforts?! Also, what if you have products which belong to multiple tax rate slabs? You have to create as many rules and rates for each.

If you want to be out of this hassle and have an automated system to apply GST in Magento 2 store products, take a look at our Magento 2 GST India extension which has oh so wow! features to add GST with ease. Try our Free GST Calculator to calculate the GST rates more accurately in a precise way. Adding GST in Magento 2 was never easy before, take a look at the detailed features and give a try using the live demo. I’m sure you will love using automation rather the above manual steps!

Let me know how much time did it take to apply GST in Magento 2 manually? Also, if you stuck somewhere, have queries or want to give feedback, comment down below, I’m always ready to welcome your words! Don’t forget to hit the 5 stars to appreciate our tutorial

Our latest Magento 2.2.4 release: Know it in & out here

 

After the feature pack release of Magento 2.2.3, today Magento release Magento 2.2.4 having the core focus on improvement to checkout process to lessen up the cart abandonment

I’ll discuss the key points of the latest Magento 2.2.4 version in the blog post here. It is advisable for Magento 2 store owners to download the latest version and upgrade their store to Magento 2.2.4 as soon as possible.

The Magento 2.2.4 version addresses installation, setup, and deployment fixes; includes payment methods such as Amazon Pay, Vertex, and Klarna Payments to automate the shipping calculations and simplify the checkout process, and other enhancements for the core features which will be discussed here.

What’s New in Magento 2.2.4!

  • E-commerce store owners are facing difficulty in converting visitors to customers. It mainly happens due to the complex checkout process or enforcing visitors to create an account. The Magento 2.2.4 enables to include Amazon Pay as a payment method. The payment and address information can be fetched from the user’s Amazon account. The customer can skip this boring process while checkout and use this easy and familiar checkout process.
  • Your customers would always want to know the details about their payments including the tax they pay and the discounts they get. Calculating accurate sales tax is now possible with the integration of Vertex with Magento Ecommerce. Vertex allows calculating real-time accurate taxes, manage discounts calculation and generate signature-ready pdf returns. It reduces cart abandonment rate with transparent tax calculation system.
  • Offer flexible payment options with Klarna Payments. This integration allows merchants to offer options like pay now, pay later or pay in installments, to their customers. Customers can decide how they want to pay which enhances the user experience. The Slice it option allows customers to pay in installments at lower interest rates.
  • With the Magento 2.2.4 release comes the dotmailer improvements such as:
  • The Magento 2.2.4 release offers other enhancements such as Emogrifier dependency upgraded to 2.0.0 or later, admin global search is now translatable, extensible, and considers the ACL settings for the current user. And much more!
  • Certain fixes like backup command working properly, correction in links to Magento Installation documentation, ability to enable or disable the Magento Profiler from the command line, and many other bug fixes are addressed in the Magento Open Source 2.2.4

There is much more to Magento 2.2.4 release! Get the detailed idea here. Also, you can download Magento 2.2.4 to upgrade your Magento to take benefit of these awesome features it has introduced!

Enjoy the new features and enhancements that Magento has to offer in the latest Magento 2.2.4 and take your business to the new heights!

How to Configure Magento 2 Shipping Methods

 

Customer satisfaction and operational efficiency are two things that can be significantly affected by shipping in an e-commerce business. However, there is a rich system in Magento 2 for managing different types of shipments. This allows the store owners to customize their shipping methods to fit the requirements unique to their business.

This guide aims to help you configure Magento 2 shipping methods so that your store runs smoothly without hitches.

Default Magento 2 Shipping Options

There are 5 default shipping methods that come with Magento 2.

These methods enhance adaptability and ease as they enable store owners to efficiently manage delivery options and costs associated with shipments. In this regard, here is a brief overview of what exists for default shipping methods in Magento:

  1. Free Shipping: This means customers pay nothing for delivery services, which may increase average order value and make clients happy about their purchases, too. With Magento 2, it is possible to set up free shipping based on particular conditions like minimum order amount.
  2. Flat Rate: This method sets a uniform fee across all orders or under specific circumstances, thus simplifying calculations for merchants and buyers alike.
  3. Table Rates: Table Rates allow you to adopt multiple rates depending on different destinations (shipping zones), item quantities, or even order subtotals. This makes them ideal, particularly when dealing with products with diverse ranges, while at the same time attracting variable charges due to transportation costs involved.
  4. Magento Shipping: Through integration with many carriers, this approach provides several alternatives within the Magento platform thereby streamlining shipment processes among others as well.
  5. Dimensional WeightShipping charges are determined by package dimensions together with its mass under dimensional weight pricing. This method considers both dimensions and weight, rather than just weight alone when calculating the cost of sending goods using any carrier service supported by Magento.

Don’t Forget About Shipping Settings

You need to set up your shipping settings before you configure the individual methods.

This step establishes a foundation for the correct functioning of the shipping methods and ensures they align with the operational requirements of your store. Here is how to do it in Magento 2:

  • Go to Stores > Configuration.
  • On the left panel, click on Shipping Settings under Sales.
  • Configure Origin and Shipping Policy Parameters.

Shipping Settings Configuration Step-by-Step

Origin

These origin settings define where you dispatch goods from. It helps in the accurate calculation of shipping rates as well as delivery time estimation based on this data.

  • Expand section: Origin.
  • Fill in the address details for your shipping origin, such as Country, Region/State, ZIP/Postal Code, City, and Street Address, Line 1 and Line 2 (if applicable).
  • Click the Save Config button.

Shipping Policy Parameters

With these options, you can set general policies for shipments across all items sold by the store.

  • Expand section: Shipping Policy Parameters.
  • Do the following configurations:
    • Maximum Package Weight – Indicate the heaviest weight package allowed through being shipped by store.
    • Default Free Shipping Threshold – Set minimum order amount required for free delivery eligibility; $0 means there is no limit on cost necessary to qualify for this service type during the checkout process
    • Ship To Applicable Countries – Ship worldwide or only certain nations among those permitted according to system security rules?
    • Ship To Specific Countries – List countries to which orders may be dispatched internationally (if applicable).
  • Click the Save Config button

How to Configure Magento 2 Shipping Methods

Magento 2 offers several shipping methods, each with its configuration process. Below, we provide detailed steps for configuring each shipping method:

Configure Free Shipping in Magento 2

Free shipping can be a powerful incentive for customers to complete their purchases. To configure free shipping:

  • Go to Stores > Configuration > Sales > Delivery Methods.
  • Expand the Free Shipping section.
  • Set Enabled to Yes.
  • Define the Minimum Order Amount for free shipping.
  • Configure other settings as needed and click Save Config.
How to Configure Magento 2 Shipping Methods 9

Configure Flat Rate Shipping in Magento 2

Flat-rate shipping allows you to charge a consistent shipping fee for orders. Here’s how to set it up:

  • Navigate to Stores > Configuration > Sales > Delivery Methods.
  • Expand the Flat Rate section.
  • Set Enabled to Yes.
  • Choose whether to apply the rate per item or per order.
  • Enter the Flat Rate amount and other settings.
  • Click Save Config.
How to Configure Magento 2 Shipping Methods 10

Configure Table Rate Shipping in Magento 2

Table rate shipping uses a matrix of rates based on shipping destination, order subtotal, or item quantity. To configure table rate shipping:

  • Go to Stores > Configuration > Sales > Delivery Methods.
  • Expand the Table Rates section.
  • Set Enabled to Yes.
  • Choose the Condition for table rates (e.g., Weight vs. Destination).
  • Click Export CSV to download the table rate file.
  • Edit the file with your rates and upload it.
  • Click Save Config.
How to Configure Magento 2 Shipping Methods 11

Configure Magento Shipping

Magento Shipping integrates with various carriers to provide a range of shipping options. To configure Magento Shipping:

  • Navigate to Stores > Configuration > Sales > Shipping Methods.
  • Expand the Magento Shipping section.
  • Set Enabled to Yes.
  • Configure the settings for Magento Shipping as needed.
  • Click Save Config.

Configure Dimensional Weight Method in Magento 2

Dimensional weight shipping calculates costs based on the dimensions and weight of the package. To configure this method:

  • Go to Stores > Configuration > Sales > Shipping Methods.
  • Expand the Dimensional Weight section.
  • Set Enabled to Yes.
  • Configure the dimensional weight settings according to your needs.
  • Click Save Config.

Configure Magento 2 Shipping Carriers

Shipping carriers play a crucial role in delivering products to customers. Magento 2 supports several major carriers, including FedEx, UPS, USPS, and DHL. Here’s how to configure each:

FedEx

FedEx is a popular shipping carrier known for its fast and reliable services. To configure FedEx in Magento 2:

  1. Navigate to Stores > Configuration > Sales > Shipping Methods.
  2. Expand the FedEx section.
  3. Set Enabled to Yes.
  4. Enter your FedEx account credentials, including Account Number, Meter Number, Key, and Password.
  5. Configure additional settings, such as Packaging, Dropoff Type, and Handling Fee.
  6. Click Save Config.
How to Configure Magento 2 Shipping Methods 12

UPS

UPS is another leading shipping carrier offering a wide range of shipping options. To configure UPS in Magento 2:

  1. Go to Stores > Configuration > Sales > Shipping Methods.
  2. Expand the UPS section.
  3. Set Enabled to Yes.
  4. Enter your UPS account credentials, including Access License Number, User ID, and Password.
  5. Configure additional settings, such as UPS Type, Handling Fee, and Pickup Method.
  6. Click Save Config.
How to Configure Magento 2 Shipping Methods 13

USPS

USPS is a widely used shipping carrier in the United States, offering various shipping options. To configure USPS in Magento 2:

  1. Navigate to Stores > Configuration > Sales > Shipping Methods.
  2. Expand the USPS section.
  3. Set Enabled to Yes.
  4. Enter your USPS account credentials, including User ID and Password.
  5. Configure additional settings, such as Package Size, Handling Fee, and Processing Time.
  6. Click Save Config.
How to Configure Magento 2 Shipping Methods 14

DHL

DHL is an international shipping carrier known for its global reach. To configure DHL in Magento 2:

  1. Go to Stores > Configuration > Sales > Shipping Methods.
  2. Expand the DHL section.
  3. Set Enabled to Yes.
  4. Enter your DHL account credentials, including Access ID, Password, and Account Number.
  5. Configure additional settings, such as Shipping Method, Handling Fee, and Ready Time.
  6. Click Save Config.
How to Configure Magento 2 Shipping Methods 15

Magento 2 – How to Use Different Shipping Carriers

You can make use of custom carrier trackers if you wish to employ other shipping carriers.

This is what our M2 custom carrier tracking extension does: allows for easy integration and management of more shipping carriers.

How to Configure Magento 2 Shipping Methods 16

Additionally, this extension provides flexibility for shipping options by enabling additional default carrier options not covered in Magento 2 out-of-the-box features. It has a user-friendly interface which makes it easy for you to configure these carriers.

This way, you can easily add, manage, and update the carrier information whenever the need arises. The other feature of the extension is that it allows tracking so that customers can monitor their shipments in real time. Moreover, it also supports rate calculation for the carriers added, thereby allowing precise shipping costs during checkout.

Frequently Asked Questions

1. How can I delete a shipping method in Magento 2?

Take the following steps to remove a shipping method:

  • Stores > Configuration > Sales > Shipping Methods.
  • Look for the shipping method you wish to deactivate.
  • Set Enabled to No.
  • Save Config by clicking on it.

2. What is the way of calculating handling fees in Magento 2 Shipping?

Here’s how to add handling fees in Magento 2 Shipping:

  • Stores > Configuration > Sales > Shipping Methods.
  • Choose the desired shipping method where you want to include handling fees.
  • Enter the amount of the handling fee.
  • Click Save Config.

3. What should I do if I want to restrict shipping methods by customer groups in Magento 2?

If your goal is to restrict shipping methods by customer group, then follow these instructions:

  • Stores > Configuration > Sales > Shipping Methods.
  • Pick out a particular shipping procedure that you would like to be limited to only certain groups of customers.
  • Choose one of the allowed customer groups from the drop-down list under the Allowed Customer Groups option below this setting.
  • Finally, save the configuration.

Optimize Your Shipping Strategy Today!

Now that you know how to configure Magento 2 shipping methods, you can provide flexible and efficient delivery options for your customers. You can improve the performance of your store and customer satisfaction by knowing how these methods work

How to Create a Custom Widget in Magento 2

 

Basically, Magento widget is a Magento extension with definite functionality in your store.

The default Magento supports the following types of widget:

  • categories
  • tag cloud
  • navigation menu
  • calendar
  • search
  • recent posts, etc.

The Magento widgets assist in better user experience and functionality of the store. Apart from these default widgets and its functionality, you may need advanced features. Creating a custom widget in Magento 2 is like developing an independent extension. Customize a widget to extend the functionality of the core widgets or create your own custom widget in Magento 2.

Widgets are useful in the administration to add interactive interfaces and features in the front-end of Magento 2 store. Learn how to create a custom widget in Magento 2 by following the steps assembled here.

Code to Create Custom Widget in Magento 2:

File setup/Our module

Initially, we need to create the module setup file.

Create file app/code/Meeta/CustomWidget/etc/module.xml. Paste the following code snippet in that file.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Meetanshi_CustomWidget" setup_version="1.0.0">
</module>
</config>

Widget Declaration File

Create the widget file app/code/Meeta/CustomWidget/etc/widget.xml with content.

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Magento/Widget/etc/widget.xsd">
<widget id="meetanshi_customwidget" class="Meetanshi\CustomWidget\Block\Widget\ContactInformations">
<label translate="true">Contact Informations Widget</label>
<description>Widget in Magento2</description>
<parameters>
<parameter name="fullname" xsi:type="text" visible="true" sort_order="0" >
<label translate="true">Full Name</label>
</parameter>
<parameter name="age" xsi:type="text" visible="true" sort_order="10" >
<label translate="true">Age</label>
</parameter>
<parameter name="gender" xsi:type="select" source_model="Meetanshi\CustomWidget\Model\Config\Source\Gender" visible="true" sort_order="10" >
<label translate="true">Gender</label>
</parameter>
</parameters>
</widget>
</widgets>

The first code:

  • Declare our widget with the unique identification is meetanshi_customwidget and the class attribute is used to map to widget file app/code/Meeta/CustomCode/Block/Widget/ContactInformations.php
  • The field description will show description, introduce about module when created.
  • We need to declare all the option of module inside the field tag“parameters”
  • And the source_model attribute maps to the model file app/code/Meetanshi/CustomWidget/Model/Config/Source/Gender.php, where we’ll get our options for the drop-down.

To create the model file:

app/code/Meeta/CustomWidget/Model/Config/Source/Gender.php

<?php
namespace Meetanshi\CustomWidget\Model\Config\Source;
class Gender implements \Magento\Framework\Option\ArrayInterface
{
public function toOptionArray()
{
return [
['value' => 'mal', 'label' => __('Male')],
['value' => 'female', 'label' => __('Female')]];
}
}

To create the block file:

Meeta\CustomWidget\Block\Widget\ContactInformations  is declared in the above code snippet. In this file, we assign custom template file inside _toHtml() method

<?php
namespace Meetanshi\CustomWidget\Block\Widget;
class ContactInformations extends \Magento\Framework\View\Element\Template implements \Magento\Widget\Block\BlockInterface
{
public function _toHtml()
{
$this->setTemplate('widget/contact_informations.phtml');
}
}

To create the template file

<?php
$fullname = $this->getData('fullname');
$age = $this->getData('age');
$gender = $this->getData('gender');
?>
<ul>
<?php if($fullname){ ?>
<li><?php echo $fullname ?></li>
<?php } ?>
<?php if($age){ ?>
<li><?php echo $age ?></li>
<?php } ?>
<?php if($gender){ ?>
<li>
<?php if($gender){
echo __('Male')
}else{
echo __('Female');
} ?>
</li>
<?php } ?>
</ul>
  • Meeta\CustomWidget\view\frontend\widget\contact_informations.phtml – which will show all widget data on site.
  • You need to clear all the caches from the backend of Magento or delete folder var/cache.
  • Now, go to Administrator Page => Content => Pages and add a new Page using Add New page button, then click Widget icon in Content Tab and you need fill information for all fields.
  • Save CMS page and go to the front end of page to check your widget.

A Magento 2 store needs a lot of features to function smoothly and to attract more visitors. Having an appealing user experience is essential in E-commerce and that’s where widgets come into the picture!