Формат Woocommerce вариантов цены

Question

Я добавляю цены в раскрывающееся меню вариантов WooCommerce, а затем меняю раскрывающееся меню на переключатели.Это прекрасно работает, но мне нужно стилизовать цены.

PHP добавляет цену к опциям выпадающего меню:

if( !is_admin() ) {
    add_filter( 'woocommerce_variation_option_name','display_price_in_variation_option_name');
    function display_price_in_variation_option_name( $term ) {
        global $product;
        if ( empty( $term ) ) {
            return $term;
        }
        if ( empty( $product->get_id() ) ) {
            return $term;
        }
        $variation_id = $product->get_children();
        foreach ( $variation_id as $id ) {
            $_product       = new WC_Product_Variation( $id );
            $variation_data = $_product->get_variation_attributes();
            foreach ( $variation_data as $key => $data ) {
                $display_price = $_product->get_price();

                if ( $data == $term ) {
                    $html = $term;
                    $html .= '-' . $display_price;
                    return $html;
                }
            }
        }
        return $term;
    }
}

JQuery меняет выпадающее меню на переключатели и метки.

$('.variations select').each(function (i, select) {
    var $select = jQuery(select);
    $select.find('option').each(function (j, option) {
        var $option = jQuery(option);
        // Create a radio:
        var $radio = jQuery('<input type="radio" />');
        // Set name and value:
        $radio.attr('name', $select.attr('name')).attr('value', $option.val());
        // Set checked if the option was selected
        if ($option.attr('selected')) $radio.attr('checked', 'checked');
        // Insert radio after select box:
        $select.after($radio);
        $radio.wrap('<div class="variation-wrap" />');
        // Insert a label:
        $radio.after(
            $("<label />").attr('for', $select.attr('name')).text($option.text())
        );
    });
});

Как я могу добавить тег span вокруг цены, чтобы я мог его стилизовать?

Answer 1

Я не нашел способа сделать это на стороне сервера, поэтому я выбрал решение jQuery, найденное здесь .

$('.variation-wrap label').html(function () {
    var text = $(this).text().split('-');
    var last = text.pop();
    return text.join(" ") + (text.length > 0 ? ' <span class="last">$' + last + '</span>' : last);
});