修改WooCommerce加入购物车按钮点击后的::after内容及HTML输出结构

Hey there! No worries at all—we’ve all been WooCommerce newbies once 😊 Let’s break down how to tackle both of your requests step by step, without touching core WooCommerce files (which is always best practice to avoid losing changes on updates).

1. Modify the "Proceed to cart" text in the ::after pseudo-element #

WooCommerce uses localized JavaScript strings for this feedback text, so we can hook into that to update it without rewriting the entire script.

Add this PHP snippet to your theme's functions.php file (or a custom plugin): #

add_filter( 'woocommerce_get_script_data', 'custom_wc_change_proceed_to_cart_text', 10, 2 );
function custom_wc_change_proceed_to_cart_text( $params, $handle ) {
    // Target the wc-add-to-cart script's localization data
    if ( 'wc-add-to-cart' === $handle ) {
        // Replace "Go to Cart" with your desired text
        $params['i18n']['proceedToCart'] = 'Go to Cart';
    }
    return $params;
}

This overrides the default "Proceed to cart" string that the script uses for the pseudo-element content.

2. Move the link from ::after to a or

tag #

The default behavior uses CSS pseudo-elements to show the link, but we can override the JavaScript event handler to inject a real HTML element instead.

Step 1: Add custom JavaScript #

Create a new JS file (e.g., custom-add-to-cart.js) in your theme's js folder, or use a custom code snippet plugin to add this:

jQuery( function( $ ) {
    // Unbind WooCommerce's default added_to_cart handler for add-to-cart buttons
    $( document ).off( 'added_to_cart', '.add_to_cart_button' );
    
    // Bind our custom handler
    $( document ).on( 'added_to_cart', '.add_to_cart_button', function( event, fragments, cart_hash, button ) {
        // Remove the "added" class to disable the default pseudo-element
        button.removeClass( 'added' );
        
        // Create your custom element (swap <span> for <p> if preferred)
        var cartLinkContainer = $( '<span class="custom-cart-link-container"></span>' );
        // Build the cart link with your custom text
        var cartLink = $( '<a href="' + wc_add_to_cart_params.cart_url + '" class="button wc-forward">Go to Cart</a>' );
        
        // Add the link to the container and insert it after the button
        cartLinkContainer.append( cartLink );
        button.after( cartLinkContainer );
        
        // Optional: Auto-hide the link after 5 seconds (adjust timing as needed)
        setTimeout( function() {
            cartLinkContainer.fadeOut( 'fast', function() {
                $( this ).remove();
            });
        }, 5000 );
    } );
} );

Step 2: Enqueue the custom JS file #

Add this PHP snippet to your theme's functions.php to load the script:

add_action( 'wp_enqueue_scripts', 'custom_enqueue_add_to_cart_script' );
function custom_enqueue_add_to_cart_script() {
    // Enqueue our custom script, making sure it loads after WooCommerce's add-to-cart script
    wp_enqueue_script( 'custom-add-to-cart', get_stylesheet_directory_uri() . '/js/custom-add-to-cart.js', array( 'jquery', 'wc-add-to-cart' ), wp_get_theme()->get( 'Version' ), true );
}

Step 3: Add CSS to style your new element #

Add this to your theme's style.css or customizer's additional CSS panel:

/* Hide the default pseudo-element feedback */
.add_to_cart_button.added::after {
    display: none !important;
}

/* Style your custom link container */
.custom-cart-link-container {
    margin-left: 10px;
    /* Add any other styling you want here */
}

That’s it! Now when a user clicks the add-to-cart button, you’ll get your custom text in a real HTML element instead of a pseudo-element, and you’ve full control over the styling and behavior.

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