根据特定条件在 WooCommerce 商店和存档页面上添加自定义 CSS class 到 "add to cart" 按钮

Question

如果产品的库存数量为零或更少，我正在尝试禁用 WooCommerce 商店和档案页面上的“添加到购物车”按钮。

我不想隐藏它所以我想出了下面的代码。

我的问题是代码没有向元素添加样式，它替换了 html 树中的整个按钮代码，因此根本不显示按钮。

关于如何解决这个问题有什么想法吗？

add_action( 'woocommerce_loop_add_to_cart_link', 'remove_price_from_variable_products', 9 );

function remove_price_from_variable_products() {
    global $product;

    if( $product->get_stock_quantity() <= 0 ) {
    ?>
    <style> 
        .add_to_cart_button {
            cursor: not-allowed !important;
        }
    </style>
    <?php
        
add_action( 'woocommerce_after_shop_loop_item', 'custom_content_addtocart_button', 100 );

    }
}


function custom_content_addtocart_button() {
    echo '<br/><div class="button-notice">Contact Us for more information</div>';
}

Answer 1

到 add/edit/remove CSS 类从 WooCommerce 商店和存档页面上现有的添加到购物车按钮，您可以使用 woocommerce_loop_add_to_cart_args 过滤器挂钩

所以你得到：

function action_woocommerce_loop_add_to_cart_args( $wp_parse_args, $product ) {
    // Initialize
    $custom_class = '';
    
    // Certain condition, can be anything, in this specific case for the stock quantity. ADAPT TO YOUR NEEDS
    if ( $product->get_stock_quantity() <= 0 ) {
        $custom_class = 'button-not-allowed';
    }
    
    // NOT empty (from here on, no need to make any changes to my answer)
    if ( ! empty ( $custom_class ) ) {  
        // Class
        $wp_parse_args['class'] = implode(
            ' ',
            array_filter(
                array(
                    'button' . ' ' . $custom_class,
                    'product_type_' . $product->get_type(),
                    $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
                    $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ? 'ajax_add_to_cart' : '',
                )
            )
        );
    }

    return $wp_parse_args;
}
add_filter( 'woocommerce_loop_add_to_cart_args', 'action_woocommerce_loop_add_to_cart_args', 10, 2 );

注意：$product->get_stock_quantity()函数最好与$product->managing_stock()结合使用，但这要看你的需要

然后应用以下CSS

.button-not-allowed {
    cursor: not-allowed !important;
}

根据特定条件在 WooCommerce 商店和存档页面上添加自定义 CSS class 到 "add to cart" 按钮

Add custom CSS class to "add to cart" button on WooCommerce shop and archives pages based on certain condition

css

wordpress

product

woocommerce

hook-woocommerce