Storefront主题下WooCommerce Ajax加购后切换为View Cart按钮的PHP实现

Hey there! I've got you covered with a complete solution tailored for your Storefront + WooCommerce setup. We'll combine PHP, JavaScript, and CSS to swap the "Add to Cart" button with a styled "View Cart" link after a successful Ajax add. Here's how to implement it:

1. PHP Code (Add to Your Theme's functions.php or a Custom Plugin) #

This code registers our custom scripts, passes critical data to the frontend, and optionally tweaks the button HTML for easier manipulation:

/**
 * Register custom scripts/styles for Ajax add-to-cart button modification
 */
function custom_ajax_cart_setup() {
    // Only load on product-related pages
    if ( is_product() || is_shop() || is_product_category() || is_product_tag() ) {
        // Enqueue custom JS, dependent on jQuery and WooCommerce's core add-to-cart script
        wp_enqueue_script(
            'custom-ajax-cart',
            get_stylesheet_directory_uri() . '/js/custom-ajax-cart.js',
            array( 'jquery', 'wc-add-to-cart' ),
            wp_get_theme()->get('Version'),
            true
        );

        // Pass dynamic cart URL to JavaScript (avoids hardcoding)
        wp_localize_script(
            'custom-ajax-cart',
            'CustomCartVars',
            array(
                'cartUrl' => wc_get_cart_url()
            )
        );

        // Enqueue custom styles for the View Cart button
        wp_enqueue_style(
            'custom-ajax-cart-styles',
            get_stylesheet_directory_uri() . '/css/custom-ajax-cart.css',
            array(),
            wp_get_theme()->get('Version')
        );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_ajax_cart_setup' );

/**
 * Optional: Adjust default Add to Cart button HTML structure
 * Use this if Storefront's default markup needs refining for smoother replacement
 */
function custom_modify_add_to_cart_button( $button, $product ) {
    if ( $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() ) {
        $button = sprintf(
            '<button type="submit" data-product_id="%s" data-product_sku="%s" class="single_add_to_cart_button button alt %s">%s</button>',
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( wc_get_product_class( '', $product ) ),
            esc_html( $product->single_add_to_cart_text() )
        );
    }
    return $button;
}
add_filter( 'woocommerce_single_product_add_to_cart_button', 'custom_modify_add_to_cart_button', 10, 2 );
add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_modify_add_to_cart_button', 10, 2 );

2. JavaScript Code (Create js/custom-ajax-cart.js in Your Theme Directory) #

This listens for WooCommerce's Ajax success event and swaps the button with a "View Cart" link:

jQuery(document).ready(function($) {
    // Listen for the 'added_to_cart' event triggered after successful Ajax add
    $(document).on('added_to_cart', function(event, fragments, cartHash, $button) {
        // Target the specific button that was clicked
        const $targetBtn = $button || $('.single_add_to_cart_button');
        
        // Replace the button with a styled View Cart link
        $targetBtn.replaceWith(`
            <a href="${CustomCartVars.cartUrl}" class="view-cart-button button alt">
                View Cart
            </a>
        `);
    });
});

3. CSS Code (Create css/custom-ajax-cart.css in Your Theme Directory) #

Add distinct styling to make the "View Cart" button stand out from the original:

/* Custom styles for View Cart button */
.view-cart-button {
    background-color: #27ae60 !important; /* Green to differentiate from default blue */
    border-color: #229954 !important;
    color: #fff !important;
}

.view-cart-button:hover {
    background-color: #2ecc71 !important;
    border-color: #27ae60 !important;
}

Quick Tips: #

• Use a child theme for Storefront to avoid losing changes during theme updates.
• If you need support for variable products, adjust the JavaScript selector to target variable product add-to-cart buttons specifically.
• Verify Ajax add-to-cart is enabled (it's default for Storefront, but some plugins may disable it).

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