Hiding the Currency Symbol in WPForms Total Field

Would you like to hide the currency symbol in the Total field of your WPForms? This can be useful for creating a cleaner look or meeting specific design requirements.

In this tutorial, we’ll show you how to use a custom code snippet to remove the currency symbol from the Total field in WPForms.

Adding the Code Snippet

To hide the currency symbol, you’ll need to add a custom code snippet to your site. If you need help adding custom code, please see our tutorial on adding code snippets.

Add the following PHP code snippet to your site:

/**
 * Removes the currency symbol in the Total Field 
 *
 * @link https://wpforms.com/developers/hiding-the-currency-symbol-in-wpforms-total-field
 *
 */
function remove_currency_symbol() {
    ?>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){
                const targetNode = document.querySelector('#wpforms-100-field_12-container .wpforms-payment-total');
                if (!targetNode) return;

                const config = { childList: true, subtree: true, characterData: true };
                
                const callback = function(mutationsList, observer) {
                    for(let mutation of mutationsList) {
                        if (mutation.type === 'childList' || mutation.type === 'characterData') {
                            targetNode.textContent = targetNode.textContent.replace('$', '');
                        }
                    }
                };

                const observer = new MutationObserver(callback);
                observer.observe(targetNode, config);
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'remove_currency_symbol', 30);

Customizing the Snippet

Before using this snippet, you need to customize it for your specific form:

1. Form ID: Replace 100 in #wpforms-100-field_12-container with your actual form ID.
2. Field ID: Replace 12 in #wpforms-100-field_12-container with the ID of your Total field.
3. Currency Symbol: The snippet currently removes the $ symbol. If you’re using a different currency, replace '$' with your currency symbol in the replace() function.

To find your form and field IDs, please see our guide on how to find form and field IDs.

And that’s it! You’ve now hidden the currency symbol in your WPForms Total field. This creates a cleaner look for your form while still maintaining the functionality of the Total field.

Would you like to learn more about customizing payment field labels in WPForms? Check out our tutorial on customizing payment form labels for more details.