删除或隐藏 WooCommerce 添加到购物车按钮

Question

我想隐藏添加到购物车按钮并显示自定义文本而不是按钮。

我正在尝试使用以下钩子来删除按钮：

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart');

Answer 1

这就是您正在寻找的方式（我认为）。

第一个功能将用链接到单个产品页面的普通按钮替换商店页面上的“添加到购物车”按钮，如下所示：

第二个功能将用您的自定义文本替换“添加到购物车”按钮（和数量），如下所示：

这是代码：

// Shop and archives pages: we replace the button add to cart by a link to the product
add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_text_replace_button', 10, 2 );
function custom_text_replace_button( $button, $product  ) {
    $button_text = __("View product", "woocommerce");
    return '<a class="button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
}

// replacing add to cart button and quantities by a custom text
add_action( 'woocommerce_single_product_summary', 'replacing_template_single_add_to_cart', 1, 0 );
function replacing_template_single_add_to_cart() {

    // Removing add to cart button and quantities
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

    // The text replacement
    add_action( 'woocommerce_single_product_summary', function(){

        // set below your custom text
        $text = __("My custom text goes here", "woocommerce");

        // Temporary style CSS
        $style_css = 'style="border: solid 1px red; padding: 0 6px; text-align: center;"';

        // Output your custom text
        echo '<p class="custom-text" '.$style_css.'>'.$text.'</a>';
    }, 30 );
}

代码位于活动子主题（或主题）的 function.php 文件中，或者也位于任何插件文件中。

已测试且有效

Answer 2

1。如果您想完全禁用“添加到购物车”按钮，请将此代码添加到主题的functions.php 文件中。

add_filter( 'woocommerce_is_purchasable', false );

2。要在添加到购物车按钮后添加一些 HTML 内容，请尝试此代码。

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart_button_func' );

function add_content_after_addtocart_button_func() {
    echo '<p>Hi, I'm the text after Add to cart Button.</p>';
}

Answer 3

我可以使用 WordPress 插件来做到这一点，我后来发现https://wordpress.org/plugins/woo-options/

Answer 4

0

要在所有变体缺货时隐藏可变产品的“添加到购物车”按钮，请在主题的functions.php文件或自定义插件中使用此简化的PHP代码。

这是一个可行的解决方案：

隐藏缺货变化的“添加到购物车”按钮的 PHP 代码

add_action('woocommerce_single_product_summary', 'hide_add_to_cart_for_out_of_stock_variations', 15);
function hide_add_to_cart_for_out_of_stock_variations() {
    global $product;  
    if ($product->is_type('variable')) {
    $variations = $product->get_available_variations();
    $all_out_of_stock = true;
    // Loop through variations and check if any are in stock
    foreach ($variations as $variation) {
        if ($variation['is_in_stock']) {
            $all_out_of_stock = false;
            break;
        }
    }
    // Hide the Add to Cart button if all variations are out of stock
    if ($all_out_of_stock) {
        echo '<style>.single_add_to_cart_button { display: none !important; }</style>';
    }
}

}

如何运作：

Hook：woocommerce_single_product_summary 在产品页面上运行。检查是否为可变产品：确认产品类型为可变产品。

检查变体：循环遍历所有可用变体并检查是否有库存。

隐藏按钮：如果所有变体都缺货，请添加 CSS 来隐藏“添加到购物车”按钮。

注意：add_action 中的优先级 15 确保函数在 WooCommerce 呈现产品详细信息后运行。

CSS 规则仅在所有变体都缺货时隐藏按钮。当没有可供购买的变体时，此代码应有效隐藏“添加到购物车”按钮。