The Orders Component displays a list of customer orders. It is typically used on the My Orders page inside a customer account, or in any template where you need to show order history, order summaries, or filtered order lists.

Activate the component by adding:

data-v-component-orders

The component supports filtering, sorting, pagination, and multisite/multilanguage setups.

Component Options

Options are added as HTML attributes using the data-v-* syntax. These control which orders are loaded and how they are filtered or sorted.

Filtering, Pagination & Sorting

Option Attribute Description Default
start data-v-start Starting offset for pagination 0
limit data-v-limit Number of orders to display; can be a number or url to read from GET 4
order_by data-v-order_by Field to sort by (order_id, created_at, etc.) order_id
direction data-v-direction Sort direction (ASC or DESC) DESC
search data-v-search Search by customer first/last name null

Customer & Identity Filters

Option Attribute Description Default
user_id data-v-user_id Filter by customer ID null
email data-v-email Filter by customer email null
phone_number data-v-phone_number Filter by customer phone null

Order Status Filters

Option Attribute Description Default
order_status data-v-order_status Filter by order status code (e.g., pending) null
order_status_id data-v-order_status_id Filter by order status ID null
payment_status data-v-payment_status Filter by payment status code null
payment_status_id data-v-payment_status_id Filter by payment status ID null
shipping_status data-v-shipping_status Filter by shipping status code (e.g., not_fulfilled) null
shipping_status_id data-v-shipping_status_id Filter by shipping status ID null

Localization & Media

Option Attribute Description Default
language_id data-v-language_id Language for product names, order statuses, descriptions Current language
site_id data-v-site_id Site ID for multisite setups Current site
image_size data-v-image_size Product image size (xlarge, large, medium, thumb) medium

Order Properties

Each order is wrapped in:

data-v-order

Inside it, the following fields are available.

General Order Information

Property Attribute Description
order_id data-v-order-order_id Internal order ID
customer_order_id data-v-order-customer_order_id Public customer‑facing order ID Eg:I-26-03-6-1-UPDQGK9B6EKP-26
invoice_no data-v-order-invoice_no Invoice number
invoice_prefix data-v-order-invoice_prefix Invoice prefix
order-url data-v-order-url URL to the order details page
site_id data-v-order-site_id Site where the order was placed
site_name data-v-order-site_name Site name
created_at data-v-order-created_at Order creation date
updated_at data-v-order-updated_at Last update date
notes data-v-order-notes Customer notes
remote_ip data-v-order-remote_ip Customer IP address
forwarded_for_ip data-v-order-forwarded_for_ip Forwarded IP (proxy)
user_agent data-v-order-user_agent Browser user agent

Customer Information

Property Attribute
user_id data-v-order-user_id
user_group_id data-v-order-user_group_id
first_name data-v-order-first_name
last_name data-v-order-last_name
email data-v-order-email
phone_number data-v-order-phone_number

Billing Address

Property Attribute
billing_first_name data-v-order-billing_first_name
billing_last_name data-v-order-billing_last_name
billing_company data-v-order-billing_company
billing_address_1 data-v-order-billing_address_1
billing_address_2 data-v-order-billing_address_2
billing_city data-v-order-billing_city
billing_post_code data-v-order-billing_post_code
billing_country_id data-v-order-billing_country_id
billing_country data-v-order-billing_country
billing_region data-v-order-billing_region
billing_region_id data-v-order-billing_region_id

Shipping Address

Property Attribute
shipping_first_name data-v-order-shipping_first_name
shipping_last_name data-v-order-shipping_last_name
shipping_company data-v-order-shipping_company
shipping_address_1 data-v-order-shipping_address_1
shipping_address_2 data-v-order-shipping_address_2
shipping_city data-v-order-shipping_city
shipping_post_code data-v-order-shipping_post_code
shipping_country_id data-v-order-shipping_country_id
shipping_region data-v-order-shipping_region
shipping_region_group_id data-v-order-shipping_region_group_id

Payment Information

Property Attribute Description
payment_method data-v-order-payment_method Payment method code
payment_title data-v-order-payment_title Payment method name
payment_status data-v-order-payment_status Payment status
payment_status_id data-v-order-payment_status_id Payment status ID
payment_data data-v-order-payment_data-* Additional payment plugin data

Payment Data Object

Property Attribute
title data-v-order-payment_data-title
description data-v-order-payment_data-description
name data-v-order-payment_data-name
status data-v-order-payment_data-status
region_id data-v-order-payment_data-region_id
region_group_id data-v-order-payment_data-region_group_id
payment_status_id data-v-order-payment_data-payment_status_id
sort_order data-v-order-payment_data-sort_order
tax_type_id data-v-order-payment_data-tax_type_id
cost data-v-order-payment_data-cost
base-weight data-v-order-payment_data-weight

