Woo Thank You Widget

The Woo – Thank You widget allows you to fully customize the WooCommerce order confirmation page that customers see after completing a purchase. Instead of relying on the default WooCommerce layout, this widget gives you full control over the design, structure, labels, and the overall experience your customers receive immediately after checkout.

Whether you want to enhance branding, improve clarity, or create a more engaging post-purchase step, this widget makes it simple and flexible.

Key Features

• Display a customizable Thank You card
  
• Edit title, description, and icon
  
• Show or hide order details like Order Number and Order Date
  
• Fully customizable Order Summary section with products, quantities, and pricing
  
• Display shipping and billing addresses
  
• Show payment method with editable labels
  
• Complete styling controls for typography, spacing, backgrounds, and more
  
• Ideal for custom checkout flows, upsells, client branding, and tailored post-purchase experiences
  

How to Add the Woo – Thank You Widget to Your Page

1. In your WordPress Dashboard, go to Pages and open the Thank You page created through WooCommerce or your custom setup.
   
2. Edit the page with Elementor.
   
3. In the Elementor panel, search for Woo – Thank You.
   
4. Drag and drop the widget onto your page.
   
5. Customize the widget using the Content, Style, and Advanced tabs.
   

Content Tab

The Content tab controls what information is displayed on the Thank You page. It includes:

• Thank You Card
  
• Order Details
  
• Order Summary
  
• Addresses & Payment
  

1. Thank You Card

This is the section customers see at the top of the page immediately after placing an order.

Show Card

Toggle the entire Thank You card visibility.

Title

Add or edit the Thank You headline (e.g., “Thank you for your purchase!”).

HTML Tag: Choose the semantic tag for the title:
h1, h2, h3, h4, h5, h6, p, div, span

Description

Add a supporting message, such as:
“Your order has been successfully placed. A confirmation email has been sent.”

Icon

Choose an icon from the library or upload your own SVG.
Useful for adding brand-specific illustrations or animations.

Size: Adjust both width and height (in px).
Rotate: Rotate the icon if needed.

2. Order Details

This section shows essential order information.

Show Section

Toggle to enable or disable the Order Details section.

Order Number

• Label: Customize the label (e.g., “Order ID”, “Your Order Number”).
  

Order Date

• Label: Customize the label for the purchase date.
  

Tip: Use clear labels to help customers quickly identify their order information.

3. Order Summary

Control how product information is displayed after purchase.

Show Section

Enable or disable the entire Order Summary block.

Show Products

Toggle whether customers can see a list of purchased products.

Include Summary Info

Enables additional line-item details such as product totals, tax, and shipping—depending on your WooCommerce setup.

Show Quantity

Choose whether to show product quantities next to each item.

Display Sale Price

If products were purchased at a discount, you can choose to show the original price alongside the sale price.

Best Practice: Keep the summary clean and simple so customers can validate their order quickly.

4. Addresses & Payment

Control the display of customer billing, shipping, and payment method.

Show Shipping Address

Toggle shipping address visibility.

• Label: Edit the section label (e.g., “Shipping Details”, “Deliver To”).
  

Show Billing Address

Toggle billing address visibility.

Show Payment Method

Display the method the customer used at checkout.

• Label: Customize label (e.g., “Payment Method Used”, “Paid Via”).
  

Style Tab

The Style tab provides full design control over typography, spacing, backgrounds, borders, and layout for each section of the Thank You page.

You can typically expect styling options for:

• Card Container – background, padding, border, shadow
  
• Title – color, typography, spacing
  
• Description – color, typography, spacing
  
• Icon – size, color, alignment
  
• Order Details – labels, values, separators
  
• Order Summary – product list styling, prices, quantities
  
• Addresses – text styling, layout spacing
  
• Payment Method – typography, alignment
  
• Section Spacing – control margins and gaps
  

(Style options are based on Elementor controls and may vary widget-to-widget, but follow the same pattern as UAE’s other WooCommerce widgets.)

Advanced Tab

The Advanced tab includes all global Elementor options such as:

• Margin & Padding
  
• Responsive Controls
  
• Motion Effects
  
• Backgrounds
  
• Borders & Shadows
  
• Custom CSS
  

Use this tab to fine-tune layout spacing or add advanced design effects.