How to add CSS class "out-of-stock" to link if item is sold out woocommerce?-CodePudding

Now I have links like <a href="/////" >

And I need <a href="/////" >

CodePudding user response：

You can use the action hook - woocommerce_before_shop_loop_item to modify the link and add your own CSS class.

The following code should work -

if ( ! function_exists( 'custom_woocommerce_template_loop_product_link_open' ) ) {
    /**
     * Insert the opening anchor tag for products in the loop.
     */
    function custom_woocommerce_template_loop_product_link_open() {
        global $product;

        $link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
        
        if ( ! $product->is_in_stock() ) {
         $outOfStock = "out-of-stock";
        }

        echo '<a href="' . esc_url( $link ) . '" >';
    }
}
    
add_action( 'woocommerce_before_shop_loop_item', 'custom_woocommerce_template_loop_product_link_open', 10 );

You can add this code to your themes functions.php file or use a code snippets plugin.