help center

On this page

WooCommerce Purchase Summary widget

Last Update: December 5, 2023

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

summary widget WooCommerce Purchase Summary widget 1
WooCommerce Purchase Summary widget 35

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

Summary Controls WooCommerce Purchase Summary widget 3
WooCommerce Purchase Summary widget 36

Confirmation Message

comfirmationmessage WooCommerce Purchase Summary widget 5
WooCommerce Purchase Summary widget 37
  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

paymentdetails WooCommerce Purchase Summary widget 7
WooCommerce Purchase Summary widget 38

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

bankdetails WooCommerce Purchase Summary widget 9
WooCommerce Purchase Summary widget 39
  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

downloads WooCommerce Purchase Summary widget 11
WooCommerce Purchase Summary widget 40
  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

order summary WooCommerce Purchase Summary widget 13
WooCommerce Purchase Summary widget 41
  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

billing details WooCommerce Purchase Summary widget 15
WooCommerce Purchase Summary widget 42
  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

shipping address WooCommerce Purchase Summary widget 17
WooCommerce Purchase Summary widget 43
  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.

preview settings 1 WooCommerce Purchase Summary widget 19
WooCommerce Purchase Summary widget 44
  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

summary style WooCommerce Purchase Summary widget 21
WooCommerce Purchase Summary widget 45

Sections

sectionsstyle WooCommerce Purchase Summary widget 23
WooCommerce Purchase Summary widget 46
  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

typography styles of Summary WooCommerce Purchase Summary widget 25
WooCommerce Purchase Summary widget 47
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

paymentdetailsofsummary WooCommerce Purchase Summary widget 27
WooCommerce Purchase Summary widget 48

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

bankdetailsstyle WooCommerce Purchase Summary widget 29
WooCommerce Purchase Summary widget 49

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

orderdetailsstyles WooCommerce Purchase Summary widget 31
WooCommerce Purchase Summary widget 50

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.

Addsummarytowoopages WooCommerce Purchase Summary widget 33
WooCommerce Purchase Summary widget 51

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article