Custom Thank you page
Bricks allows you to create a custom Thank you template via Templates. It results in thank you page that will be under URL: /checkout/order-received/ where you can change the order-received slug in Woocommerce settings.
Bricks Boilerplate uses a different approach so the result URL will be only: /order-received/ and you can change this to anything else, e.g. /thank-you/
Setting redirect to new custom page
Add this code to Code snippet plugin:
// Check if WooCommerce is active before adding the action hook
if (class_exists('WooCommerce')) {
/**
* Custom Thank You Page Redirect
*/
add_action('template_redirect', 'bt_custom_redirect_to_custom_thank_you');
function bt_custom_redirect_to_custom_thank_you() {
// Check if we are on the WooCommerce order received (thank you) page
if (!is_wc_endpoint_url('order-received') || empty($_GET['key'])) {
return; // Exit if not on the default "Thank You" page
}
// Get the order ID from the order key in the URL
$order_id = wc_get_order_id_by_order_key($_GET['key']);
if (!$order_id) {
return; // Exit if order ID is not found
}
// Construct the URL of your custom "Thank You" page and append the order ID as a query parameter
$custom_thankyou_page_url = add_query_arg(
array(
'order_id' => $order_id,
'order_key' => $_GET['key'],
),
site_url('thank-you') // Ensure the URL matches your custom page slug
);
// Perform the redirect to the custom "Thank You" page
wp_safe_redirect($custom_thankyou_page_url);
exit;
}
}In the part:
site_url('thank-you')Make sure to change thank-you with the actual slug of your custom thank you page.
This snippet will pass order ID and key to our new URL when new order is placed.
Designing with Bricks
Design your layout with Bricks builder and retrieve dynamic data via codeblock.
Product table:
<?php
// Check if the order ID and order key are set in the URL
if ( isset( $_GET['order_id'] ) && isset( $_GET['order_key'] ) ) {
// Retrieve the order ID and sanitize it
$order_id = intval( $_GET['order_id'] );
// Load the order object using the order ID
$order = wc_get_order( $order_id );
// Ensure the order object is valid
if ( $order ) {
// Start the order details table
echo '<table>';
echo '<thead>';
echo '<tr>';
echo '<th>Product</th>';
echo '<th>Quantity</th>';
echo '<th>Total</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';
// Loop through each item in the order
foreach ( $order->get_items() as $item_id => $item ) {
// Get the product object
$product = $item->get_product();
// Check if product exists to avoid errors
if ( $product ) {
// Get the product name
$product_name = $product->get_name();
// Get the product URL (permalink)
$product_permalink = $product->get_permalink();
// Get the product thumbnail image HTML
$product_image = $product->get_image('medium');
// Initialize variable options string
$variation_options = '';
// Check if the product is a variable product or has variations
if ( $product->is_type( 'variable' ) || $product->is_type( 'variation' ) ) {
// Get variation data from order item
$variation_data = $item->get_meta_data();
// Loop through each variation attribute
foreach ( $variation_data as $meta ) {
$meta_data = $meta->get_data();
if ( strpos( $meta_data['key'], 'pa_' ) !== false ) {
// Format attribute names to make them readable
$attribute_label = wc_attribute_label( str_replace( 'attribute_', '', $meta_data['key'] ) );
$variation_options .= '<p>' . esc_html( $attribute_label ) . ': ' . esc_html( $meta_data['value'] ) . '</p>';
}
}
}
} else {
// Fallback values if the product does not exist
$product_name = $item->get_name();
$product_permalink = '';
$product_image = wc_placeholder_img('medium');
$variation_options = '';
}
// Get the quantity ordered
$product_quantity = $item->get_quantity();
// Calculate the line item total using the original price and quantity
$product_price = $product->get_price(); // Get the original product price
$line_total = $product_price * $product_quantity; // Calculate total as price * quantity
// Display the product information in a table row
echo '<tr>';
echo '<td>';
if ( $product_permalink ) {
echo '<a href="' . esc_url( $product_permalink ) . '">';
echo wp_kses_post( $product_image );
echo '<div>';
echo '<h4>' . esc_html( $product_name ) . '</h4>';
echo wp_kses_post( $variation_options );
echo '</div>';
echo '</a>';
} else {
echo wp_kses_post( $product_image );
echo '<div>';
echo '<h4>' . esc_html( $product_name ) . '</h4>';
echo wp_kses_post( $variation_options );
echo '</div>';
}
echo '</td>';
echo '<td>' . esc_html( $product_quantity ) . '</td>';
echo '<td>' . wp_kses_post( wc_price( $line_total ) ) . '</td>';
echo '</tr>';
}
echo '</tbody>';
echo '</table>';
} else {
echo 'Order not found or invalid order ID.';
}
} else {
echo 'Order ID or Order Key is missing.';
}
?>
Order summary
<?php
// Check if the order ID and order key are set in the URL
if ( isset( $_GET['order_id'] ) && isset( $_GET['order_key'] ) ) {
// Retrieve the order ID and sanitize it
$order_id = intval( $_GET['order_id'] );
// Load the order object using the order ID
$order = wc_get_order( $order_id );
// Ensure the order object is valid
if ( $order ) {
// Get the order number
$order_number = $order->get_order_number();
// Get the order status (e.g., 'completed', 'processing', 'failed')
$order_status = $order->get_status();
$order_status_display = wc_get_order_status_name( $order_status ); // Converts status slug to readable name
$order_status_class = 'bt-order-status--' . esc_attr( $order_status ); // Create the dynamic class
// Get the order subtotal (before discount, tax, etc.)
$order_subtotal = $order->get_subtotal();
// Get total discount applied to the order
$discount_total = $order->get_discount_total(); // This is the discount without tax
//$discount_tax_total = $order->get_discount_tax(); // Get taxable portion of the discount (we won't use this)
// Get tax total
$tax_total = $order->get_total_tax();
// Get shipping total
$shipping_total = $order->get_shipping_total();
// Get total (grand total, including everything)
$total_amount = $order->get_total();
// Get payment method title
$payment_method_title = $order->get_payment_method_title();
// Get shipping method(s) used in the order
$shipping_methods = $order->get_shipping_methods();
// Display the order summary
echo '<div class="order-summary-section">';
// Display order number
echo '<p><strong>Order Number:</strong> ' . esc_html( $order_number ) . '</p>';
// Display order status with dynamic class
echo '<p class="bt-order-status"><strong>Order Status:</strong> <span class="' . esc_attr( $order_status_class ) . '">' . esc_html( $order_status_display ) . '</span></p>';
// Display subtotal
echo '<p><strong>Subtotal:</strong> ' . wp_kses_post( wc_price( $order_subtotal ) ) . '</p>';
// Conditionally display discount if any
if ( $discount_total > 0 ) {
echo '<p><strong>Discount:</strong> <span>-' . wp_kses_post( wc_price( $discount_total ) ) . '</span></p>';
}
// Conditionally display shipping if any
if ( $shipping_total > 0 ) {
echo '<p><strong>Shipping:</strong> <span>' . wp_kses_post( wc_price( $shipping_total ) );
if ( ! empty( $shipping_methods ) ) {
echo ' via ' . esc_html( reset( $shipping_methods )->get_name() );
}
echo '</span></p>';
}
// Display payment method
echo '<p><strong>Payment Method:</strong> ' . esc_html( $payment_method_title ) . '</p>';
// Conditionally display taxes if any
if ( $tax_total > 0 ) {
echo '<p><strong>Tax:</strong> ' . wp_kses_post( wc_price( $tax_total ) ) . '</p>';
}
// Display total amount
echo '<p class="hs-order-summary"><strong>Total:</strong> ' . wp_kses_post( wc_price( $total_amount ) ) . '</p>';
echo '</div>';
} else {
echo 'Order not found or invalid order ID.';
}
} else {
echo 'Order ID or Order Key is missing.';
}
?>Order billing and shipping details:
<?php
// Check if the order ID and order key are set in the URL
if ( isset( $_GET['order_id'] ) && isset( $_GET['order_key'] ) ) {
// Retrieve the order ID and sanitize it
$order_id = intval( $_GET['order_id'] );
// Load the order object using the order ID
$order = wc_get_order( $order_id );
// Ensure the order object is valid
if ( $order ) {
// Get the billing address
$billing_address = $order->get_formatted_billing_address();
// Get the shipping address
$shipping_address = $order->get_formatted_shipping_address();
// Get customer email
$customer_email = $order->get_billing_email();
// Get customer phone
$customer_phone = $order->get_billing_phone();
// Display the billing and shipping addresses along with customer contact details
echo '<div class="address-section">';
echo '<div>';
// Display the billing address
echo '<h3>Billing Address</h3>';
if ( ! empty( $billing_address ) ) {
echo '<p>' . wp_kses_post( $billing_address ) . '</p>';
} else {
echo '<p>No billing address available.</p>';
}
// Display customer email and phone if available
if ( ! empty( $customer_email ) ) {
echo '<p>' . esc_html( $customer_email ) . '</p>';
}
if ( ! empty( $customer_phone ) ) {
echo '<p></strong> ' . esc_html( $customer_phone ) . '</p>';
}
echo '</div>';
// Display the shipping address
echo '<div>';
echo '<h3>Shipping Address</h3>';
if ( ! empty( $shipping_address ) ) {
echo '<p>' . wp_kses_post( $shipping_address ) . '</p>';
} else {
echo '<p>No shipping address available.</p>';
}
// Display customer email and phone if available
if ( ! empty( $customer_email ) ) {
echo '<p>' . esc_html( $customer_email ) . '</p>';
}
if ( ! empty( $customer_phone ) ) {
echo '<p></strong> ' . esc_html( $customer_phone ) . '</p>';
}
echo '</div>';
echo '</div>';
} else {
echo 'Order not found or invalid order ID.';
}
} else {
echo 'Order ID or Order Key is missing.';
}
?>Failed orders
Sometimes, customer can fail the payment so the order will get status "failed". We need to display a different content for this scenario.
First, we need a snippet to return order status (add to Code snippet plugin):
// Function to check order status based on order ID and order key
function bt_custom_check_order_status() {
// Check if the order ID and order key are set in the URL
if ( isset( $_GET['order_id'] ) && isset( $_GET['order_key'] ) ) {
// Retrieve the order ID and sanitize it
$order_id = intval( $_GET['order_id'] );
// Load the order object
$order = wc_get_order( $order_id );
// Ensure order exists and the order key matches
if ( $order && $order->get_order_key() === $_GET['order_key'] ) {
// Check if the order status is 'failed'
if ( $order->get_status() === 'failed' ) {
return false; // Return false if the order status is 'failed'
}
}
}
// Return true if the conditions aren't met or the order is valid and not failed
return true;
}Now you can use dynamic tag {echo:bt_custom_check_order_status} to apply condition to show/hide elements based on order status.
true = everything except failed
false = failed
You can extend the code to check more statusses and show more options based on that.
Don't forget to whitelist bt_custom_check_order_status function according to https://academy.bricksbuilder.io/article/filter-bricks-code-echo_function_names/
Last updated
