如何在WooCommerce购物车页面移除区块并自定义图片按钮？

Hey there, let's work through your WooCommerce cart page customization needs step by step—got you covered on both questions!

First, let's fix that "Added to cart" message issue. The CSS you tried was targeting the checkout page (.woocommerce-checkout), but you need to target the cart page instead. That's why it wasn't working!

Try this updated CSS in your Site Origin CSS plugin:

/* Hide "Added to cart" notice on cart page */
body.woocommerce-cart .woocommerce .woocommerce-message {
    display: none !important;
}

If it still doesn't take effect, a couple of quick checks:

• Clear your site and browser cache—sometimes old styles stick around.
• Right-click the notice and inspect it to confirm the exact CSS classes (some themes might add custom prefixes).

If CSS truly isn't cutting it (rare, but possible), you can use a PHP hook to remove the notices entirely. Add this to your theme's functions.php file (or a custom plugin):

// Remove all notices from the cart page
remove_action( 'woocommerce_before_cart', 'wc_print_notices' );

To swap out the default quantity box and button for a custom image button, we'll combine PHP hooks to remove the default elements and add your custom one, plus a little CSS to polish it.

Step 1: Remove Default Elements & Add Custom Image Button #

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

// Remove default quantity input and add-to-cart button
remove_action( 'woocommerce_before_add_to_cart_quantity', 'woocommerce_before_add_to_cart_quantity' );
remove_action( 'woocommerce_after_add_to_cart_quantity', 'woocommerce_after_add_to_cart_quantity' );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

// Add custom image-based add-to-cart button
add_action( 'woocommerce_single_product_summary', 'custom_image_add_to_cart_button', 30 );
function custom_image_add_to_cart_button() {
    global $product;
    $product_id = $product->get_id();
    // Replace this URL with your actual custom button image URL
    $button_image_url = 'https://your-domain.com/path-to-your-button-image.png';
    
    // Output the image button linked to the add-to-cart action
    ?>
    <a href="<?php echo esc_url( wc_get_add_to_cart_url( $product_id ) ); ?>" 
       class="custom-add-to-cart-btn"
       data-product-id="<?php echo esc_attr( $product_id ); ?>">
        <img src="<?php echo esc_url( $button_image_url ); ?>" alt="Add to Cart" />
    </a>
    <?php
}

Step 2: Style the Custom Button #

Add this CSS to your Site Origin CSS plugin to make the button look clean:

/* Style custom image add-to-cart button */
.custom-add-to-cart-btn {
    display: inline-block;
    border: none;
    padding: 0;
    background: transparent;
    text-decoration: none;
}

.custom-add-to-cart-btn img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    /* Add hover effect if you want */
    transition: opacity 0.3s ease;
}

.custom-add-to-cart-btn img:hover {
    opacity: 0.8;
}

Step 3 (Optional): Add AJAX Functionality (No Page Refresh) #

If you want the button to add items to the cart without reloading the page, add this JavaScript to your theme's footer or a custom JS plugin:

jQuery(document).ready(function($) {
    $('.custom-add-to-cart-btn').on('click', function(e) {
        e.preventDefault();
        var productId = $(this).data('product-id');
        
        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'woocommerce_add_to_cart',
                product_id: productId
            },
            success: function(response) {
                // Refresh cart fragments to update the cart icon
                $(document.body).trigger('wc_fragment_refresh');
                // Optional: Show a success message if needed
                alert('Item added to cart!');
            }
        });
    });
});

That should get you exactly the behavior you're looking for. Test it out and tweak the image URL or styles to match your site's design!

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