WooCommerce技术求助：移除加购提示、替换按钮及解决CSS失效

Hey there! Let's work through your two WooCommerce needs step by step—first fixing that stubborn "已添加到您的购物车" message, then replacing the quantity controls and add-to-cart buttons with custom image buttons.

1. 移除购物车页面的"已添加到您的购物车"提示文本 #

The CSS you tried didn't work because you targeted the checkout page (.woocommerce-checkout) instead of the cart page, and the selector might not be specific enough. Here's how to fix it:

方法1：CSS 解决方案（推荐，简单直接） #

Add this to your child theme's style.css file:

/* 隐藏购物车页面的添加成功提示 */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .added_to_cart_message {
    display: none !important;
}

If this still doesn't take effect, right-click the message in your browser, use "Inspect" to check the exact CSS class of the element, and adjust the selectors to match.

方法2：PHP 钩子（更彻底，避免CSS优先级问题） #

If CSS isn't cutting it, add this to your child theme's functions.php file to remove the notice entirely via WooCommerce hooks:

// 移除购物车页面的所有WooCommerce提示（包括添加成功消息）
add_action( 'wp_loaded', 'remove_cart_success_notices' );
function remove_cart_success_notices() {
    // 移除购物车页面顶部的提示
    remove_action( 'woocommerce_before_cart', 'wc_print_notices', 10 );
    // 如果是从单个商品页跳转过来的提示，也移除这个钩子
    remove_action( 'woocommerce_after_single_product', 'wc_print_notices', 10 );
}

2. 替换购物车页面的数量控件和加入购物车按钮为自定义图片按钮 #

This requires a mix of PHP to replace the default elements, CSS to style your custom button, and JavaScript to handle the click functionality.

步骤1：用PHP替换默认控件 #

Add this to your child theme's functions.php file:

// 替换购物车项的数量输入为自定义图片按钮
add_filter( 'woocommerce_cart_item_quantity', 'replace_cart_quantity_with_custom_image_button', 10, 3 );
function replace_cart_quantity_with_custom_image_button( $quantity_html, $cart_item_key, $cart_item ) {
    // 清空默认的数量输入HTML
    $quantity_html = '';
    
    // 添加自定义图片按钮（替换下面的图片URL为你自己的）
    $custom_button = sprintf(
        '<button class="custom-cart-action-btn" data-cart-key="%s">
            <img src="%s" alt="自定义操作按钮" />
        </button>',
        esc_attr( $cart_item_key ),
        esc_url( 'https://your-site.com/path-to-your-custom-image.png' ) // 替换成你的图片链接
    );
    
    return $quantity_html . $custom_button;
}

// 移除默认的"更新购物车"按钮（如果不需要的话）
remove_action( 'woocommerce_cart_actions', 'woocommerce_update_cart_action' );

步骤2：添加CSS样式 #

Add this to your child theme's style.css to style the button:

/* 自定义购物车按钮样式 */
.custom-cart-action-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.custom-cart-action-btn img {
    width: auto; /* 根据你的需求调整宽度 */
    height: 45px; /* 根据你的需求调整高度 */
    transition: opacity 0.2s ease;
}

.custom-cart-action-btn:hover img {
    opacity: 0.8; /* 鼠标悬停时的透明度效果 */
}

步骤3：添加JavaScript处理点击功能 #

Create a new JS file in your child theme (e.g., custom-cart-actions.js) with this code:

jQuery(document).ready(function($) {
    // 监听自定义按钮的点击事件
    $('.custom-cart-action-btn').on('click', function() {
        const cartKey = $(this).data('cart-key');
        const desiredQuantity = 1; // 这里可以设置你想要的数量，比如固定值或逻辑计算
        
        // 发送AJAX请求更新购物车
        $.ajax({
            url: wc_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'custom_update_cart_quantity',
                cart_key: cartKey,
                quantity: desiredQuantity
            },
            success: function() {
                // 更新购物车页面内容
                $(document.body).trigger('wc_update_cart');
                // 如果需要提示，可以在这里添加自定义提示
            },
            error: function() {
                alert('更新购物车失败，请重试');
            }
        });
    });
});

Then enqueue this JS file in your child theme's functions.php:

// 加载自定义购物车JS文件
add_action( 'wp_enqueue_scripts', 'enqueue_custom_cart_scripts' );
function enqueue_custom_cart_scripts() {
    if ( is_cart() ) {
        wp_enqueue_script(
            'custom-cart-actions',
            get_stylesheet_directory_uri() . '/custom-cart-actions.js',
            array( 'jquery', 'wc-cart' ),
            wp_get_theme()->get('Version'),
            true
        );
    }
}

步骤4：添加AJAX处理函数（PHP） #

Add this to your child theme's functions.php to handle the AJAX request:

// AJAX处理购物车数量更新
add_action( 'wp_ajax_custom_update_cart_quantity', 'custom_update_cart_quantity' );
add_action( 'wp_ajax_nopriv_custom_update_cart_quantity', 'custom_update_cart_quantity' );
function custom_update_cart_quantity() {
    // 验证请求参数
    if ( ! isset( $_POST['cart_key'] ) || ! isset( $_POST['quantity'] ) ) {
        wp_send_json_error( '缺少必要参数' );
    }
    
    $cart_key = sanitize_text_field( $_POST['cart_key'] );
    $quantity = intval( $_POST['quantity'] );
    
    // 更新购物车数量
    WC()->cart->set_quantity( $cart_key, $quantity, true );
    WC()->cart->calculate_totals();
    
    wp_send_json_success();
}

Make sure to replace the image URL in the PHP code with your actual custom button image, and adjust the quantity logic in the JS if you need something other than a fixed value (like incrementing/decrementing the current quantity).

内容的提问来源于stack exchange，提问作者Dragonknigh