How to Add a ‘Checkout’ Button on WooCommerce Product Page?

Not all WooCommerce stores require the traditional buying process steps of adding a product, viewing the cart page, and then proceeding to the checkout page. Some stores, such as those offering WooCommerce Subscriptions, selling tickets, or managing event bookings, may benefit from allowing customers to checkout directly from the product page.

This approach makes the buying process easier and is ideal for stores where a single-product purchase is the primary focus. With this customization allows customers to bypass the shopping cart and proceed directly to the checkout page after adding a product to the cart.

Solution: Add a ‘Checkout’ Button on WooCommerce Product Page

The code snippet will add a ‘Proceed to Checkout’ button next to ‘Ad to Cart’ button on the product page, which will redirect to the checkout page when clicked.

add_action( 'woocommerce_after_add_to_cart_button', 'ts_add_proceed_to_checkout_button', 20 );

function ts_add_proceed_to_checkout_button() {
    // Get the WooCommerce checkout URL
    $checkout_url = wc_get_checkout_url();

    // Output the "Proceed to Checkout" button with inline styling
    echo '<a href="' . esc_url( $checkout_url ) . '" class="button" style="background-color:  #f7b619; padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; text-decoration: none; display: inline-block; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s, box-shadow 0.2s;">Proceed to Checkout</a>';
}

Output

When a customer visits the product page, they can add the product and they can directly redirect to the checkout page using the ‘Proceed to Checkout’ button placed on the product page. This is particularly useful for single-product purchases or scenarios where reviewing the cart is unnecessary.

We can further enhance the WooCommerce store’s purchasing flow by redirecting customers directly from the shop page to the checkout page. By making your WooCommerce Add to Cart button redirect to the checkout page, you simplify the purchase process and potentially reduce cart abandonment by eliminating extra steps in the checkout journey.