Checkout- Order Review

Checkout- Order Review widget of ShopEngine offers plenty of customization options. You can tweak the table elements like Product, Total, and Subtotal with a number of parameters including color, typography, margin, padding, etc.

How to Use Checkout- Order Review Widget? #

Creating a checkout order review page involves the following steps: 1. Enable the widget, 2. Edit the Checkout template, and 3. Customize the widget.

Step 1: Enable the Order Review widget #

To enable the widget,

1. Navigate to ShopEngine > Widgets.
2. Enable the Order Review widget.
3. Click on the SAVE CHANGES button in the top right corner.

Step 2: Edit the Checkout template #

the Order Review widget works with the ShopEngine Checkout template. Therefore you need to create a template for the checkout page using ShopEngine template builder.

To create a template navigate to ShopEngine > Builder Template > Add new.

Follow the documentation to learn how to create a WooCommece Checkout page with ShopEngine.

If you have the Checkout template created, you can see it at top of the list. Now, click “Edit with Elementor” to switch to the Elementor window.

Step 3: Customize the Checkout Order Review widget #

After that, find the Checkout Order Review widget in the left sidebar. Then drag and drop the widget into the design area.

You can customize the following feature in the widget,

3.1 Table Header #

1. Choose the Text Color.
2. Select the Border Bottom Color.
3. Choose the Border Bottom Shadow Color.
4. Set the Typography for the header.
5. Adjust the header Padding.
6. Adjust the Margin Bottom of the header.

3.2 Table Body #

The table body contains the products and their price.

To customize the table body,

1. Choose a Text Color ( color of product name text).
2. Set a Raw Background color (background color of body section).
3. Choose a Price Color.
4. Select an Item’s Border Color (border color under each item).
5. Select an Items Border Shadow Color.
6. Set the Price Font Weight (Typography of price text).
7. Set the Text Typography.
8. Adjust the Row Padding and Row Space In-between the products.
9. Adjust the product Image Size.

3.3 Table Footer #

1. Select a Text Color.
2. Choose a Price Color for price text.
3. Choose the Row Border Color and Row Border Shadow Color.
4. Set Text Typography.
5. Adjust the Padding for the table footer.

3.4 Global Font #

Choose the font of the order review table from the Global Font section using the parameter Font Family. The text font is set to Default but you can choose your preferred font.

Finally, the Checkout Order Review template is ready. The template is visible when the users proceeds to the checkout.

This is what the order review table looks like on the checkout page-

In this way, you can use our Order Review widget, make necessary modifications and provide a smooth experience to your clients.