가변 제품 속성:표시된 각 라디오 버튼 텍스트 값 사용자 정의

가변 제품 속성:표시된 각 라디오 버튼 텍스트 값 사용자 정의

WoCommerce에서 WC 변형 라디오 버튼 플러그인(8manos 기준)을 사용하여 일반적인 드롭다운 선택기를 Radio Buttons로 교체하고 있습니다.

자녀 테마에 아래 코드를 추가했습니다.function.php:

// Display the product variation price inside the variations dropdown.
add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );

function display_price_in_variation_option_name( $term ) {
    global $wpdb, $product;

    if ( empty( $term ) ) return $term;
    if ( empty( $product->id ) ) return $term;

    $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" );

    $term_slug = ( !empty( $result ) ) ? $result[0] : $term;

    $query = "SELECT postmeta.post_id AS product_id
                FROM {$wpdb->prefix}postmeta AS postmeta
                    LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id )
                WHERE postmeta.meta_key LIKE 'attribute_%'
                    AND postmeta.meta_value = '$term_slug'
                    AND products.post_parent = $product->id";

    $variation_id = $wpdb->get_col( $query );

    $parent = wp_get_post_parent_id( $variation_id[0] );




    if ( $parent > 0 ) {
         $_product = new WC_Product_Variation( $variation_id[0] );
         return  '' ."<font size='3' face='Lato'>". wp_kses( woocommerce_price( $_product->get_price() ), array() ) . "<font size='3' color='red' face='Lato' style='normal' weight='300'>".' - ('.$term.')';

    }
    return $term;
}

가능한지 확인하기 위해 네 가지 변형 이름을 모두 스타일링 할 수 있었습니다.하지만 각각 4가지 색상이 필요합니다.그게 제가 도움이 필요한 부분입니다.

아래 이미지는 제가 원하는 것을 보여줍니다(각 "옵션"마다 다른 색상).
"Color" 변형을 무시합니다."Tab" 변형만 수정하면 됩니다.

현재 4가지 라디오 옵션의 각 변경명은 '레드'이며, 각각 다른 색상으로 부탁드립니다.

그걸 달성하려면 내 코드에 무엇을 바꿔야 합니까?

감사해요.

2021년 업데이트

다음은 "Tab" 속성 라디오 버튼 사용자 지정 표시된 태그를 속성 슬러그와 의 조합에 따라 다른 클래스 값을 가진 텍스트로 표시하는 "Tab" 속성 라디오 버튼 주위에만 표시되는 당신의 다시 찾은 코드입니다.

따라서 'pa_tab' 속성에 대해서만 사용자 지정 텍스트가 표시된 각 라디오 버튼에 CSS 스타일 색상을 적용하여 해당 CSS 규칙을 활성 테마에 추가할 수 있습니다.style.css…

수정된 코드는 다음과 같습니다.

// Custom function that get the variation id from product attribute option name
function get_variation_id_from_option_name( $term_slug, $taxonomy, $product_id ) {
    global $wpdb;

    return $wpdb->get_var( $wpdb->prepare( "
        SELECT pm.post_id
        FROM {$wpdb->prefix}postmeta pm
        LEFT JOIN {$wpdb->prefix}posts p ON pm.post_id = p.ID
        WHERE pm.meta_key LIKE '%s'
        AND pm.meta_value = '%s'
        AND p.post_parent = %d
    ", 'attribute_' . $taxonomy, $term_slug, $product_id ) );
}


// Display the product variation price inside the variations dropdown.
add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );
function display_price_in_variation_option_name( $option_name ) {
    global $product;

    $taxonomy = 'pa_tab'; // HERE Define the targetted product attribute taxonomy pa_color
    
    $term     = get_term_by( 'name', $option_name, $taxonomy );

    if ( is_admin() || ! is_a( $term, 'WP_Term' ) || ! is_a( $product, 'WC_Product' ) ) {
        return $option_name;
    }

    $variation_id = get_variation_id_from_option_name( $term->slug, $taxonomy, $product->get_id() );

    if ( $variation_id > 0 ) {
        $variation  = wc_get_product( $variation_id );
        $price_html = wc_price( wc_get_price_to_display( $variation ) );

        if ( has_term( $option_name, $taxonomy, $product->get_id() ) ) {
            $output = ' <span class="'.$taxonomy.'-price">' . strip_tags( $price_html ) . '</span><span class="'.$taxonomy.'-'.$term->slug.'"> - ('.$option_name.')</span>';
        } else {
            $output = ' ' . $option_name;
        }
        return $output;
    }
    return $option_name;
}

코드가 작동합니다.활성 하위 테마(또는 테마)의 php 파일 또는 플러그인 파일에 있습니다.

이 코드는 테스트되고 작동합니다.

생성된 html 코드는 다음과 같습니다.

<td class="value">
    <div>
        <input type="radio" name="attribute_pa_color" value="option-blue" id="pa_tab_v_option-blue">
        <label for="pa_tab_v_option-blue"> 
            <span class="pa_tab-price">$99.00</span>
            <span class="pa_tab-option-blue"> - (Option Blue)</span>
        </label>
    </div>
    <div>
        <input type="radio" name="attribute_pa_color" value="option-green" id="pa_tab_v_option-green">
        <label for="pa_tab_v_option-green"> 
            <span class="pa_tab-price">$299.00</span>
            <span class="pa_tab-option-green"> - (Option Green)</span>
        </label>
    </div>
    <!-- ... / ... ... -->                      
</td>

---

따라서 CSS 규칙을 사용하여 사용자 지정 텍스트를 표시하는 특정 라디오 버튼을 대상으로 합니다.

span.pa_tab-price {
    font-family: lato, sans-serif; 
    font-size: medium;
}
span.pa_tab-option-blue, span.pa_tab-option-green,
span.pa_tab-option-purple, span.pa_tab-option-orange {
    font-family: lato, sans-serif; 
    font-size: medium;
    font-style: normal;
    font-weight: 300;
}
span.pa_tab-option-blue {
    color: blue;
}
span.pa_tab-option-green {
    color: green;
}
span.pa_tab-option-purple {
    color: purple;
}
span.pa_tab-option-orange {
    color: orange;
}

이것은 단지 예시일 뿐입니다.

언급URL : https://stackoverflow.com/questions/43435329/variable-product-attribute-customizing-each-displayed-radio-buttons-text-value