Purchase Summary Widget

Use the widget to show the summary of the purchased items.

Content

Confirmation Message

purchase-summary-confirmation-message

Slide to YES to enable Confirmation Message. Add the needed Message and choose its Alignment between Start, Center and End for desktop, tablet and mobile.

Payment Details

purchase-summary-payment-details

Add the needed labels for Number, Date, Email, Total and Payment fields.

Bank Details

purchase-summary-bank-details

Title: Add the needed title here.

Alignment: Choose between Start, Center and End alignment for desktop, tablet and mobile.

Downloads

purchase-summary-downloads

Title: Add the needed title here.

Alignment: Choose between Start, Center and End alignment for desktop, tablet and mobile.

Purchase Summary

purchase-summary-style-purchase-summary

Title: Add the needed title here.

Alignment: Choose between Start, Center and End alignment for desktop, tablet and mobile.

Billing Details

purchase-summary-billing-detailss

Title: Add the needed title here.

Alignment: Choose between Start, Center and End alignment for desktop, tablet and mobile.

Shipping Details

purchase-summary-shipping-address

Title: Add the needed title here.

Alignment: Choose between Start, Center and End alignment for desktop, tablet and mobile.

Preview Settings

purchase-summary-preview-settings

Choose how to preview order. The choice is between Latest Order and Order ID.

Style

Sections

purchase-summary-style-sections

Background Color: Choose sections background color.

Border Color: Set border color.

Padding: Set paddings for desktop, tablet and mobile.  

Border Radius: Set a border radius for desktop, tablet and mobile.

Border Type: Choose the desired border type from the dropdown and set it.

Box Shadow: Choose desired settings from the dropdown.

Titles

Spacing: Set spacing between titles and content for desktop, tablet and mobile.

Typography

purchase-summary-typograrhy

Confirmation Message

Typography: Set a Typography using settings from the dropdown.

Color: Choose the confirmation message color.

Text Shadow: Choose desired settings from the dropdown.

Titles

Typography: Set a Typography using settings from the dropdown.

Color: Choose the titles’ color.

Text Shadow: Choose desired settings from the dropdown.

General Text

Typography: Set a Typography using settings from the dropdown.

Color: Choose the text color.

Payment Details

Gap: Set a gap between confirmation message and payment details for desktop, tablet and mobile.

Space Between: Set a space between payment details fields for desktop, tablet and mobile.

Titles

Typography: Set a Typography using settings from the dropdown.

Color: Choose the titles’ color.

Text Shadow: Choose desired settings from the dropdown.

Spacing: Set a spacing between titles and items for desktop, tablet and mobile. 

Items

Typography: Set a Typography using settings from the dropdown.

Color: Choose the items’ color.

Dividers

Border Type: Choose the desired border type from the dropdown and set it.

Color: Choose the dividers’ color.

General Text

Gap: Set a gap between general text and items.

Bank Details

purchase-summary-style-bank-details
purchase-summary-style-bank-details-2

Gap: Set a gap between payment details and bank details for desktop, tablet and mobile.

Space Between: Set a space between bank details fields for desktop, tablet and mobile.

Account Title

Typography: Set a Typography using settings from the dropdown.

Color: Choose the title color.

Text Shadow: Choose desired settings from the dropdown.

Spacing: Set a spacing between title and items for desktop, tablet and mobile. 

Titles

Typography: Set a Typography using settings from the dropdown.

Color: Choose the titles’ color.

Text Shadow: Choose desired settings from the dropdown.

Spacing: Set a spacing between titles and items for desktop, tablet and mobile. 

Items

Typography: Set a Typography using settings from the dropdown.

Color: Choose the items’ color.

Dividers

Border Type: Choose the desired border type from the dropdown and set it.

Color: Choose the dividers’ color.

Order Details

purchase-summary-style-order-details
purchase-summary-style-order-details-2

Gap: Set a gap between sections for desktop, tablet and mobile.

Rows Gap: Set a gap between rows for desktop, tablet and mobile.

Titles

Typography: Set a Typography using settings from the dropdown.

Color: Choose the titles’ color.

Text Shadow: Choose desired settings from the dropdown.

Totals

Typography: Set a Typography using settings from the dropdown.

Color: Choose the totals’ color.

Text Shadow: Choose desired settings from the dropdown.

Items

Typography: Set a Typography using settings from the dropdown.

Color: Choose the items’ color.

Variations 

Typography: Set a Typography using settings from the dropdown.

Color: Choose the variations’ color.

Product Link
Color: Set the link color for Normal and Hover modes.

Dividers

Border Type: Choose the desired border type from the dropdown and set it.

Color: Choose the dividers’ color.

Buttons

purchase-summary-style-buttons

Typography: Set a Typography using settings from the dropdown.

Color: Choose buttons’ color for Normal and Hover modes. 

Background Type: Choose between Color and Gradient background type.

Background Color: Choose buttons background color.

Border Color: Choose border color.

Border Radius: Set a border radius for desktop, tablet and mobile.

Text Shadow: Choose desired settings from the dropdown.

Box Shadow: Choose desired settings from the dropdown.

Padding: Set paddings for desktop, tablet and mobile.

Border Type: Choose the desired border type from the dropdown and set it.

Advanced

Set the Advanced options that are applicable to this widget