woocommerce

Customize the URL that WooCommerce uses for the "Return to shop" button shown when the cart is empty.

Option 1 - Redirect to a Fixed URL

Add to functions.php in your child theme:

function wc_empty_cart_redirect_url() {
    return 'https://yourdomain.com/your-page/';
}
add_filter( 'woocommerce_return_to_shop_redirect', 'wc_empty_cart_redirect_url' );

Option 2 - Redirect to the Previously Visited Page

function wc_empty_cart_redirect_url() {
    return wp_get_referer() ?: home_url();
}
add_filter( 'woocommerce_return_to_shop_redirect', 'wc_empty_cart_redirect_url' );

Verify

Empty your cart and click "Return to shop" - it should go to the URL you specified.

Replace or restyle the default WooCommerce cart item removal icon (the red circle with an X) using CSS or a filter hook.

Option 1 - CSS Override

Add to your theme's style.css or the WordPress Customizer:

/* Hide default X and replace with a custom icon */
a.remove {
    color: #cc0000 !important;
    font-size: 1.2em;
    font-weight: bold;
}
a.remove:hover {
    background: #cc0000;
    color: #fff !important;
}

Option 2 - Replace the X with Text via Filter

Add to functions.php:

function custom_remove_item_link( $link, $cart_item_key ) {
    return sprintf(
        '<a href="%s" class="remove" aria-label="Remove this item">Remove</a>',
        esc_url( WC()->cart->get_remove_url( $cart_item_key ) )
    );
}
add_filter( 'woocommerce_cart_item_remove_link', 'custom_remove_item_link', 10, 2 );

Notes

• Test with your active theme - Storefront and other themes may apply their own cart styles.

The default WooCommerce cart uses an "x" character as the remove button, which is not accessible to screen readers. Replace it with descriptive text using a filter.

Solution

Add to functions.php:

function accessible_remove_item_link( $html, $cart_item_key ) {
    return sprintf(
        '<a href="%s" class="remove" aria-label="%s">%s</a>',
        esc_url( WC()->cart->get_remove_url( $cart_item_key ) ),
        esc_attr__( 'Remove this item', 'woocommerce' ),
        esc_html__( 'Remove', 'woocommerce' )
    );
}
add_filter( 'woocommerce_cart_item_remove_link', 'accessible_remove_item_link', 10, 2 );

Hide Text Visually (Show Icon Instead)

If you want to show a Font Awesome icon but keep accessible text for screen readers:

.remove .screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    position: absolute;
}
.remove::before {
    content: "\f00d"; /* Font Awesome times icon */
    font-family: "Font Awesome 6 Free";
}

Customize the URL that WooCommerce uses for the "Return to shop" button shown when the cart is empty.

Option 1 - Redirect to a Fixed URL

Add to functions.php in your child theme:

function wc_empty_cart_redirect_url() {
    return 'https://yourdomain.com/your-page/';
}
add_filter( 'woocommerce_return_to_shop_redirect', 'wc_empty_cart_redirect_url' );

Option 2 - Redirect to the Previously Visited Page

function wc_empty_cart_redirect_url() {
    return wp_get_referer() ?: home_url();
}
add_filter( 'woocommerce_return_to_shop_redirect', 'wc_empty_cart_redirect_url' );

Verify

Empty your cart and click "Return to shop" - it should go to the URL you specified.

Customize the "Proceed to Checkout" button label in the WooCommerce cart using a filter hook in functions.php.

Solution

Add to your child theme's functions.php:

add_filter( 'woocommerce_order_button_text', 'custom_checkout_button_text' );

function custom_checkout_button_text() {
    return __( 'Complete My Order', 'woocommerce' );
}

For the cart page button specifically:

add_filter( 'woocommerce_proceed_to_checkout_button_text', function() {
    return 'Go to Checkout';
});

Notes

• Use a child theme or a custom plugin to avoid losing changes on theme updates.
• The woocommerce_order_button_text filter changes the "Place Order" button on the checkout page; use woocommerce_proceed_to_checkout_button_text for the cart page button.