Orders list
3 min read
How work this Addon?
The Orders list addon is ready to display the WooCommerce Orders list. Just need to activate the addon from the plugin Addons tab and save the settings.
This addon only will work if you use it in a page selected as the WooCommerce account page, so you can use it in the by default WooCommerce account page, removing the by default shortcode [woocommerce_my_Account]Â to avoid conflicts and ensure that it will work correctly.
Also, you can build your custom account page from scratch and assign it as the WooCommerce account page, to do it just need go to: WooCommerce > Settings > Advanced and look for the dropdown menu where you can choose the page as the WooCommerce account page.
You can use this widget directly on the account page with just drag & drop. Although it can also be added in an Elementor template, so that later you can add it where you need, for example as tab content using the Advanced tabs extension.
How to configure the Addon?
This widget includes an option to set the number of orders to display per page, by default it will display 15 orders per page, but with this option you can modify the quantity.
It is also very customizable in terms of styles, it has style options to customize each element individually, as well as:
- General Container
- Table
- Table Header
- Table Content
- Action Buttons
- Pagination
You can also show the message that appears when orders have not yet been placed and thus be able to apply styles to it from the Elementor editor and in real time.
You can configure the container, the icon, the message and the button independently, and you can also hide it so that it is not shown in the editor and keep a less cluttered view when you have finished configuring it.
Also in the same way you can show the details of the order, to be able to apply styles from the Elementor editor and in real time. You can configure everything part by part as well as:
- General Container
- Sections
+ Order status
+ Order details
+ Addresses
Additionally, you can close the order details by clicking on the button in the upper right corner, and you will be redirected to the last point where you were. This button receives the same styles as the link with the product name in the order details table, although you can also apply a custom style with CSS. To do this, you just have to use the class view_order_closebtn
For example:
.view_order_closebtn {
color:red;
}
.view_order_closebtn:hover {
color:blue;
}
Another style that is applied automatically is for the “Order again” button, which receives the same style as the “View” button to view the order details.
In addition, the pagination of the order table will be hidden in the Frontend automatically when the order details are being displayed.
