The Order Component renders the full details of a customer order, including products, totals, billing and shipping information, payment and shipping methods, and metadata such as order status and timestamps. It is typically used on order‑detail pages, customer account pages, and order‑confirmation pages.

Activate the component by adding:

data-v-component-order

Component Options

Options are added as HTML attributes using the data-v-* syntax.

Option Attribute Description Default
order_id data-v-order_id Load an order by internal order ID. If set to url, the ID is taken from the GET parameter. null
customer_order_id data-v-customer_order_id Load an order by customer‑facing order ID (randomized for privacy). If set to url, it is taken from the GET parameter. null
email data-v-email Filter orders by customer email. null
language_id data-v-language_id Language for product names, order statuses, and descriptions. Current language
image_size data-v-image_size Product image size: xlarge, large, medium, thumb. If omitted, site settings are used. medium

These options allow the component to load the correct order based on ID, customer order ID, or email, and to adapt to multilingual or multisite setups.

Order Properties

The component exposes a wide set of order‑level fields. These can be used to display order metadata, customer details, billing and shipping addresses, payment and shipping information, and totals.

General Order Information

Property Attribute Description
order_id data-v-order-order_id Internal order ID
invoice_no data-v-order-invoice_no Invoice number Eg:I-26-03-6-1-UPDQGK9B6EKP-26
customer_order_id data-v-order-customer_order_id Public order ID shown to customers Eg:UPDQGK9B6EKP-26
invoice_prefix data-v-order-invoice_prefix Invoice prefix
site_id data-v-order-site_id Site where the order was placed
site_name data-v-order-site_name Site name
user_id data-v-order-user_id Customer ID
user_group_id data-v-order-user_group_id Customer group ID
email data-v-order-email Customer email
phone_number data-v-order-phone_number Customer phone number
order_status data-v-order-order_status Order status (e.g., pending, processing)
order_status_id data-v-order-order_status_id Order status ID
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

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

HTML Example

