Drupal commerce invoice receipt template

Modify the invoice and receipt templates in Drupal Commerce using the Twig templating system. Locate the default template files within your theme or module, typically found in commerce_order/templates. Copy the necessary file to your theme’s templates directory to override it without altering the core module.

Customize order details by using available Twig variables. Use {{ order.getTotalPrice() }} to display the total amount, {{ order.getCustomerName() }} for the buyer’s name, and {{ order.getEmail() }} for contact details. To include additional fields, reference the order entity structure using Devel Kint or inspect the available variables in the template.

Enhance the layout with custom styling by modifying the HTML structure and applying CSS classes. Integrate branding elements like logos, colors, and typography to align the invoice with your store’s visual identity. For dynamic QR codes or barcodes, use a Twig extension or preprocess functions in a custom module.

Ensure compliance with regional tax and invoice regulations by adding tax details, company information, and unique identifiers. If multiple invoice formats are required, create conditional logic in the template or use a separate template for each scenario. Test changes in a staging environment before deploying to production.

Drupal Commerce Invoice Receipt Template

Customize the invoice receipt template by overriding the default Twig file. Copy commerce-order-receipt.html.twig from the module’s template directory to your theme’s templates folder. Clear the cache to apply changes.

Modify the structure by adjusting placeholders like {{ order.order_number }}, {{ order.total_price }}, and {{ order.customer.email }}. To include custom fields, use {{ order.get('field_custom_name').value }}.

For branding, insert a logo with <img src="{{ logo_url }}" alt="Company Logo">. Adjust formatting with CSS classes or inline styles.

To add dynamic content, create a preprocess function in theme.theme file:

function mytheme_preprocess_commerce_order_receipt(&$variables) {
$variables['custom_text'] = 'Thank you for your order!';
}

Then, use {{ custom_text }} in the template. After modifications, clear the cache to see updates.

Customizing the Layout and Styling of the Receipt

Adjust the structure of the receipt template by modifying the Twig file. Locate the template responsible for rendering invoices, typically found in themes/custom/YOUR_THEME/templates/commerce-order. Copy the original file from the module directory to your theme folder, then adjust the markup as needed.

Modifying the Template

• Use Twig filters like { variable} to adjust text formatting.
• Rearrange elements by modifying the <table> structure or using <div> containers.
• Insert dynamic values such as order totals using {{ order.total_price }}.

Applying Custom Styles

• Override default styles by adding a CSS file to YOUR_THEME/css and referencing it in the theme’s .info.yml file.
• Use class selectors like .commerce-receipt-header to target specific sections.
• Ensure proper spacing and alignment with flexbox or grid layouts.

After making changes, clear the cache using drush cache:rebuild or through the admin panel to see updates immediately.

Adding Dynamic Order Data to the Template

Use Twig templates to inject order details directly into the invoice. Access order properties with {{ order.field_name }}, replacing field_name with the actual field key. For example, to display the order ID, use {{ order.order_id }}.

Retrieve customer details by referencing the user entity. Display the customer’s name with {{ order.uid.entity.name.value }} and email with {{ order.uid.entity.mail.value }}. If custom profile fields exist, adjust the structure accordingly.

To list purchased items, loop through the order items collection. Use:

{% for item in order.order_items %}
number_format(2) } {{ item.unit_price.currency_code }}
{% endfor %}

Include billing and shipping addresses by accessing:

{{ order.billing_profile.address.locality }}, {{ order.billing_profile.address.administrative_area }}

Ensure field availability by using {% if order.field_name is defined %} to prevent errors. Adjust template logic based on store requirements for a customized invoice.

Integrating Tax and Discount Details into the Receipt

Ensure the receipt clearly breaks down tax and discount amounts. Display the subtotal before applying any adjustments, followed by separate lines for discounts and tax calculations.

Use {{ order.total_discounts }} to show the total discount applied. For line-item discounts, loop through {{ order.items }} and include {{ item.total_discounts }} next to each product.

Tax details should specify the applicable rates and amounts. The template variable {{ order.total_tax }} provides the overall tax, while {{ item.tax_amount }} shows per-item calculations. If multiple tax rates apply, group them using {{ order.tax_breakdown }}.

Position tax and discount summaries close to the total for clarity. Use labels like “Subtotal,” “Discounts Applied,” “Tax,” and “Grand Total” to ensure readability.