Customizing add to cart buttons on Woocommerce shop page

Question

I currently use this function to change the 'add to cart' button on single product pages when it is in a specific category. I would like this to also change the 'add to cart button' on the shop page below the thumbnails. Any help would be greatly appreciated.

// Display Auction Link When 'auction' is in the category
function so_43372512_maybe_show_auction_link(){
if( has_term( 'auction', 'product_cat' ) ) {
    echo ' <style type="text/css">
                .woocommerce div.product form.cart, .woocommerce div.product p.cart {
                display:none ; }
                .woocommerce div.product p.price, .woocommerce div.product span.price {
                display:none ; }
                .woocommerce div.product p.stock {
                display:none ; }
                .product_meta {
                margin-top:20px;
                }
            </style>';
    echo '<p>Click This Button To View The Lot         </p>';
    global $product; 
    $skusearch = $product->get_sku();
    echo '<a id="auction" style="font-size:100%;color:#fff;padding:.618em 1em;border-radius:3px;background-color:#ed1c24;font-weight:700;" href="https://www.wirebids.com/search?q=' . $skusearch . '&open_closed=open" target="blank">' . __ ( 'On Auction Now!', 'your-plugin' ) . '</a>';
}
}
add_action( 'woocommerce_single_product_summary', 
'so_43372512_maybe_show_auction_link', 35 );

Answer 1

I had to customize add to cart button in woocommerce built website, I needed to do this only on shop and category page.

I did this task with below function. put this function into your functions.php file and make sure to take backup before do any update, it worked for me and hope the same for you.

add_filter( 'woocommerce_loop_add_to_cart_link', 'ij_replace_add_to_cart_button', 10, 2 );
function ij_replace_add_to_cart_button( $button, $product ) {
     
    $productid =  $product->id;
    $productslug =  $product->slug;
    $productname =  $product->name;
 
if (is_product_category() || is_shop()) {
     
$button_text = __("More Info", "woocommerce");
$button_link = $product->get_permalink(); 
$button = '<a href="'. $button_link .'"  data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="'. $productid.'" data-product_sku="" aria-label="Add “'.$productname.'” to your cart" rel="nofollow"    data-productslug="'. $productslug.'" >' . $button_text . ' </a>';
return $button;
}
}

Answer 2

Below you will find the necessary code to replace add to cart button by a custom 'On Auction Now!' button, hiding the product price too…

I have also completely revisited your code, removing templates "price" and "add to cart" button, instead hiding them with CSS, for the 'auction' product category only…

The code:

// Remove the price on archive pages (like shop) for 'auction' product category
add_action('woocommerce_after_shop_loop_item_title', 'remove_price_from_archives', 9 );
function remove_price_from_archives(){
    global $product, $post;

    // Only for 'auction' product category
    if ( has_term( 'clothing', 'product_cat' ) )
        remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10);
}

// Replace add to cart button on archive pages (like shop) for 'auction' product category
add_action('woocommerce_after_shop_loop_item', 'replace_add_to_cart_button_in_archives', 9 );
function replace_add_to_cart_button_in_archives() {
    global $product, $post;

    // Only for 'auction' product category
    if ( ! has_term( 'clothing', 'product_cat' ) ) return;

    // remove add to cart button
    remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);

    $skusearch = $product->get_sku();
    $style = 'style="font-size:100%;color:#fff;padding:.618em 1em;border-radius:3px;background-color:#ed1c24;font-weight:700;"';
    $href = 'href="https://www.wirebids.com/search?q=' . $skusearch . '&open_closed=open"';
    echo '<div style="margin-top:24px;">
        <a '.$href.' id="auction" '.$style.' target="blank">' . __ ( 'On Auction Now!', 'your-plugin' ) . '</a>
    </div>';
}

// Remove the displayed price and add-to-cart button on single product pages for 'auction' product category
// Replace add to cart by your custom "On Auction Now!" button
add_action( 'woocommerce_single_product_summary', 'remove_the_displayed_price_from_variable_products', 9 );
function remove_the_displayed_price_from_variable_products() {
    global $product, $post;

    // Only for 'auction' product category
    if ( has_term( 'clothing', 'product_cat' ) ){
        // remove product price
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
        // remove add-to-cart button
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
        // Add your custom "On Auction Now!" button
        add_action( 'woocommerce_single_product_summary', 'replace_add_to_cart_by_auction', 30 );
    }
}

// This function displays your custom button replacement in single product pages
function replace_add_to_cart_by_auction(){
    global $product;

    $skusearch = $product->get_sku();
    $style = 'style="font-size:100%;color:#fff;padding:.618em 1em;border-radius:3px;background-color:#ed1c24;font-weight:700;"';
    $href = 'href="https://www.wirebids.com/search?q=' . $skusearch . '&open_closed=open"';

    echo '<p>Click This Button To View The Lot</p>
    <a '.$href.' id="auction" '.$style.' target="blank">' . __ ( 'On Auction Now!', 'your-plugin' ) . '</a>';
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and works.