根据 Woocommerce 产品类别更改“添加到购物车”按钮颜色答案

【问题标题】：Change "add to cart" button color based on Woocommerce product category根据 Woocommerce 产品类别更改“添加到购物车”按钮颜色
【发布时间】：2018-10-04 00:48:57
【问题描述】：

在 Woocommerce 中，我正在尝试根据其所在的产品类别更改“添加到购物车”按钮的颜色。到目前为止，我能够更改文本，但我不知道如何更改以哈希格式（例如#fffff）传入一个持久的颜色值

// Change add to cart button text per category
add_filter( 'woocommerce_product_single_add_to_cart_text', 'wps_custom_cart_button_text' );
function wps_custom_cart_button_text() {
    global $product;
    $terms = get_the_terms( $product->ID, 'product_cat' );
     foreach ($terms as $term) {
        $product_cat = $term->slug;
        break;
    }
    switch($product_cat) {
        case 'clothing';
        return __('Order your Clothes', 'your_theme_text_domain' );
        default;
        return __( 'Order now', 'your_theme_text_domain' );
    }
}

任何帮助表示赞赏。

【问题讨论】：

标签： php jquery wordpress button woocommerce

【解决方案1】：

以下是根据产品类别更改按钮文本和按钮颜色的方法：

// Change add to cart button text per category
add_filter( 'woocommerce_product_single_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(
        'clothing'  => array( 'color' => 'red', 'text' => __('Order your Clothes', $domain ) ),
        'posters'   =>  array( 'color' => 'blue', 'text' => __('Order your Posters', $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;
}

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

您可以删除代码中的整个<style> bock，在您的活动主题styles.css 文件中添加您自己的css 规则（基于颜色添加的css 类）

【讨论】：

它似乎在商店/产品页面 (woocommerce_product_add_to_cart_text) 上不起作用，并且 categories_color 数组似乎没有接受 # 颜色值（例如 #ed7b17）。我怎样才能传递这个？
我可以看到它适用于单个产品页面，但不适用于整个产品页面？在此处查看您的示例页面：cbleu.net/sites/tie3/shop
@Giuls 您的问题代码基于单个产品页面，而不是存档页面......在存档页面上整体工作对于 stackOverFlow 来说太宽泛了。我在这里的回答是一个示例，它向您展示了一种正确的工作方式……请记住，stackOverFlow 不是免费的编码服务……
我已经有一个规则来按类别分隔我的存档/产品页面，所以我只是想调用你上面为“woocommerce_product_add_to_cart_text()”方法编写的代码来应用它所有存档/产品页面。我将继续调查这是否可能......同时我已将您的答案标记为正确，因为它解决了原始问题。谢谢:)

【解决方案2】：

解决了使用 CSS 修改按钮样式而无需 PHP。调用分配的类别的类 ID，然后调用 woocommerce 按钮选择器元素。

只需将其放在您的附加 CSS 或自定义 CSS 部分：

/*Call the class ID of the category and the "add to cart" button assigned to that category*/    

.product_cat-CATEGORYNAME.product .button {

    /*Button styling here*/

    border-radius:5px;
    color:#ffff;
    background-color: #fffff;
}

【讨论】：