格式 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);
});

格式 Woocommerce 变体价格

Format Woocommerce variations price

php

wordpress

jquery

woocommerce

price