How To

How to Add Custom Column for New Order Select Product Grid in Magento 2

Hello Magento Friends,

In today’s Magento tutorial we will learn about How to Add Custom Column for New Order Select Product Grid in Magento 2.

At the time of order creation in Magento 2, the product grid contains columns related to product information. You can create a Magento 2 custom product grid by adding the required column.

Let’s learn How to Add Custom Column for New Order Select Product Grid in Magento 2.

Steps to Add Custom Column for New Order Select Product Grid in Magento 2:

Step 1: Add layout file sales_order_create_index.xml in your extension at the below path

app/code/Vendor/Extension/view/adminhtml/layout/sales_order_create_index.xml

Add the code as follows

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance dc" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock class="Magento\Sales\Block\Adminhtml\Order\Create\Items\Grid" template="Vendor_Extension::order/create/items/grid.phtml" name="items_grid" />
</page>

Step 2: Override the phtml file from the vendor path

vendor/magento/module-sales/view/adminhtml/templates/order/create/items/grid.phtml 

And add phtml file grid.phtml at below path 

app/code/Vendor/Extension/view/adminhtml/templates/order/create/items/grid.phtml 

And replace the section from the vendor to the below code

<table class="data-table admin__table-primary order-tables">
            <thead>
                <tr class="headings">
                    <th class="col-product"><span><?= $block->escapeHtml(__('Product')) ?></span></th>
                    <th class="col-price"><span><?= $block->escapeHtml(__('Price')) ?></span></th>
                    <th class="col-qty"><span><?= $block->escapeHtml(__('Qty')) ?></span></th>
                    <th class="col-subtotal"><span><?= $block->escapeHtml(__('Subtotal')) ?></span></th>
                    <th class="col-discount"><span><?= $block->escapeHtml(__('Discount')) ?></span></th>
                    <th class="col-row-total"><span><?= $block->escapeHtml(__('Row Subtotal')) ?></span></th>
                    <th class="col-row-customefield"><span><?= $block->escapeHtml(__('Custome Item')) ?></span></th>
                    <th class="col-action"><span><?= $block->escapeHtml(__('Action')) ?></span></th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td class="col-total"><?= $block->escapeHtml(__('Total %1 product(s)', count($_items))) ?></td>
                    <td colspan="2" class="col-subtotal"><?= $block->escapeHtml(__('Subtotal:')) ?></td>
                    <td class="col-price">
                        <strong><?= /* @noEscape */ $block->formatPrice($block->getSubtotal()) ?></strong>
                    </td>
                    <td class="col-price">
                        <strong><?= /* @noEscape */ $block->formatPrice($block->getDiscountAmount()) ?></strong>
                    </td>
                    <td class="col-price">
                        <strong><?= /* @noEscape */ $block->formatPrice($block->getSubtotalWithDiscount()); ?></strong>
                    </td>
                    <td colspan="2">&nbsp;</td>
                </tr>
            </tfoot>
                <?php $i = 0 ?>
                <?php foreach ($_items as $_item): $i++ ?>
                <tbody class="<?= /* @noEscape */ ($i%2) ? 'even' : 'odd' ?>">
                    <tr>
                        <td class="col-product">
                            <span id="order_item_<?= (int) $_item->getId() ?>_title"><?=
                                $block->escapeHtml($_item->getName()) ?></span>
                            <div class="product-sku-block">
                                <span><?= $block->escapeHtml(__('SKU')) ?>:</span>
                                <?= /* @noEscape */ implode(
                                    '<br />',
                                    $catalogHelper->splitSku($block->escapeHtml($_item->getSku()))
                                ) ?>
                            </div>
                            <div class="product-configure-block">
                                <?= $block->getConfigureButtonHtml($_item) ?>
                            </div>
                        </td>
                        <td class="col-price">

                            <?= $block->getItemUnitPriceHtml($_item) ?>

                            <?php $_isCustomPrice = $block->usedCustomPriceForItem($_item) ?>
                            <?php if ($_tier = $block->getTierHtml($_item)): ?>
                            <div id="item_tier_block_<?= (int) $_item->getId() ?>">
                                <a href="#"><?= $block->escapeHtml(__('Tier Pricing')) ?></a>
                                <div id="item_tier_<?= (int) $_item->getId() ?>"><?= /* @noEscape */ $_tier ?></div>
                                <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
                                    "display:none",
                                    'div#item_tier_' . (int) $_item->getId()
                                ) ?>
                            </div>
                                <?php if ($_isCustomPrice): ?>
                                    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
                                        "display:none",
                                        'div#item_tier_block_' . (int) $_item->getId()
                                    ) ?>
                                <?php endif; ?>
                                <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
                                    'onclick',
                                    "$('item_tier_" . (int) $_item->getId() ."').toggle();event.preventDefault();",
                                    'div#item_tier_block_' . (int) $_item->getId() . ' a'
                                ) ?>
                            <?php endif; ?>
                            <?php if ($block->canApplyCustomPrice($_item)): ?>
                                <div class="custom-price-block">
                                    <input type="checkbox"
                                           class="admin__control-checkbox"
                                           id="item_use_custom_price_<?= (int) $_item->getId() ?>"
                                           <?php if ($_isCustomPrice): ?> checked="checked"<?php endif; ?> />
                                    <label
                                        class="normal admin__field-label"
                                        for="item_use_custom_price_<?= (int) $_item->getId() ?>">
                                        <span><?= $block->escapeHtml(__('Custom Price')) ?>*</span></label>
                                    <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
                                        'onclick',
                                        "order.toggleCustomPrice(this, 'item_custom_price_" . (int) $_item->getId() .
                                        "', 'item_tier_block_" . (int) $_item->getId() . "');",
                                        'input#item_use_custom_price_' . (int) $_item->getId()
                                    ) ?>
                                </div>
                            <?php endif; ?>
                            <input id="item_custom_price_<?= (int) $_item->getId() ?>"
                                name="item[<?= (int) $_item->getId() ?>][custom_price]"
                                value="<?= /* @noEscape */ sprintf("%.2f", $block->getOriginalEditablePrice($_item)) ?>"
                                <?php if (!$_isCustomPrice): ?>
                                disabled="disabled"
                                <?php endif; ?>
                                class="input-text item-price admin__control-text"/>
                            <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
                                "display:none",
                                'input#item_custom_price_' . (int) $_item->getId()
                            ) ?>
                        </td>
                        <td class="col-qty">
                            <input name="item[<?= (int) $_item->getId() ?>][qty]"
                                   class="input-text item-qty admin__control-text"
                                   value="<?= (float) $_item->getQty() ?>"
                                   maxlength="12" />
                        </td>
                        <td class="col-subtotal col-price">
                            <?= $block->getItemRowTotalHtml($_item) ?>
                        </td>
                        <td class="col-discount col-price">
                            <?= /* @noEscape */ $block->formatPrice(-$_item->getTotalDiscountAmount()) ?>
                            <div class="discount-price-block">
                                <input id="item_use_discount_<?= (int) $_item->getId() ?>"
                                       class="admin__control-checkbox"
                                       name="item[<?= (int) $_item->getId() ?>][use_discount]"
                                       <?php if (!$_item->getNoDiscount()): ?>checked="checked"<?php endif; ?>
                                       value="1"
                                       type="checkbox" />
                                <label
                                    for="item_use_discount_<?= (int) $_item->getId() ?>"
                                    class="normal admin__field-label">
                                    <span><?= $block->escapeHtml(__('Apply')) ?></span></label>
                            </div>

                        </td>
                        <td class="col-price col-row-subtotal">
                            <?= $block->getItemRowTotalWithDiscountHtml($_item) ?>
                        </td>
                        <td class="col-customfield col-row-customefield">
                            <?php echo "custom file value"; ?>
                        </td>
                        <td class="col-actions last">
                            <select class="admin__control-select" name="item[<?= (int) $_item->getId() ?>][action]">
                                <option value=""><?= $block->escapeHtml(__('Please select')) ?></option>
                                <option value="remove"><?= $block->escapeHtml(__('Remove')) ?></option>
                                <?php if ($block->getCustomerId() && $block->getMoveToCustomerStorage()): ?>
                                    <option value="cart"><?= $block->escapeHtml(__('Move to Shopping Cart')) ?></option>
                                    <?php if ($block->isMoveToWishlistAllowed($_item)): ?>
                                        <?php $wishlists = $block->getCustomerWishlists();?>
                                        <?php if (count($wishlists) <= 1): ?>
                                            <option value="wishlist"><?= $block->escapeHtml(__('Move to Wish List')) ?>
                                            </option>
                                        <?php else: ?>
                                            <optgroup label="<?= $block->escapeHtml(__('Move to Wish List')) ?>">
                                                <?php foreach ($wishlists as $wishlist):?>
                                                    <option value="wishlist_<?= (int) $wishlist->getId() ?>">
                                                        <?= $block->escapeHtml($wishlist->getName()) ?>
                                                    </option>
                                                <?php endforeach;?>
                                            </optgroup>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                <?php endif; ?>
                            </select>
                        </td>
                    </tr>

                    <?php $hasMessageError = false; ?>
                    <?php foreach ($_item->getMessage(false) as $messageError): ?>
                        <?php if (!empty($messageError)):
                            $hasMessageError = true;
                        endif; ?>
                    <?php endforeach; ?>

                    <?php if ($hasMessageError): ?>
                        <tr class="row-messages-error">
                            <td colspan="100"> <!-- ToDo UI: remove the 100 -->
                                <?php foreach ($_item->getMessage(false) as $message):
                                    if (empty($message)) {
                                        continue;
                                    }
                                    ?>
                                    <div class="message <?php if ($_item->getHasError()): ?>message-error<?php else:
                                        ?>message-notice<?php endif; ?>">
                                        <?= $block->escapeHtml($message) ?>
                                    </div>
                                <?php endforeach; ?>
                            </td>
                        </tr>
                    <?php endif;?>

                    <?= $block->getItemExtraInfo($_item)->toHtml() ?>
                </tbody>
                <?php endforeach; ?>
