How to Remove Decimals from Quantity in Product Grid in Magento 2?

Today, we’re going to teach you how to remove decimals from your product grid’s quantity in Magento 2.

Magento 2 by default displays the quantity of products with decimal points.

Now, if you want to remove that decimal point from the product admin grid, you’ll have to customize it. And Magento 2 doesn’t provide an option to remove it in its configuration.

So, how can you remove the decimal point from the product grid’s quantity in Magento 2?

In this tutorial, we are going to show you how to programmatically remove the decimals from the product grid’s quantity in Magento 2.

Steps to Remove Decimals from Quantity in Product Grid in Magento 2

Step #1

First of all, you will need to create a simple module. For this, you can follow our tutorial on how to create a simple module in Magento 2.

Once you have created your module, it’s time to modify the module.xml file for adding sequence.

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Created By : MageDelight Pvt. Ltd.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="MD_Helloworld" setup_version="1.0.0">
      <sequence>
         <module name="Magento_CatalogInventory" />
      </sequence>
   </module>
</config>

Step #2

The next step is to create a product_listing.xml file in app/code/MD/Helloworld/Module/view/adminhtml/ui_component/ directory and copy the following code.

<?xml version="1.0" encoding="UTF-8"?>
<!--
/*
 * Creatde By : MageDelight Pvt. Ltd.
 */
-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
   <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
      <column name="qty" class="MD\Helloworld\Ui\Component\Listing\Columns\DecimalRemove">
         <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
               <item name="filter" xsi:type="string">textRange</item>
               <item name="add_field" xsi:type="boolean">true</item>
               <item name="label" xsi:type="string" translate="true">Quantity</item>
               <item name="sortOrder" xsi:type="number">75</item>
            </item>
         </argument>
      </column>
   </columns>
</listing>

Step #3

After that, you will have to add a DecimalRemove.php renderer file in app/code/MD/Helloworld/Ui/Component/Listing/Columns/ directory and copy the following code.

<?php
/**
* Created By : MageDelight Pvt. Ltd.
 */
namespace MD\Helloworld\Ui\Component\Listing\Columns;
class DecimalRemove extends \Magento\Ui\Component\Listing\Columns\Column
{
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items']))
        {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as & $item)
            {
                if (isset($item[$fieldName]))
                {
                    $item[$fieldName] = (int)$item[$fieldName];
                }
            }
        }
        return $dataSource;
    }
}

Step #4

Lastly, you will have to upgrade your module and clean the cache.

Here are the two commands you need to execute:

php bin/magento s:up
php bin/magento c:c

Now, check the output and you’ll see that the decimals have been removed from the product grid’s quantity.

Also read: How to Add a Custom Filter to the Product Grid in Magento 2?

Final Words…

With this, we have come to the end of this tutorial. We hope that you found this tutorial helpful and easy to understand.

If you have any questions, please share them in the comments below. And if you want our professional assistance, feel free to contact us at any time.