如果商品已售罄woocommerce，如何添加 CSS 类“缺货”链接？

Answer 1

您可以使用动作挂钩 -woocommerce_before_shop_loop_item修改链接并添加您自己的 CSS 类。

以下代码应该可以工作 -

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 ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link ' . $outOfStock .'">';
    }
}
    
add_action( 'woocommerce_before_shop_loop_item', 'custom_woocommerce_template_loop_product_link_open', 10 );

您可以将此代码添加到您的主题 functions.php 文件或使用代码 sn-ps 插件。