How to Show Product Price + Shipping VAT in "Total" Merged
As an ecommerce business owner, providing a clear and transparent pricing structure for your customers is essential. One common challenge is effectively displaying the total price, including both the product price and the shipping VAT (Value Added Tax), in a user-friendly manner.
In this blog post, we'll explore a solution that allows you to merge the product price and shipping VAT into a single "Total" line, making it easier for your customers to understand the final cost.
The Problem
Traditionally, the total price on a WooCommerce-powered website is displayed with the product price, shipping cost, and VAT shown as separate line items. While this approach provides detailed information, it can sometimes appear cluttered and may not be the most intuitive presentation for customers.
For example, a customer's cart might display the following:
- Product Price: $50.00
- Shipping: $5.00
- VAT (7.7%): $4.27
- Total: $59.27
This layout, while informative, can be improved to provide a more streamlined and user-friendly experience.
The Solution
To address this issue, we'll use a custom function that combines the product price, shipping cost, and VAT into a single "Total" line item. This function will modify the default behavior of the woocommerce_cart_totals_order_total_html
filter, which is responsible for displaying the order total in the cart and checkout pages.
Here's the code:
add_filter( 'woocommerce_cart_totals_order_total_html', 'woo_rename_tax_inc_cart', 10, 1 );
function woo_rename_tax_inc_cart( $value ) {
/* Get all infos needed */
$shipping_total = WC()->cart->shipping_total;
$taxes = WC()->cart->get_taxes_total( true, true );
$taxrate = 7.7;
$newtaxes = ($shipping_total/(100+$taxrate)*$taxrate) + $taxes; // Shipping is 100% + taxrate %, so we deduct both percentages.
/* Check if Shipment total is active */
if ( ! empty($shipping_total) && $shipping_total != 0 ) {
if ( ! empty( $value ) ) {
// Show Price /wc-cart-functions.php Line 297
$value = '<strong>' . WC()->cart->get_total() . '</strong> ';
$value .= '<small class="includes_tax">' . '(inkl. ' . wc_price( $newtaxes ) . ' MWST)' . '</small>';
}
}
// Attach Tax Info to Price (single line)
$value = str_ireplace( 'Tax', 'GST', $value );
return $value;
}
Here's how the code works:
- We start by hooking into the
woocommerce_cart_totals_order_total_html
filter, which allows us to modify the HTML output for the order total.
- Inside the
woo_rename_tax_inc_cart
function, we first retrieve the necessary information, such as the shipping total and the total taxes.
- We then calculate the new taxes, which include the shipping VAT. This is done by deducting the shipping percentage from the total shipping cost and adding the remaining taxes.
- Next, we check if the shipping total is active (not empty and not zero). If so, we modify the
$value
variable to display the total price, including the product price and the shipping VAT, in a single line.
- Finally, we replace the term "Tax" with "GST" (Goods and Services Tax) to match the local terminology, if desired.
The result of this code will be a display similar to the following:
- Total: $59.27 (incl. $4.27 GST)
By merging the product price and shipping VAT into a single "Total" line, you provide a more streamlined and user-friendly experience for your customers, making it easier for them to understand the final cost of their purchase.
Customizing the Code
The code provided above can be further customized to fit your specific shop settings. For example, you may want to adjust the tax rate ($taxrate
variable) or change the way the VAT information is displayed (the <small>
tag).
Additionally, you can explore other WooCommerce filters and actions to extend the functionality and integrate it seamlessly with your website's design and branding.
Conclusion
Displaying the total price, including product price and shipping VAT, in a clear and concise manner is an important aspect of providing a positive customer experience on your ecommerce website. The solution presented in this blog post offers a way to merge these elements into a single "Total" line, making it easier for your customers to understand the final cost of their purchase.
By implementing this code, you can improve the overall user experience and transparency of your WooCommerce-powered store, ultimately leading to increased customer satisfaction and potentially higher conversion rates.
If you found this article helpful, be sure to check out Flowpoint.ai, a web analytics platform that can help you identify technical, UX, and content-related issues impacting your website's conversion rates, and provide AI-generated recommendations to optimize your store
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.