Change add to cart button color and disable it for out of stock products in Woocommerce

2
votes

In woocommerce I have changed the add to cart button redirect to add to checkout page.

When some products are out of stock in categories or homepage the add to checkout button misses the content icon.

How Can I change the color of the button using php and disable it for button pressed event

Shall I use something like:

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_stock', 10 );
function woocommerce_template_loop_stock() {
global $product;
if ( ! $product->managing_stock() && ! $product->is_in_stock() )
    echo '<p class="stock out-of-stock">Out of Stock</p>';
}

But I am a bit confused

1
phpwordpressbuttonwoocommerceproduct

1 Answers

2
votes

Try the following code:

// For Woocommerce version 3 and above only
add_filter( 'woocommerce_loop_add_to_cart_link', 'filter_loop_add_to_cart_link', 20, 3 );
function filter_loop_add_to_cart_link( $button, $product, $args = array() ) {
    if( $product->is_in_stock() ) return $button;

    // HERE set your button text (when product is not on stock)
    $button_text = __('Not available', 'woocommerce');

    // HERE set your button STYLING (when product is not on stock)
    $color = "#777";      // Button text color
    $background = "#aaa"; // Button background color


    // Changing and disbling the button when products are not in stock
    $style = 'color:'.$color.';background-color:'.$background.';cursor:not-allowed;';
    return sprintf( '<a class="button disabled" style="%s">%s</a>', $style, $button_text );
}

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

enter image description here