Creating a Custom WooCommerce Order Received Page with JupiterX

Designing a personalized 'Order Received' page for your WooCommerce store adds a professional touch and enhances customer experience. Follow this detailed guide to create a custom page using the JupiterX theme's robust tools.

Prerequisites:

Confirm that you have the SellKit and SellKit Pro plugins installed and activated on your website, as these come bundled with JupiterX.

Step 1: Create a New Template

Navigate to JupiterX > Layout Builder > Single .
Click on Add New , input your template name, such as "Order Received Page", and then select Create Template .

Step 2: Add Necessary Widgets

To create a comprehensive 'Thank You' page, you'll need to add several key widgets:

Order Details: Displays individual details of the customer's order.
Order Cart Details: Shows a summary of the items purchased.

Configuring Order Details Content

Accessing the Order Details Settings:

Drag and drop the Order Details widget onto your Elementor canvas.
Click the widget to open the settings panel.

Adding and Customizing Order Detail Items:

In the 'Order Details items' section, click 'Add Item' to include a new detail about the order.
Click the pencil icon or the item to configure it.
Select 'Type' from the dropdown menu, which includes 'Order Number', 'Order Status', and more.
Assign a 'Title' for your detail that will appear as its label.
Click the icon placeholder to add an icon next to the detail item.
Use 'Item Width' dropdown to set the detail item's width for responsive design.

General Settings:

Under 'Settings', provide a 'Heading' for your order details section.

Styling Order Details

Accessing Style Settings:

Switch to the 'Style' tab to access styling options for your Order Details.

Box Styling:

Use the color palette to choose a background color.
Select a border type such as solid, dotted, or dashed.
Determine the border radius for box corners. Unlink corners for individual radii.
Apply a box shadow, configuring color and dimensions.
Set padding to adjust space inside the box.
Adjust margin values for the box's positioning.

Styling Individual Order Details Items

Heading Styling:

Use the pencil icon for typography settings like font family, weight, and letter spacing.
Pick a text color from the color palette.
Manage top, right, bottom, and left margins if necessary.

Icon Styling:

Adjust icon size with the slider.
Choose an icon color.
Set the space between the icon and text.

Data Styling:

With the pencil icon, modify typography settings for order details.
Decide on text color.
Manage margins around text details.

Configuring Order Cart Details Content

Accessing the Order Cart Details Settings:

Place the Order Cart Details widget on your Elementor canvas.
Click to open the settings.

Details:

Enable a heading with a toggle and assign a 'Label'.
Show the cart items and product thumbnails as needed.

Styling Order Cart Details Box

Choose a background color or input a hex code.
Select a border style from the dropdown.
Configure border radius for roundness of box corners.
Apply and customize box shadow.
Set margin around the box.
Adjust padding inside the box.

Cart Items

Thumbnail:

Specify thumbnail width and height.
Set border radius for thumbnails.
Select a border type.

Product Title and Price:

Tweak the typography including font family, size, and color.
Ensure the title and price are easily readable and resonate with your site's design.

When finalizing typography and color selections, bear in mind the importance of maintaining ease of readability and alignment with your website's overall style. Utilize colors that not only match your brand but also cater to inclusivity and accessibility standards.

Remember, the look and functionality of your 'Order Received' page are not just about aesthetics; they are part of the shopping experience. Take the time to personalize this page, ensuring consistency with your brand and leaving customers with a positive final impression of your store.

Adding Shortcodes for Personalization

To further enhance the personalization of your 'Order Received' page, you can make use of shortcodes. Shortcodes are small snippets that can be inserted into your page content to add dynamic, personalized data like customer information or specifics about their order.

Keywords Shortcode Examples:

Here are some shortcodes available for you to use in your Order Received page:

Customer Email: [sellkit-customer-email]
Customer First Name: [sellkit-customer-first-name]
Customer Full Name: [sellkit-customer-full-name]
Customer Last Name: [sellkit-customer-last-name]
Customer Phone: [sellkit-customer-phone]
Customer Provided Note: [sellkit-customer-provided-note]
Customer User Id: [sellkit-customer-user-id]
Order Billing Address: [sellkit-order-billing-address]
Order Billing Country: [sellkit-order-billing-country]
Order Date: [sellkit-order-date]
Order Item Count: [sellkit-order-items-count]
Order Number: [sellkit-order-number]
Order Payment Method: [sellkit-order-payment-method]
Order Shipping Address: [sellkit-order-shipping-address]
Order Shipping Method: [sellkit-order-shipping-method]
Order Status: [sellkit-order-status]
Order Total: [sellkit-order-total]

These shortcodes help you display dynamic information that is specific to each customer and their order, making the page more engaging and relevant to them.

Final Steps:

After customizing your 'Order Received' page with shortcodes and ensuring the design is to your liking:

Click Publish to save and apply your changes.
Set the display condition to target WooCommerce's Checkout Page by choosing WooCommerce -> Order Received Page .

Pro Tip: Test your 'Order Received' page by placing a test order to ensure that all personalized data is displaying correctly and that the page's overall aesthetic aligns with your brand’s style and vision.

Creating a unique and personalized 'Order Received' page not only enriches your customers' post-purchase experience but also distinguishes your WooCommerce store with a touch of personal care that customers will remember and appreciate.