<div data-v-customer_order_id="url" data-v-component-order>

	<h2>Order ID: <span data-v-order-customer_order_id>UPDQGK9B6EKP-26</span></h2>

	  <table data-v-cart>
		<thead>
		  <tr>
			<th>Image</th>
			<th>Product Name</th>
			
			<th>Quantity</th>
			<th>Unit Price</th>
			<th>Total</th>
		  </tr>
		</thead>
		<tbody>
		  <tr data-v-order-product data-product_id="15">
			<td>
			  <a href="http://vvveb.net/product/product-fifteen" data-v-order-product-url>
				<img src="http://vvveb.net/image-cache/demo/products/5-1-150x0_s.jpg" alt="Product name" data-v-order-product-image width="50" loading="lazy">
			  </a>
			</td>
			<td>
			  <a href="http://vvveb.net/product/product-fifteen" target="_blank" data-v-order-product-url>
				<span data-v-order-product-name>Product 15</span>
			  </a>

			  
			  <div>
				<span data-v-order-product-price_tax_formatted>$100</span>
			  </div>
			</td>

			
			<td>
			  <span data-v-order-product-quantity>1</span>
			</td>
			<td>
			  <span data-v-order-product-price_formatted></span>
			</td>
			
			<td>
			  <span data-v-order-product-tax_formatted>$2,561.00</span>
			</td>
		  </tr>             
		 </tbody>

		<tfoot data-v-order-totals>
		  <tr data-v-order-totals-total>
			<td colspan="4">
			  <small data-v-order-total-title>Sub-total</small>:
			</td>
			<td data-v-order-total-value_formatted>$3,000.00</td>
		  </tr><tr data-v-order-totals-total>
			<td colspan="4">
			  <small data-v-order-total-title>-10% Discount</small>:
			</td>
			<td data-v-order-total-value_formatted>$-384.20</td>
		  </tr><tr data-v-order-totals-total>
			<td colspan="4">
			  <small data-v-order-total-title>Fast courier</small>:
			</td>
			<td data-v-order-total-value_formatted>$0.00</td>
		  </tr><tr data-v-order-totals-total>
			<td colspan="4">
			  <small data-v-order-total-title>VAT (9%)</small>:
			</td>
			<td data-v-order-total-value_formatted>$270.00</td>
		  </tr><tr data-v-order-totals-total>
			<td colspan="4">
			  <small data-v-order-total-title>Green tax (1.00)</small>:
			</td>
			<td data-v-order-total-value_formatted>$2.00</td>
		  </tr><tr data-v-order-totals-total>
			<td colspan="4">
			  <small data-v-order-total-title>VAT (19%)</small>:
			</td>
			<td data-v-order-total-value_formatted>$570.00</td>
		  </tr>                  
		  
		  
		  <tr>
			<td colspan="4">Total:</td>
			<td data-v-order-total_formatted>$3,457.80</td>
		  </tr>
		</tfoot>

	  </table>

	


	<div data-v-order>

	  <div>
		  <span data-v-order-order_status>pending</span>
	  </div>
	  
	  <div>
		<div class="row">
		  <div class="col-6">

			  <div>
				<div>
				  <h6>Customer Details</h6>
				</div>
				<div>
				  <div data-v-order-first_name data-first_name-text>John</div>
				  <div data-v-order-last_name data-last_name-text>Doe</div>
				  <div data-v-order-email data-email-text>johndoe@example.com</div>
				  <div data-v-order-phone_number data-phone_number-text>12345678</div>
				</div>
			  </div>
			  
		  </div>
		  <div class="col-6">
			  <div>
				<div>
				  <h6>Order Details</h6>
				</div>

				<div>
					<table>
					<tbody><tr>
					  <td>
						<span>Order ID:</span>
					  </td>
					  <td>
						<span data-v-order-order_id>6</span>
					  </td>
					</tr>
					
					<tr>
					  <td>
						<span>Order Date:</span>
					  </td>
					  <td>
						<details>
						  <summary>
							<span>
							  <span data-v-order-created_at data-filter-friendly_date>1 hour from now</span>
						  </span></summary>
						  <p>
							<span data-v-order-created_at>2026-03-26 16:00:25</span>
							
						  </p>
						</details>
					  </td>
					</tr>
					<tr>
					  <td>
						<span>Payment method:</span>
					  </td>
					  <td>
						<details>
						  <summary>
							<span>
							  <span data-v-order-payment_title>Cash on delivery</span>
						  </span></summary>
						  <p>
							<span data-v-order-payment_method>cash-on-delivery</span>
							
							<br>
							<span data-v-order-payment_description>Cash on delivery</span>
							<br>
						  </p>
						</details>
					  </td>
					</tr>
					<tr>
					  <td>
						<span>Shipping method:</span>
					  </td>
					  <td>
						<details>
						  <summary>
							<span data-v-order-shipping_title>Fast courier</span>
						  </summary>

						  <p>
							<span data-v-order-shipping_method>fast-courier</span>
							
							<br>
							<span data-v-order-shipping_description>Fast courier</span>
							<br>
						  </p>
						</details>
					  </td>
					</tr>
					<tr>
					  <td>
						<span>Order Total:</span>
					  </td>
					  <td>
						<span data-v-order-total_formatted>$3,457.80</span>
					  </td>
					</tr>
					<tr>
					  <td>
						<span>Reward points:</span>
					  </td>
					  <td>
						<span data-v-order-points></span>
					  </td>
					</tr>
					<tr><td>
					  <span>Status</span>
					</td>
					<td>
					  <span data-v-order-order_status>pending</span>
					  
					</td>
					
				  </tr></tbody></table>
				  
				</div>

			  </div>
		  </div>
		  <div class="col-6">

			  <div>
				<h6>Billing Address</h6>
				<div>
				  <div data-v-order-billing_first_name data-billing_first_name-text>John</div>
				  <div data-v-order-billing_last_name data-billing_last_name-text>Doe</div>
				  <div data-v-order-billing_company data-billing_company-text></div>
				  <div data-v-order-billing_address_1 data-billing_address_1-text>test test</div>
				  <div data-v-order-billing_address_2 data-billing_address_2-text>test</div>
				  <div data-v-order-billing_city data-billing_city-text>asdsad</div>
				  <div data-v-order-billing_post_code data-billing_post_code-text>1223</div>
				  <div data-v-order-billing_country data-billing_country_id>United States</div>
				  <div data-v-order-billing_region data-billing_region>Alaska</div>

			  </div>

			</div>
		  </div>
		  <div class="col-6">

			  <div>
				<h6>Shipping Address</h6>
				<div>
				  <div data-v-order-shipping_first_name data-shipping_first_name-text>John</div>
				  <div data-v-order-shipping_last_name data-shipping_last_name-text>Doe</div>
				  <div data-v-order-shipping_company data-shipping_company-text></div>
				  <div data-v-order-shipping_address_1 data-shipping_address_1-text>test test</div>
				  <div data-v-order-shipping_address_2 data-shipping_address_2-text>test</div>
				  <div data-v-order-shipping_city data-shipping_city-text>asdsad</div>
				  <div data-v-order-shipping_post_code data-shipping_post_code-text>1223</div>
				  <div data-v-order-shipping_country data-shipping_country_id-text>United States</div>
				  <div data-v-order-shipping_region data-shipping_region_id-text>Alaska</div>

			  </div>

			</div>
		  </div>
		</div>
	  </div>

	</div>


  </div>