Alright, let's build that custom order summary page for your WooCommerce site that’s tailored to your needs (and can be converted to PDF easily). Since you already have invoice handling covered, we’ll focus on creating a clean, display-focused page with both static company info and dynamic order data.

First, we’ll make a dedicated template for this summary page so you can assign it to a WordPress page later:

• Copy your theme’s page.php file and rename it page-order-summary.php
• Add this template header at the very top of the new file to register it in WordPress:

<?php
/*
Template Name: Custom Order Summary
*/
get_header();
?>

Next, we’ll pull the dynamic order data using WooCommerce’s built-in functions. We’ll use a URL parameter (?order_id=XXX) to load the specific order:

// Grab order ID from the URL
$order_id = isset($_GET['order_id']) ? absint($_GET['order_id']) : 0;
$order = wc_get_order($order_id);

// Validate the order exists
if (!$order) {
    echo '<p>Sorry, that order ID is invalid or doesn’t exist.</p>';
    get_footer();
    exit;
}

Now let’s construct the page with all your required elements: static company details, customer info, and product items with images. Drop this code right after the order validation block:

<div class="order-summary-wrapper">
    <!-- Static Company Header -->
    <div class="company-header">
        <h1>*Your Brand Name Here*</h1>
        <p>123 Business St, Suite 45 | City, State 12345 | Phone: (555) 123-4567 | Email: support@yourbrand.com</p>
    </div>

    <!-- Dynamic Customer Details -->
    <div class="customer-section">
        <h2>Customer Information</h2>
        <p><strong>Full Name:</strong> <?php echo esc_html($order->get_billing_first_name() . ' ' . $order->get_billing_last_name()); ?></p>
        <p><strong>Email:</strong> <?php echo esc_html($order->get_billing_email()); ?></p>
        <p><strong>Phone:</strong> <?php echo esc_html($order->get_billing_phone()); ?></p>
        <p><strong>Shipping Address:</strong><br>
            <?php echo esc_html($order->get_shipping_address_1()); ?><br>
            <?php echo esc_html($order->get_shipping_address_2()); ?><br>
            <?php echo esc_html($order->get_shipping_city() . ', ' . $order->get_shipping_state() . ' ' . $order->get_shipping_postcode()); ?><br>
            <?php echo esc_html($order->get_shipping_country()); ?>
        </p>
    </div>

    <!-- Dynamic Product Items with Images -->
    <div class="products-section">
        <h2>Order Items</h2>
        <table class="order-items-table">
            <thead>
                <tr>
                    <th>Product Image</th>
                    <th>Product Name</th>
                    <th>Quantity</th>
                    <th>Unit Price</th>
                    <th>Subtotal</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($order->get_items() as $item_id => $item) : ?>
                    <?php $product = $item->get_product(); ?>
                    <tr>
                        <td>
                            <?php if ($product->get_image_id()) : ?>
                                <?php echo wp_get_attachment_image($product->get_image_id(), 'thumbnail', false, array('class' => 'product-thumb')); ?>
                            <?php else : ?>
                                <img src="<?php echo esc_url(wc_placeholder_img_src()); ?>" alt="Product placeholder" class="product-thumb">
                            <?php endif; ?>
                        </td>
                        <td><?php echo esc_html($item->get_name()); ?></td>
                        <td><?php echo esc_html($item->get_quantity()); ?></td>
                        <td><?php echo wp_kses_post($order->get_formatted_line_subtotal($item)); ?></td>
                        <td><?php echo wp_kses_post($order->get_formatted_line_subtotal($item)); ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" class="text-right"><strong>Order Total:</strong></td>
                    <td><?php echo wp_kses_post($order->get_formatted_order_total()); ?></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <!-- Static Footer Note -->
    <div class="order-footer">
        <p>*Thank you for your order! We’ll process it within 2 business days. For questions, reach out to our support team.*</p>
    </div>
</div>

Paste this into your theme’s style.css or WordPress Customizer’s Additional CSS section to make the page look polished and PDF-friendly:

.order-summary-wrapper {
    max-width: 850px;
    margin: 30px auto;
    padding: 25px;
    font-family: 'Arial', sans-serif;
}

.company-header {
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
}

.customer-section, .products-section {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.order-items-table {
    width: 100%;
    border-collapse: collapse;
}

.order-items-table th, .order-items-table td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}

.order-items-table th {
    background-color: #f8f8f8;
}

.product-thumb {
    width: 75px;
    height: auto;
    object-fit: cover;
}

.text-right {
    text-align: right;
}

.order-footer {
    text-align: center;
    font-style: italic;
    color: #666;
}

Since you don’t need invoice plugins, we’ll use a simple browser-based print-to-PDF method (works for most use cases):

• Add this button code right above the order-summary-wrapper div:

<div class="pdf-action">
    <button onclick="window.print()" class="print-btn">Save as PDF</button>
</div>

• Add this CSS to hide unnecessary elements when printing:

.print-btn {
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 20px;
}

.print-btn:hover {
    background-color: #006799;
}

@media print {
    header, footer, .pdf-action {
        display: none !important;
    }
    .order-summary-wrapper {
        margin: 0;
        padding: 0;
    }
}

• Go to your WordPress dashboard, create a new page, and select the Custom Order Summary template from the right sidebar.
• Publish the page, then visit it with a valid order ID: your-site-url/order-summary-page?order_id=123 (replace 123 with an actual order ID from your WooCommerce store).
• Click the "Save as PDF" button, then use your browser’s print dialog to save the page as a PDF.

内容的提问来源于stack exchange，提问作者user9704406