Code snippet - Itemize the tax in the product options price display

When customers use WooCommerce Product Options to select options that affect the cost of the product, the updated product price appears above the add to cart button. This will either by inclusive or exclusive of tax/VAT, depending on the overall tax settings of your WooCommerce store.

The following code snippet allows you to display the price with and without tax in this format:

Total £44.50 Ex VAT
Total £53.40 Inc Vat

This code snippet is aimed at developers and if you don't know how to use it then you can read our article about how to add code snippets or request a quote from our customization service. If you use our customization service then we can also make any further changes to the logic or display of your product option prices.

jQuery(function($) {
    $(document).ready(function() {
        if (!$('body').hasClass('wpo-has-fields')) {
            return
        }

        function updateTotalDisplay() {
            let totalText = $('.wpo-totals-label .wpo-price').text().replace(/[^0-9.]/g, '')
            let total = parseFloat(totalText)

            if (!isNaN(total)) {
                let vat = (total * 0.2).toFixed(2)
                let totalWithVAT = (total + parseFloat(vat)).toFixed(2)

                let incVatDisplay = `Total £${totalWithVAT} Inc VAT`

                if ($('#inc-vat-display').length === 0) {
                    $('.wpo-totals-label').append(`<div id="inc-vat-display">${incVatDisplay}</div>`)
                } else {
                    $('#inc-vat-display').text(incVatDisplay)
                }
            }
        }

        let target = document.querySelector('.wpo-totals-label .wpo-price')
        if (target) {
            let observer = new MutationObserver(function(mutations) {
                mutations.forEach(mutation => {
                    if (mutation.target.nodeType === 3 || $(mutation.target).hasClass('wpo-price')) {
                        updateTotalDisplay()
                    }
                })
            })

            observer.observe(target, { childList: true, subtree: true, characterData: true })

            updateTotalDisplay()
        }
    })
})

Still need help?

If searching the knowledge base hasn't answered your question, please contact support.

Get Support

Code snippet - Itemize the tax in the product options price display

Related Articles