We’re on vacation till 19 June. Support replies might be delayed than usual. Thank you for being patient and considerate.

Up to 65% off Early Bird LTD ➜ GutenKit – Gutenberg Page Builder Blocks!


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.

Set checkout template for checkout- order review widget

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.

Edit with elementor for checkout order- review

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.

Drag and drop checkout order review widget

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.
Table header customization of shopengine order review widget

3.2 Table Body #

The table body contains the products and their price.

Table body of shopengine order review widget

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.
Table body customization of shopengine order review widget

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.
Table footer customization of shopengine order review widget

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.

Choose global font of shopengine order review widget

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-

Checkout-order review widget 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.

What are your feelings
Updated on January 28, 2024