格式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解决方案找到here。

$('.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);
});