WooCommerce Purchase Summary widget

The purchase summary widget is used to create and customize the order confirmation page of WooCommerce. 

Steps To Use

1. Create a new page and give it a title (example: Thank You For Your Order)
2. Publish the page
3. Edit the page with Elementor
4. Drag the Summary widget to the content area
5. Configure the settings and style the sections as desired
6. Publish the changes
7. Assign the page to be used as the WooCommerce Summary Page in Site Settings.

Controls

Content

Confirmation Message

1. Confirmation Message: Use the toggle selector to show/hide the message
2. Message: Enter a message to be displayed in the field provided
3. Alignment: Use the icons to select between left, center, or right alignment values. The responsive icon can be selected to set different values based on the breakpoint.

Payment Details

In the following fields, enter a value or select from the dynamic functions to set the desired name of the payment detail columns:

1. Number
2. Date
3. Email
4. Total
5. Payment

Bank Details

1. Title: Enter text you wish to appear in the field or use the dynamic functions.
2. Alignment: Use the icons to select between left, center, or right alignment values. The responsive icon can be selected to set different values based on the breakpoint.

Downloads

1. Title: Enter text you wish to appear in the field or use the dynamic functions.
2. Alignment: Use the icons to select between left, center, or right alignment values. The responsive icon can be selected to set different values based on the breakpoint.

Order Summary

1. Title: Enter text you wish to appear in the field or use the dynamic functions.
2. Alignment: Use the icons to select between left, center, or right alignment values. The responsive icon can be selected to set different values based on the breakpoint.

Billing Details

1. Title: Enter text you wish to appear in the field or use the dynamic functions.
2. Alignment: Use the icons to select between left, center, or right alignment values. The responsive icon can be selected to set different values based on the breakpoint.

Shipping Address

1. Title: Enter text you wish to appear in the field or use the dynamic functions.
2. Alignment: Use the icons to select between left, center, or right alignment values. The responsive icon can be selected to set different values based on the breakpoint.

Preview Settings

This allows you to choose a preview in order to style the section properly.

1. Preview order with: From the dropdown menu choose between latest order, or order ID
   1. Order ID: If order ID is selected enter the ID of the order you wish to preview in the field

Note: To find an order ID, go to the WP dashboard: WooCommerce > Orders

---

Style

Sections

1. Background Color: From the color picker, choose the background color for your sections. This color will apply to all sections. You may apply a different background color to a section(s) in the Customize options shown below 
2. Box Shadow: Click the pencil icon to set the color and shadow options
3. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
4. Width (border): Enter a chosen value in the fields based on px, em, or %
5. Color (border): From the color picker, choose the background color for your border
6. Border Radius: Enter a chosen value in the fields based on px, em, or %
7. Padding: Enter a chosen value in the fields based on px, em, or %
8. Spacing: Enter a chosen value in the fields based on px, em, or %

Typography

Confirmation Message

1. Color: From the color picker, choose the color for your confirmation message text
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
3. Text Shadow: Click the pencil icon to open the shadow properties options.

Titles

1. Color: From the color picker, choose the color for your title.
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
3. Text Shadow: Click the pencil icon to open the shadow properties options.
4. Spacing: Use the slider to increase or decrease the spacing between components.

General Text

1. Color: From the color picker, choose the color for your text.
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Payment Details

Space Between: Use the slider to increase or decrease the spacing between components.

Titles

1. Color: From the color picker, choose the color for your titles
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
3. Text Shadow: Click the pencil icon to open the shadow properties options.
4. Spacing: Use the slider to increase or decrease the spacing between components.

Items

1. Color: From the color picker, choose the color for your items.
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Dividers

1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
2. Width: Use the slider or manual enter a value in the field (PX, EM, VW)
3. Color: From the color picker, choose the color for your Dividers

Bank Details

Space Between: Use the slider to increase or decrease the spacing between components.

Account Title

1. Color: From the color picker, choose the color for your title.
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
3. Text Shadow: Click the pencil icon to open the shadow properties options.
4. Spacing: Use the slider to increase or decrease the spacing between components.

Titles

1. Color: From the color picker, choose the color for your titles.
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
3. Text Shadow: Click the pencil icon to open the shadow properties options.
4. Spacing: Use the slider to increase or decrease the spacing between components.

Items

1. Color: From the color picker, choose the color for your titles. This color will apply to all titles. You may apply a different color to a title(s) in the Customize options shown below 
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Dividers

1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
2. Width: Use the slider or manual enter a value in the field (PX, EM, VW)
3. Color: From the color picker, choose the color for your Dividers

Order Details

Rows Gap: Use the slider to increase or decrease the spacing between the rows.

Titles and Totals

1. Color: From the color picker, choose the color for your titles.
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
3. Text Shadow: Click the pencil icon to open the shadow properties options.

Items

1. Color: From the color picker, choose the color for your items.
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Variations

1. Color: From the color picker, choose the color for your variations. 
2. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options

Buttons

1. Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
2. Color (Text): From the color picker, choose the color for your button text. 
3. Background Type: Use the icons to choose between a solid or gradient background
4. Color (background): From the color picker, select the color(s) for the button
5. Image: Click to select or upload an image to the media library to use as the background image of your button
6. Box Shadow: Click the pencil icon to open the shadow properties options.

Borders

1. Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved
2. Width (border): Enter a chosen value in the fields based on px, em, or %
3. Color (border): From the color picker, choose the background color for your border
4. Border Radius: Enter a chosen value in the fields based on px, em, or %
5. Padding: Enter a chosen value in the fields based on px, em, or %

Advanced

Global Advanced tab options are available for this widget.

Assigning Page To WooCommerce

Once you have completed your order summary page, you need to assign it to be used by Woocomerce. This can be done by navigating to Site Settings > WooCommerce Pages. From the selectors, assign your new page to the Summary field.