更改“添加到购物车"基于Woocommerce产品类别的按钮颜色 [英] Change "add to cart" button color based on Woocommerce product category

问题描述

在Woocommerce中，我试图根据其所在的产品类别来更改添加到购物车"按钮的颜色.到目前为止，我可以更改文本，但是我不知道该如何更改.以哈希格式(例如#fffff)传入持久性颜色值

In Woocommerce, I am trying to change the colour of the "Add to cart" button based on the product category that it is in. So far I am able to change the text, however I can't figure out how to pass in a persistant colour value in hash format (e.g. #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' );
    }
}

任何帮助表示赞赏.

推荐答案

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

Here is a way to change the button text and the button color depending on the product category:

// 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文件中.经过测试，可以正常工作.

Code goes in function.php file of your active child theme (or active theme). Tested and works.

您可以删除代码中的整个<style>博克，在活动主题styles.css文件(基于添加的css类)中添加自己的css规则

You can remove the entire <style> bock in the code adding your own css rules in your active theme styles.css file (based on the color added css class)

这篇关于更改“添加到购物车"基于Woocommerce产品类别的按钮颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！