help center

On this page

WooCommerce Purchase Summary widget

Last Update: January 14, 2024

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

summary widget WooCommerce Purchase Summary widget 1

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

Confirmation Message

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

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
  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
  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
  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
  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
  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
  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

Sections

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

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

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

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

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