Is there any way of changing WooCommerce Add to Cart button into “View Product” or “Add to Basket” or anything you like?

WooCommerce, the eCommerce platform for WordPress, shows “Add to cart” button by default on your shop page and archive pages.

What if you want to show “View Product” button instead of “Add to Cart” for your customers?

Well, there is.

How to Change WooCommerce Add To Cart button text with ‘View Product’

Instead of showing the default WooCommerce Add To Cart button, you can remove or replace that with a “View Product” button (or anything you like) linking to the single product page.

WooCommerce Add to Cart

Here’s the simple snippet code.

PHP Snippet: Change WooCommerce ‘Add to Cart’ button text into ‘View Product’

/**
* @snippet Change WooCommerce ‘Add to Cart’ button to 'View Product'
* @source https://www.wptechnic.com/?p=4615
* @author Muhammad Tamzid
* @compatible WC 4.3.1
*/
// First, remove Add to Cart Button
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
 
// Second, add View Product Button
add_action( 'woocommerce_after_shop_loop_item', 'wpt_custom_view_product_button', 10);
function wpt_custom_view_product_button() {
global $product;
$link = $product->get_permalink();
echo '<a href="' . $link . '" class="button wpt-custom-view-product-button">View Product</a>';
}

Now, if you want to display anything else instead of “View Product“, you can replace the view product text from line 15 with your own.

WooCommerce View Product Button

If the above code does not work for your website, you may try adding this one instead:

/**
* @snippet Change WooCommerce ‘Add to Cart’ button to 'View Product'
* @source https://www.wptechnic.com/?p=4615
* @author Muhammad Tamzid
* @compatible WC 4.3.1
*/
// Change WooCommerce 'Add To Cart' button to 'View Product'
add_filter( 'woocommerce_loop_add_to_cart_link', 'wpt_custom_view_product_button', 10, 2 );
function wpt_custom_view_product_button( $button, $product  ) {

// Ignore for variable products
if( $product->is_type( 'variable' ) ) return $button;

// Button text here
$button_text = __( "View product", "woocommerce" );

    return '<a class="button wpt-custom-view-product-button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
}

How to add PHP Snippet code to your WordPress site?

There are many ways of adding a PHP Snippet code to your WordPress website. You can add this PHP Snippet at the very bottom of your active child theme (or main theme) functions.php file. You can also add this code using any third-party plugin like ‘Insert Headers and Footers‘ or ‘Code Snippets‘ plugin.

WooCommerce Add to Cart replaced with View Product Button

Does this Code work for any theme?

This PHP Snippet code uses default WooCommerce Loop. Therefore, if your theme using the default WC loop to display ‘Add to Cart’ button, then it surely will work.

However, if your theme has custom pages using custom page builder plugins that use different functions to show ‘add to cart’ button, then it may not work for your website. In that case, hire a Pro developer or contact your theme provider.

Did this code work for your website? Or you’re having difficulties? Either way, let me know by leaving a comment below right now.

Avatar for Muhammad Tamzid
Author

Muhammad Tamzid, the founder of WPTechnic, is a WordPress Enthusiast with a passion to help beginners learning WordPress. Also managing WPrevival, a 24/7 WordPress Website Development, Maintenance & Security Service company.

11 Comments

  1. Avatar for Miguel Parraud Cordeyro
    Miguel Parraud Cordeyro Reply

    Muhammad, I need to do exactly this but on the home page inside the following shortcode

    [products limit=”3″ columns=”3″ visibility=”featured” ]

    Is there a way to implement this that only affect the products on the shortcode?

    thank you!!!

    • Avatar for Muhammad Tamzid

      Hi Miguel,
      You cannot do anything like that, I’m afraid. Are you using any page builder? how are you using this shortcode? Give me something more. If I come up with a solution, I will let you know.

  2. Avatar for ady marwah

    I need help with this problem
    I successfully changed the “add to cart” button on a product that was already in the basket,
    to “Already in the Cart. Add again” on the shop page and one product page
    with this code
    /**
    * @snippet Change “Add to Cart” Button Label if Product Already @ Cart
    * @how-to Get CustomizeWoo.com FREE
    * @author Rodolfo Melogli
    * @compatible WC 3.5.4
    */
    // Part 1
    // Edit Single Product Page Add to Cart
    add_filter( ‘woocommerce_product_single_add_to_cart_text’, ‘bbloomer_custom_add_cart_button_single_product’ );
    function bbloomer_custom_add_cart_button_single_product( $label ) {
    foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
    $product = $values[‘data’];
    if( get_the_ID() == $product->get_id() ) {
    $label = __(‘Already in Cart’, ‘woocommerce’);
    }
    }
    return $label;
    }
    // Part 2
    // Edit Loop Pages Add to Cart
    add_filter( ‘woocommerce_product_add_to_cart_text’, ‘bbloomer_custom_add_cart_button_loop’, 99, 2 );
    function bbloomer_custom_add_cart_button_loop( $label, $product ) {
    if ( $product->get_type() == ‘simple’ && $product->is_purchasable() && $product->is_in_stock() ) {
    foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
    $_product = $values[‘data’];
    if( get_the_ID() == $_product->get_id() ) {
    $label = __(‘Already in Cart’, ‘woocommerce’);
    }
    }
    }
    return $label;
    }
    so the problem is I want to change it when I click “Already in Cart. Add again” then it is immediately transferred to the basket.
    if now I experience, when clicked on “Already in Cart. Add again”
    it just adds more to the basket.
    how to do it, what code should I add again.
    thank

    • Avatar for Muhammad Tamzid

      Hi Ady, thanks for your comment. Unfortunately, this will require custom work and I cannot give you a solution here in the comment section. Maybe you can contact me directly or wait for me to write a tutorial for that. Thanks for understanding.

  3. Avatar for friendorfoley
    friendorfoley Reply

    Is there a way to add a “View Product” button alongside the “Add to Cart Button”

  4. Avatar for Daniel de Matos Preto

    Hi there,

    Thank you for this useful article, I appreciate your time and effort.

    I see when I hover over the button the text goes black and my default block color is black. Anyway to keep the text from changing to black and maybe changing to another color or just to keep it white on hover?

    Thank you again!

    • Avatar for Muhammad Tamzid

      Hi Daniel,
      If you look closely, you’ll see that there is a class I added on the code:

      wpt-custom-view-product-button

      You can use this to customize the button all the way you like.

  5. Avatar for Haseena

    Want to replace the add to cart button to go to cart button if already the product is in cart.

Write A Comment