CODEWITHSUNDEEP
phpjquerywordpressbuttonwoocommerce
Giuls
Giuls

Reputation: 580

Change "add to cart" button color based on Woocommerce product category

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.

Upvotes: 1

Views: 2272

Answers (2)

Giuls
Giuls

Reputation: 580

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

Upvotes: 0

LoicTheAztec
LoicTheAztec

Reputation: 254221

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)

Upvotes: 1

Related Questions