Removing Prices from Dropdown Options in WooCommerce Product Options Plugin

In WooCommerce, providing customizable product options is essential for offering a personalized shopping experience to customers. However, sometimes these options might include prices, which can be unnecessary or misleading. If you’re using the WooCommerce Product Options plugin and want to remove prices from dropdown options, you’re in the right place. In this guide, we’ll walk you through the process of achieving this using jQuery and a code snippets plugin.

Below is the jQuery code snippet we’ll use:

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

        $('.wpo-field-dropdown .list li').each(function() {
            let text = $(this).text()
            let newText = text.replace(/\(.+?\)/g, '')
            $(this).text(newText.trim())
        })

        function removePriceFromText($container) {
            let $currentElement = $container.find('.current')
            let text = $currentElement.text()
            let newText = text.replace(/\(.+?\)/g, '')
            $currentElement.text(newText.trim())
        }

        $('.nice-select').on('click', function() {
            removePriceFromText($(this))
        })
    })
})

This code performs two main tasks:

  1. It iterates through each dropdown option (li elements) and removes any price information within parentheses.
  2. It defines a function to remove prices from the currently selected option (.current element) inside each dropdown container.

To add custom JavaScript code to your WordPress website without modifying theme files directly, we recommend using a code snippets plugin like https://wordpress.org/plugins/insert-headers-and-footers. This allows you to insert and manage custom code snippets from your WordPress dashboard.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top