WooCommerce change size and color of product availability

user_13937730 0
Viewed 949

I have this code to display the product availability in the product detail page. I want to edit the font size and color of the displayed availability.

Can anyone help me?

add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability( $availability, $_product ) {
    
    // Change In Stock Text
    if ( $_product->is_in_stock() ) {
        $availability['availability'] = __('Verfügbar', 'woocommerce') ;
    }
    // Change Out of Stock Text
    if ( ! $_product->is_in_stock() ) {
        $availability['availability'] = __('Leider ausverkauft!', 'woocommerce');
    }
    return $availability;
}
woocommerce wordpress css html php
1 Answers

Use instead the following:

add_filter( 'woocommerce_get_availability', 'filter_wc_get_availability', 10, 2);
function filter_wc_get_availability( $availability, $product ) {

    // In stock
    if ( 'in-stock' ===  $availability['class'] ) {
        $availability['availability'] = __('Verfügbar', 'woocommerce');
    }
    // Out of stock
    elseif ( 'out-of-stock' ===  $availability['class'] ) {
        $availability['availability'] = __('Leider ausverkauft!', 'woocommerce');
    }

    return $availability;
}

Inline CSS style rules (can be added instead to the theme's styles.ccs file):

add_action('wp_head', 'product_availability_css_styling_rules', 9990 );
function product_availability_css_styling_rules() {
    // Only on single product pages
    if( is_product() ):
    ?><style>
        .stock.in-stock {font-size: 13px !important; color: #0f834d;}
        .stock.out-of-stock {font-size: 13px !important; color: #e2401c;}
    </style><?php
    endif;
}

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

user_37307540
Related