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/