1. Home
  2. Knowledge Base
  3. WooCommerce Product Options
  4. Advanced Usage

How to only display variation names in the 'Products' option type

The WooCommerce Product Options plugin has a 'Products' option type which lets you display other products as options on a product page. You can either display simple products or specific variations of a variable product.

How are the names of variable products displayed as options?

When you display variations as options, each variation is labelled with the product name followed by a dash and the variation name - for example, "Lechon Manok - Large" in this example:

Product variations as options

Code snippet to remove the product name

If all the variations that you select are from the same product, then it may look repetitive to include the name of the parent product before the name of each variation. You can see this in the screenshot above.

The following code snippet will remove the product name from the label so that only the variation name (e.g. "Large") will appear:

jQuery(function($) {
    $(document).ready(function() {
        if( $('body').hasClass('wpo-has-fields') ) {
            $(".wpo-field-product .wpo-image-text").each(function() {
                const $figcaption = $(this)
                const text = $figcaption.find(".wpo-image-label").text()
                const newText = text.split('-')[1].trim()
                $figcaption.find(".wpo-image-label").text(newText)
            })
        }
    })
})

You can add this JavaScript code snippet to your theme/child theme, or using the free Code Snippets plugin. If you don't know how to use code snippets then we recommend asking your developer or posting a job on Codeable to find a developer to do it for you.

Related Articles

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