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:
For Image Buttons:
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)
})
}
})
})For Checkbox:
jQuery(function($) {
$(document).ready(function() {
$('.wpo-field-product .wpo-checkboxes .wpo-checkbox div').each(function() {
let fullText = $(this).html().trim()
if (fullText.includes('-')) {
let variationName = fullText.split('-').slice(1).join('-').trim()
$(this).html(variationName)
}
})
})
})For Dropdown Select:
jQuery(function($) {
$(document).ready(function() {
$('.wpo-field-product .wpo-field-dropdown .nice-select-dropdown .list li').each(function() {
let fullText = $(this).html().trim()
if (fullText.includes('-')) {
let variationName = fullText.split('-').slice(1).join('-').trim()
$(this).html(variationName)
}
})
})
})For Radio Buttons:
jQuery(function($) {
$(document).ready(function() {
$('.wpo-field-product .wpo-radios .wpo-radio div').each(function() {
let fullText = $(this).html().trim()
if (fullText.includes('-')) {
let variationName = fullText.split('-').slice(1).join('-').trim()
$(this).html(variationName)
}
})
})
})For Products:
jQuery(function($) {
$(document).ready(function() {
$('.wpo-field-product .wpo-products-list tr.wpo-product-option__list-product .wpo-product-name a').each(function() {
let fullText = $(this).html().trim()
if (fullText.includes('-')) {
let variationName = fullText.split('-').slice(1).join('-').trim()
$(this).html(variationName)
}
})
})
})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 you can use our plugin customization service.