Purchase Summary Widget

The Purchase Summary widget is used to create and customize the order confirmation page of WooCommerce.

Adding Purchase Summary widget

Add the Purchase Summary widget to the canvas. For details, see Add Elements to a page.

Content tab

Confirmation message

• Confirmation Message: Use the toggle selector to show/hide the message.
• Message: Enter a message to be displayed in the field provided.
• 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: Number, date, email, total and payment.

Bank details

• Title: Enter text you wish to appear in the field or use the dynamic functions.
• 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

• Title: Enter text you wish to appear in the field or use the dynamic functions.
• 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.

Purchase summary

• Title: Enter text you wish to appear in the field or use the dynamic functions.
• 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

• Title: Enter text you wish to appear in the field or use the dynamic functions.
• 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

• Title: Enter text you wish to appear in the field or use the dynamic functions.
• 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 order with: From the dropdown menu choose between latest order or order ID.
• Order ID: If the order ID is selected, enter the ID of the order you wish to preview in the field.

Style tab

Sections

• 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.
• Box Shadow: Click the pencil icon to set the color and shadow options.
  Border type,width, color and radius: Customize the border and radius as per your preferences. For details, see the Border Type and Border Radius guide.
• Spacing: Enter a chosen value in the fields based on px, em, or %.

Typography

Confirmation message

• Color: From the color picker, choose the color for your confirmation message text.
• 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. For details, see Typography.
• Text Shadow: Click the pencil icon to open the shadow properties options.

Titles

• Color: From the color picker, choose the color for your title.
• 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. For details, see Typography.
• Text Shadow: Click the pencil icon to open the shadow properties options.
• Spacing: Use the slider to increase or decrease the spacing between components.

General text

• Color: From the color picker, choose the color for your text.
• 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. For details, see Typography.

Payment details

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

Titles

• Color: From the color picker, choose the color for your titles.
• 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. For details, see Typography.
• Text Shadow: Click the pencil icon to open the shadow properties options.
• Spacing: Use the slider to increase or decrease the spacing between components.

Items

• Color: From the color picker, choose the color for your items.
• 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. For details, see Typography.

Dividers

• Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved.
• Width: Use the slider or manually enter a value in the field (PX, EM, VW).
• 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

• Color: From the color picker, choose the color for your title.
• 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. For details, see Typography.
• Text Shadow: Click the pencil icon to open the shadow properties options.
• Spacing: Use the slider to increase or decrease the spacing between components.

Titles

• Color: From the color picker, choose the color for your titles.
• 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.
• Text Shadow: Click the pencil icon to open the shadow properties options.
• Spacing: Use the slider to increase or decrease the spacing between components.

Items

• 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.
• 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. For details, see Typography.

Dividers

• Border type: From the dropdown menu select between solid, double, dotted, dashed, or grooved.
• Width: Use the slider or manually enter a value in the field (PX, EM, VW).
• 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

• Color: From the color picker, choose the color for your titles.
• 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. For details, see Typography.
• Text Shadow: Click the pencil icon to open the shadow properties options.

Items

• Color: From the color picker, choose the color for your items.
• 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. For details, see Typography.

Variations

• Color: From the color picker, choose the color for your variations.
• 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. For details, see Typography.
• Product Links: Set the color for links in normal and hover states.

Dividers

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

Buttons

• 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. For details, see Typography.
• Color (Text): From the color picker, choose the color for your button text.
• Background Type: Use the icons to choose between a solid or gradient background.
• Color (background): From the color picker, select the color(s) for the button.
• Image: Click to select or upload an image to the media library to use as the background image of your button.
• Box Shadow: Click the pencil icon to set the color and shadow options.
• Border type, width, color and radius: Customize the border and radius as per your preferences. For details, see the Border Type and Border Radius guide.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.