Change “add to cart” button color based on Woocomm

Question

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' );
    }
}

Any help appreciated.

Answer 1

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;
}

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

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)

Answer 2

Solved using CSS to modify the button style without PHP. Calling the class ID of the category assigned and then woocommerce button selector element.

Simply put this in your Additional CSS or Custom CSS section:

/*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;
}