web-dev-qa-db-ja.com

Woocommerce商品カテゴリに基づいて「カートに追加」ボタンの色を変更する

商品が入っているカテゴリに基づいて、商品/アーカイブページのすべての[カートに追加]ボタンの色を変更しようとしています。

特定のカテゴリの商品のみを表示するために、商品/アーカイブページにすでにフィルタが適用されています。

ただし、以下のコードに基づいて、「カートに追加」というテキストは変わりますが、色は変わりません。

助言がありますか？

    // Change add to cart button text per category
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_single_add_to_cart_text', 20, 2 );
function custom_single_add_to_cart_text( $text_button, $product ) {
    global $post;
    $domain = 'woocommerce';

    // HERE set the array of categories terms slug and corresponding colors and texts
    $categories_colors = array(
        'protein'  => array( 'color' => 'red', 'text' => __('Order your Protein', $domain ) ),
        'pantry'   =>  array( 'color' => 'blue', 'text' => __('Order your Pantry', $domain ) ),
    );

    $color = '';
    $text_button = __('Order now', $domain ); // default

    foreach ($categories_colors as $key => $value ) {
        if( has_term( $key, 'product_cat', $post->ID ) ){
            $color = $value['color'];
            $text_button = $value['text'];
            break;
        }
    }
    if ( empty($color) ) return $text_button; // Exit if empty

    // Dynamic css andjquery to set the color when defined
    ?>
    <style>
        button.single_add_to_cart_button.<?php echo $color; ?>{background-color:<?php echo $color; ?> !important;}
    </style>
    <?php
    // jQuery (add color css class)
    ?>
    <script type="text/javascript">
        (function($){
             $('button.single_add_to_cart_button').addClass('<?php echo $color; ?>');
        })(jQuery);
    </script>
    <?php

    return $text_button;
}
phpwoocommerceajaxjquerybuttons
1
Giuls

これはフィルタです。値を返すべきで、内部にHTML/CSS/JSをレンダリングするのではありません。色を変えるために、テンプレートファイルを上書きしなかったのはなぜでしょうか。例： woocomerce\single-product \カートに追加\ simple.php

0
Hồ Trọng Linh Ân