</table>

Conclusion:

This way you can Add Custom Column for New Order Select Product Grid in Magento 2. You can also Add a Custom Filter to the Product Grid in Magento 2. If you have any doubt, let me know through the comment section. Share the solution with your friends and stay updated for more tutorials.

Happy Coding!

Click to rate this post!
[Total: 3 Average: 5]
Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏

View Comments

  • Nice work Dhiren. I'm trying to use this, but when clicking Add Product, new Custom value column is not being shown. It is being shown only when refreshing page. Any idea how to fix this.

    • Kindly check, if there is any error show on the console for this one? Possible it conflict with other things into system.

Recent Posts

How to Delete Product Variant in a Shopify Remix App using GraphQL Mutations?

Managing a Shopify store efficiently involves keeping your product catalog organized. This includes removing outdated…

13 hours ago

6 Innovative Tools Revolutionizing E-Commerce Operations

E-commerce has transformed the way consumers shop for products and services and interact with businesses.…

3 days ago

How Upcoming Cookie Changes Will Affect Your E-commerce Website?

The e-commerce world is constantly in flux. New tech and strategies emerge daily to help…

3 days ago

Magento 2: How to Add Header and Footer in Checkout

Hello Magento Friends, In today’s blog, we will discuss adding a header and footer to…

4 days ago

Understanding Flexbox Layout in React Native

Hello React Native Friends, Building a visually appealing and responsive mobile app is crucial in…

6 days ago

HYVÄ Themes Releases: 1.3.6 & 1.3.7 – What’s New

We have brought exciting news for Magento store owners. Hyvä Themes recently released 1.3.6 and…

6 days ago