Shipping Information

Property Attribute Description
shipping_method data-v-order-shipping_method Shipping method code
shipping_title data-v-order-shipping_title Shipping method name
shipping_description data-v-order-shipping_description Description
shipping_status data-v-order-shipping_status Shipping status
shipping_status_id data-v-order-shipping_status_id Status ID
shipping_data data-v-order-shipping_data-* Additional shipping plugin data

Shipping Data Object

Property Attribute
title data-v-order-shipping_data-title
description data-v-order-shipping_data-description
name data-v-order-shipping_data-name
region_id data-v-order-shipping_data-region_id
region_group_id data-v-order-shipping_data-region_group_id
shipping_status_id data-v-order-shipping_data-shipping_status_id
sort_order data-v-order-shipping_data-sort_order
tax_type_id data-v-order-shipping_data-tax_type_id
cost data-v-order-shipping_data-cost
base-weight data-v-order-shipping_data-weight

Order Totals

Each total row is wrapped in:

data-v-order-total
Property Attribute Description
namespace data-v-total-namespace Group: tax, coupon, total, etc.
key data-v-total-key Unique key (e.g., tax.1, coupon.3, sub_total)
title data-v-order-total-title Label shown to the user
value data-v-order-total-value Numeric value
value_formatted data-v-order-total-value_formatted Value formatted with currency
text data-v-order-total-text Optional explanatory text

Products List

Each product in the order is wrapped in:

data-v-order-product

Product Properties

Property Attribute Description
name data-v-order-product-name Product name
slug data-v-order-product-slug Product slug
content data-v-order-product-content Full description
excerpt data-v-order-product-excerpt Short description
url data-v-order-product-url Product detail page URL
image data-v-order-product-image Featured image
images data-v-order-product-images Gallery images
quantity data-v-order-product-quantity Quantity in order
price data-v-order-product-price Price without tax
price_tax data-v-order-product-price_tax Price including tax
price_formatted data-v-order-product-price_formatted Price formatted with currency
price_tax_formatted data-v-order-product-price_tax_formatted Price including tax, formatted
old_price data-v-order-product-old_price Price before discount
old_price_tax data-v-order-product-old_price_tax Old price including tax
old_price_tax_formatted data-v-order-product-old_price_tax_formatted Old price formatted
stock_quantity data-v-order-product-stock_quantity Units in stock
stock_status data-v-order-product-stock_status_id Stock status
product_id data-v-order-product-product_id Product ID
product_variant_id data-v-order-product-product_variant_id Variant ID
has_variants data-v-order-product-has_variants Whether product has variants
add_order_url data-v-order-product-add_order_url Add‑to‑order URL
buy_url data-v-order-product-buy_url Direct buy URL
remove_url data-v-order-product-remove_url Remove from order URL
manufacturer_name data-v-order-product-manufacturer_name Manufacturer
vendor_name data-v-order-product-vendor_name Vendor
subscription_name data-v-order-product-subscription_name Subscription plan name
created_at data-v-order-product-created_at Creation date
updated_at data-v-order-product-updated_at Last update
pubDate data-v-order-product-pubDate Publish date (RSS format)
modDate data-v-order-product-modDate Modification date (RSS format)

Product options, variants, and subscription details are also available as nested repeatables.

HTML Example

<div data-v-component-orders data-v-user_id="url">            
<table>
  <thead>
	<tr>
	  <td class="text-center">Order id</td>
	  <td class="text-center">Client</td>
	  <td class="text-center">Status</td>
	  <td class="text-center">Total</td>
	  <td class="text-center">Date added</td>
	  <td class="text-center">Actions</td>
	</tr>
  </thead>

  <tbody>
	<tr data-v-order>
	  <td class="text-center">
		<span>#</span>
		<span data-v-order-order_id></span>
	  </td>

	  <td class="text-center">
		<span data-v-order-first_name data-filter-capitalize>John</span>
		<span data-v-order-last_name data-filter-capitalize>Doe</span>
	  </td>

	  <td class="text-center">
		<span data-v-order-status></span>
	  </td>

	  <td class="text-center">
		<span data-v-order-total>3457.8000</span>
	  </td>

	  <td class="text-center">
		<span data-v-order-created_at data-filter-friendly_date>5 hour ago</span>
	  </td>

	  <td class="text-center">
		<a href="/user/order/UPDQGK9B6EKP-26" title="View" data-v-order-url>
		  <i class="la la-eye"></i>
		</a>
	  </td>
	</tr>                             
  </tbody>
</table>