CSS inside of a Javascript function is appearing in a dropdown menu

Question

My Javascript code is appearing within a dropdown menu (example URL is at the bottom of this post). I thought the browser would ignore valid HTML, but that doesn't seem to be happening in this example.

Some context: I have a Wordpress site and added Javascript code that adds the price variables next to the item names on a dropdown menu. Then I tried applying some CSS to the Javascript output (color red, float right, padding) so that the variation prices were easily seen next to the item names.

Here's the code:

function display_price_in_variation_option_name( $term ) {
    $product = wc_get_product();
    $id = $product->get_id();
    if ( empty( $term ) || empty( $id ) ) {
        return $term;
    }
    if ( $product->is_type( 'variable' ) ) {
        $product_variations = $product->get_available_variations();
    } else {
        return $term;
    }

    foreach($product_variations as $variation){
        if(count($variation['attributes']) > 1){
            return $term;
        }
        foreach($variation['attributes'] as $key => $slug){
            if("attribute_" == mb_substr( $key, 0, 10 )){
                $taxonomy = mb_substr( $key, 10 ) ;
                $attribute = get_term_by('slug', $slug, $taxonomy);
                if($attribute->name == $term){
                    $term .= "&nbsp;&nbsp; <span style=\"color: red; float: right; padding: 0% 7% 0% 0%;\"> &nbsp;&nbsp;" . wp_kses( wc_price($variation['display_price']), array()) . "&nbsp; </span> &nbsp;";
                }
            }
        }
    }
    
    return $term;

}

add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );

But then my in-line CSS code is appearing in the dropdown menu.

Here's an example URL of what's happening:

http://66.228.41.220/product/v-neck-t-shirt/

On that page, click on that dropdown menu and notice the <span> HTML code appears.

So then I tried to put the Javascript function into an element, so that I can access it in my style.css. Using this method:

https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style

But I can't seem to do it successfully. What am I missing here?

Answer 1

The html code you are seeing is due to woocommerce applying esc_html() to your output. It converts things like < into <.

In the specs for the option element it states that the only permitted content is:

Text, possibly with escaped characters (like é).

So you cannot have any tags in an option element. You can try this javascript for example:

$('#pa_color option').each(function(i, optionEl){
    var optionText = $(optionEl).text();
    var startIndex = optionText.indexOf('$');
    if(startIndex !== -1){
         var priceText = optionText.substr(startIndex);
         var restOfText = optionText.substring(0,startIndex);
         var output = restOfText + '<span style="color: #565656; float: right; padding: 0% 7% 0% 0%;">' + priceText + '</span>';
         $(optionEl).html(output);
    }
});

It works as you can see in the developer console, but it doesn't show on the page. The browser just ignores the tag...

<select>
<option><span style="color:red;">first and only option</span></option>
</select>

If you really need this functionality you should write your own select element using only divs, or you could try and find a plugin that does it for you like these ones.