--- title: "How to Build the WooCommerce Thank You Page in WordPress?" url: https://nexterwp.com/docs/build-a-woocommerce-thank-you-page-in-wordpress/ date: 2026-07-14 modified: 2026-07-14 author: "Aditya Sharma" description: "Order Confirmation, Order Payment, Thank You Order Details, and Thank You Address blocks in Nexter Blocks. Build a custom WooCommerce Thank You page without code." word_count: 1683 --- # How to Build the WooCommerce Thank You Page in WordPress? Do you want to give customers a clear, branded confirmation after every order? The WooCommerce Thank You page is the first thing a customer sees after completing a purchase, and it carries the order number, payment method, shipping address, and order breakdown. Nexter Blocks includes four dedicated blocks for building a fully customized WooCommerce Thank You page in the WordPress block editor: Order Confirmation, Order Payment, Thank You Order Details, and Thank You Address. All four blocks are part of Nexter Blocks Pro and work exclusively on the WooCommerce order-received page. **Best Used For:** - WooCommerce stores that want a branded, on-theme post-purchase experience - Multi-product shops that need clear order summaries with itemized details - Stores using Nexter's Theme Builder to control all WooCommerce page templates ## Required Setup - Make sure the default WordPress block editor is active. - Nexter Blocks Pro installed and activated. - WooCommerce installed and activated. - Nexter Extension installed and activated, required to create a custom Thank You page template via the Theme Builder. > Note: These four blocks only render on the WooCommerce order-received URL. Place them inside a Nexter Theme Builder template assigned to the WooCommerce Thank You page. They do not display on regular WordPress pages. ## How to Set Up the WooCommerce Thank You Page in Nexter Settings? To use these blocks, create a regular WordPress page with the Thank You blocks on it, then assign it as your WooCommerce Thank You page from the WooCommerce settings. - Go to **Pages → Add New** in the WordPress admin. - Add the Thank You page blocks to the page layout in the order that fits your design. - Click **Publish**. - Go to **WooCommerce → Settings → Advanced**. - In the **Page setup** section, find the **Thank you page** dropdown (added by Nexter Blocks Pro, right below *My account page*). - Select the page you just published. - Click **Save changes**. WooCommerce now loads this page after every completed order. ![](https://nexterwp.com/wp-content/uploads/2026/07/thank-you-page.png) ## How to Activate the Thank You Page Blocks? Go to **Nexter > Blocks**. Click **All** at the top to show all block categories, then search for each block name below and toggle it on. - Search **Order Confirmation** and toggle it on. - Search **Order Payment** and toggle it on. - Search **Thank You Order Details** and toggle it on. - Search **Thank You Address** and toggle it on. ![Nexter Blocks admin with the WooCommerce blocks enabled](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-blocks-activate.png) ## How to Use the Order Confirmation Block? The Order Confirmation block displays the order ID and a customizable confirmation message at the top of the Thank You page. It replaces the default WooCommerce order ID and message with content you control. To add it, open the template in the block editor, search for **Order Confirmation** in the block inserter, and place it at the top of the Thank You page layout. ### Heading The Heading panel controls whether the order ID displays and what prefix text appears before the order number. Enable the **Heading** toggle to display the order ID on the page. When enabled, two additional controls appear. In the **Heading Text** field, enter the label that appears before the order number. The default is "Order#". Change this to match your store's language, for example "Your Order:" or "Confirmation #". From the **Alignment** control, set how the order ID aligns on the page. Use center or right alignment when you want the order ID to stand out at the top of a narrow confirmation panel. ### Order Message The Order Message panel controls the thank-you text that appears below the order ID. Enable the **Order Message** toggle to display the confirmation message. When enabled, two additional controls appear. In the **Heading Text** field, enter the message your customers see after placing an order. The default is "Thank you. Your order has been received." Customize this to add a personal touch, a next-step instruction, or a support contact prompt. From the **Alignment** control, set how the message text aligns on the page. ![How to Use the Order Confirmation Block - settings](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-order-confirmation-layout-1.png) ## How to Style the Order Confirmation Block? To style the Order Confirmation block, go to the **Style** tab in the block Inspector panel. - **Heading**: change the color, typography, and spacing of the order ID text. Use this when you want the order number to match your store's heading font or brand color. - **Order Message**: change the color and typography of the confirmation message. Use this when you want the thank-you text to be smaller or lighter than the order ID. ![How to Style the Order Confirmation Block - Style tab](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-order-confirmation-style-1.png) ## How to Use the Order Payment Block? The Order Payment block displays a summary of the completed order: the order number, date, customer email, total amount, and payment method. It is one of the most important blocks on the Thank You page because it gives customers an immediate reference for their purchase. To add it, search for **Order Payment** in the block inserter and place it below the Order Confirmation block in your template. ### Layout The Layout panel controls how the order summary displays and what labels appear for each detail. - **Layout**: switch between Vertical and Horizontal display. Vertical stacks each detail (label above value). Horizontal places label and value side by side in a row. Use Horizontal when you have limited vertical space or want a compact receipt-style layout. - **Order Number**: enter the label that appears next to the order ID. Default is "Order". - **Date**: enter the label for the order date field. Default is "Date". - **Email**: enter the label for the customer email field. Default is "Email". - **Total**: enter the label for the order total field. Default is "Total". - **Payment Method**: enter the label for the payment method field. Default is "Payment Method". Rename this if your store uses a different term, such as "Paid via". ![How to Use the Order Payment Block - settings](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-order-payment-layout-1.png) ## How to Style the Order Payment Block? To style the Order Payment block, go to the **Style** tab in the block Inspector panel. - **Layout**: change the alignment of the payment summary list. Use this to center or right-align the entire block within its container. - **List Item**: change the border, border radius, padding, and gap between each payment detail item. Use this when you want to add a card-style border around each detail row. - **Label**: change the color and typography of the label text (Order Number, Date, Email, and so on). - **Value**: change the color, typography, and top spacing of the value text (the actual order number, date, and email). - **Separator**: change the border style of the divider line that appears between detail rows. ![How to Style the Order Payment Block - Style tab](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-order-payment-style-1.png) ## How to Use the Thank You Order Details Block? The Thank You Order Details block displays a full order table: products purchased, quantities, line totals, subtotal, shipping, payment method, and grand total. Use this block when your store sells physical or downloadable products and customers need an itemized order breakdown. To add it, search for **Thank You Order Details** in the block inserter and place it below the Order Payment block in your template. ### General The General panel controls the section heading labels that appear above the order table. In the **Download Text** field, enter the heading that appears above the digital downloads section. This heading shows only when the order contains downloadable items, so use a clear label like "Your Downloads". In the **Order Details Text** field, enter the heading that appears above the physical product order table. The default is "Order Details". ### Table Header The Table Header panel controls the column heading labels and alignment for the order table. In the **Product** field, enter the label for the product name column (default "Product"). In the **Total** field, enter the label for the price column (default "Total"). From the **Alignment** control, set how the column headings align within their cells. ### Table Footer The Table Footer panel controls the labels for the summary rows at the bottom of the order table. In the **Subtotal** field, enter the label for the subtotal row (default "Subtotal"). In the **Shipping Cost** field, enter the label for the shipping row (default "Shipping Cost:"). In the **Payment Method** field, enter the label for the payment method row (default "Payment Method"). In the **Total** field, enter the label for the grand total row (default "Total"). ![How to Use the Thank You Order Details Block - settings](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-ty-details-layout-1.png) ## How to Style the Thank You Order Details Block? To style the Thank You Order Details block, go to the **Style** tab in the block Inspector panel. - **General**: change the color, background, typography, border, border radius, padding, and spacing of the section headings. - **Table Header**: change the text color, background, typography, border, and padding of the table column headings. Use this to create contrast between the header row and the body rows. - **Table Body**: change the text color, background, link color, link hover color, typography, border, and padding of the product rows in the order table. - **Button**: change the normal and hover color, background, typography, border, border radius, and padding of the download button that appears in the downloads section. - **Table Footer**: change the text color, background, typography, border, border radius, and padding of the summary rows at the bottom of the order table. ![How to Style the Thank You Order Details Block - Style tab](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-ty-details-style-1.png) ## How to Use the Thank You Address Block? The Thank You Address block displays the customer's billing and shipping addresses on the Thank You page. It shows both addresses side by side so customers can confirm their delivery details immediately after checkout. To add it, search for **Thank You Address** in the block inserter and place it below the Thank You Order Details block in your template. ### Title The Title panel controls the heading labels for the billing and shipping address sections. In the **Billing Text** field, enter the label that appears above the billing address (default "Billing Address"). In the **Shipping Text** field, enter the label that appears above the shipping address (default "Shipping Address"). Change these to match the language your store uses elsewhere, such as "Invoice Address" or "Delivery Address". ![How to Use the Thank You Address Block - settings](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-ty-address-layout-1.png) ## How to Style the Thank You Address Block? To style the Thank You Address block, go to the **Style** tab in the block Inspector panel. - **Title**: change the color, typography, and bottom spacing of the billing and shipping address headings. - **Body**: change the text color, typography, and alignment of the address details displayed under each heading. Use center or right alignment when the address block is placed inside a narrow column. This is how you can build a custom WooCommerce Thank You page in WordPress with Nexter Blocks. ![How to Style the Thank You Address Block - Style tab](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-ty-address-style-1.png)