0

I want to show the price summary of the order in the order success page like this image below :

enter image description here

Any idea? Thanks.

2 Answers 2

1
  1. Create or Override the Template File: Create or copy the success.phtml file in your custom theme's directory: app/design/frontend/Vendor/Theme/Magento_Checkout/templates/success.phtml.
<?php
/** @var \Magento\Sales\Model\Order $order */
$order = $block->getOrder();
?>
<div class="order-success-page">    
    <div class="order-summary">
        <div class="order-summary-title">
            <?php echo __('Order Summary'); ?>
        </div>
        
        <div class="order-items">
            <?php foreach ($order->getAllItems() as $item): ?>
                <div class="order-item">
                    <div class="item-image">
                        <?php $product = $item->getProduct(); ?>
                        <img src="<?php echo $block->getImage($product, 'product_thumbnail_image')->getImageUrl(); ?>" alt="<?php echo $block->escapeHtml($product->getName()); ?>">
                    </div>
                    <div class="item-details">
                        <span class="item-name"><?php echo $item->getName(); ?></span>
                        <span class="item-quantity"><?php echo __('Quantity') . ': ' . $item->getQtyOrdered(); ?></span>
                    </div>
                    <div class="item-price">
                        <?php echo $block->getOrder()->formatPrice($item->getRowTotal()); ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        
        <div class="order-total">
            <?php echo __('Order Total: %1', $order->formatPrice($order->getGrandTotal())); ?>
        </div>
    </div>
</div>
  1. Style the Product Images: Update your CSS styles to accommodate the product images. Here's an example:
.order-item {
    display: flex;
    align-items: center; /* To vertically center align product image and details */
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.item-image img {
    max-width: 80px; /* Adjust the size as needed */
    height: auto;
    margin-right: 10px;
}

.item-details {
    flex-grow: 1;
}

/* Rest of your CSS styles */
  1. Flush Cache: By following these steps, you should be able to display product images alongside the product details in the order summary on the order success page. Adjust the styles and layout as necessary to match your design preferences.
1

You'll need to modify the template file responsible for rendering the order success page. The specific file you need to edit depends on your theme, but it's often located at

app/design/frontend/[Vendor]/[Theme]/Magento_Checkout/templates/success.phtml.

Inside this file, you can add code to display the price summary. Here's an example of how you can display a simple price summary:

<div class="order-summary">
<h2>Order Summary</h2>
<table class="data table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($block->getOrder()->getAllItems() as $_item): ?>
            <tr>
                <td><?= $_item->getName() ?></td>
                <td><?= $_item->getPrice() ?></td>
                <td><?= $_item->getQtyOrdered() ?></td>
                <td><?= $_item->getRowTotal() ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>
<div class="order-grand-total">
    <strong>Grand Total:</strong> <?= $block->getOrder()->getGrandTotal() ?>
</div>

This code iterates through each item in the order, displaying product name, price, quantity, and total. It also shows the grand total of the order.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.