The Member Orders element makes it easy for you to show all orders a member has made from you through OptimizeCheckouts based checkout pages and products.
This element is perfect for an orders information screen inside a members or online course portal.
Watch this video to get an overview of the element and how to use it:
To add the Member Orders element to your page, click the + icon either on the top left or in the column you want to add it to. Then drag & drop it into your page. You can search for “Orders” to find this element.
Once you add it to the page, you’ll be able to choose a preset style. More of these will be added later.
After selecting the preset (the default one always loads immediately anyways), you will see the Member Orders toolbar.
It’s quite simple to edit the element to suite your needs. Just click on what you would like to edit, and you’ll be presented with the toolbar for what you click on. For example, if I want to change the background color of the Member Orders element header, I would click on that area, and then choose the background color:
Note that the header texts will show different on mobile, similar to what you see here as the column headers are included with each items text.
You can also change the colors and font styles of all the text in the element. In the image below, I changed the header font color to white, and then on the subscription details I changed the font to Inter, and the size to 18 to make it look more noticeable.
Note that if you are using the Typography settings or presets on this page, then those fonts will load instead of the default IBM Plex Sans font.
You can also edit the Invoice button font and color styles.
Note, that the status button color can not be changed – only the text options can be changed on that one.
In order to preview the Member Orders element, you'll need to be logged in as a member on your site, and that member will need to have a paid order, subscription, or payment plan. All payments are displayed from newest to oldest, with the newest order at the top.
If a member does not have any paid orders, subscriptions, or payment plans, this will trigger the status message to show - as there are not any payments from that member.
To edit the status message, you’ll need to focus the main element by clicking “Member Orders” at the top of the editor like you see here:
Then you’ll be able to click the toggle to edit the status message like this:
If you have any questions about this element that are not covered in the video or written guide on this page, please reach out to our support team and we’ll be happy to help.
