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:
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)
})
}
})
})Please note that these code snippets are aimed at developers. If you feel comfortable using them, our article on how to use code snippets can serve as a helpful guide. 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.