Hello Magento Friends,
In Magento 2, customers can view a complete list of their past orders in the Order History page. However, businesses often need to provide various filters for orders to make it even more user-friendly in terms of order status: “Pending,” “Processing,” “Completed,” or “Canceled”. Adding an order status filter to the Order History page will improve usability for the customer dashboard.
Magento 2: Add Track Order link with the Order on Order History Page
How to Get Customer Order History using REST API in Magento 2
This blog shall illustrate the steps to apply order status filtration on Magento 2 Order History Page.
Steps to Apply Order Status Filter on Order History Page in Magento 2:
Step 1: First, we need to create a sales_order_history.xml file inside our extension at the following path
app\code\Vendor\Extension\view\frontend\layout\sales_order_history.xml
Then add the code as follows
<?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="content">
<block class="Vendor\Extension\Block\OrderStatusFilter" template="Vendor_Extension::order_status_filter.phtml"
before="sales.order.history"/>
</referenceBlock>
</body>
</page>Step 2: Now, we need to create a OrderStatusFilter.php file inside our extension at the following path
app\code\Vendor\Extension\Block\OrderStatusFilter.php
Now include the following code
<?php
namespace Vendor\Extension\Block;
use Magento\Framework\View\Element\Template;
use Magento\Sales\Model\ResourceModel\Order\Status\CollectionFactory;
class OrderStatusFilter extends Template
{
protected $statusCollectionFactory;
public function __construct(
Template\Context $context,
CollectionFactory $statusCollectionFactory,
array $data = []
) {
$this->statusCollectionFactory = $statusCollectionFactory;
parent::__construct($context, $data);
}
public function getOrderStatuses()
{
return $this->statusCollectionFactory->create()->toOptionArray();
}
}Step 3: Now, we need to create a order_status_filter.phtml file inside our extension at the following path
app\code\Vendor\Extension\view\frontend\templates\order_status_filter.phtml
After that, include the following code snippet
<?php $orderStatuses = $block->getOrderStatuses();
?>
<form method="get" action="<?= $block->getUrl('*/*/*') ?>">
<select name="order_status" onchange="this.form.submit();" style="width: 20%; margin-left: 80%;">
<option value=""><?= __('Filter by Order Status') ?></option>
<?php foreach ($orderStatuses as $status): ?>
<option value="<?= $status['value'] ?>" <?= ($block->getRequest()->getParam('order_status') == $status['value']) ? 'selected' : '' ?>>
<?= __($status['label']) ?>
</option>
<?php endforeach; ?>
</select>
</form>
Step 4: Now, we need to create a di.xml file inside our extension at the following path
app/code/Vendor/Extension/etc/frontend/di.xml
Then add the following code
<?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\Block\Order\History">
<plugin name="add_custom_status_filter" type="Vendor\Extension\Plugin\OrderHistoryPlugin" />
</type>
</config>Step 5: Now, we need to create a OrderHistoryPlugin.php file inside our extension at the following path
app/code/Vendor/Extension/Plugin/OrderHistoryPlugin.php
Then add the below mentioned code
<?php
namespace Vendor\Extension\Plugin;
use Magento\Framework\View\Element\Template\Context;
use Magento\Sales\Model\ResourceModel\Order\CollectionFactory;
class OrderHistoryPlugin
{
protected $orderCollectionFactory;
public function __construct(
CollectionFactory $orderCollectionFactory
) {
$this->orderCollectionFactory = $orderCollectionFactory;
}
public function aroundGetOrders(\Magento\Sales\Block\Order\History $subject, callable $proceed)
{
$orders = $proceed();
$statusFilter = $subject->getRequest()->getParam('order_status');
if ($statusFilter) {
$orders->addFieldToFilter('status', $statusFilter);
}
return $orders;
}
}
Output:
Now, the customer’s Order History page will include a dropdown filter allowing customers to filter orders by status. Customers can select an order status, and the grid will refresh with the filtered orders.
Conclusion:
Adding an order status filter improves user experience, especially for stores handling a large volume of orders. The above steps help you extend Magento 2’s functionality without altering core files, ensuring your store remains upgrade-safe.
If you need help implementing this feature or customizing your Magento 2 store further, feel free to contact us!
Happy Reading!
