Replace default loop Add to Cart button with custom popup trigger button

Hello!

We’re trying to replace the default “Add to cart” buttons in product loops (including carousels) with a custom button that triggers a popup. The popup is already working and listens for clicks on the .wdpopup_requestinfo selector.

For single product pages, we’ve successfully replaced the buttons using:

if ( ! function_exists( ‘render_request_info_button’ ) ) {
function render_request_info_button( $product ) {
if ( ! $product ) return;
echo ‘<div class=”request_info_wrapper”>’;
echo ‘get_id() ) . ‘”>’ . __( ‘Request info’, ‘woodmart’ ) . ‘‘;
echo ‘</div>’;
}
}

// ✅ Replace “Add to cart” on single variable products
remove_action( ‘woocommerce_single_variation’, ‘woocommerce_single_variation_add_to_cart_button’, 20 );
add_action( ‘woocommerce_single_variation’, ‘custom_popup_button_for_variations’, 20 );

function custom_popup_button_for_variations() {
global $product;
render_request_info_button( $product );
}

// ✅ Replace “Add to cart” on single simple products
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
add_action( ‘woocommerce_single_product_summary’, ‘custom_popup_button_for_simple_products’, 30 );

function custom_popup_button_for_simple_products() {
global $product;

if ( $product && $product->is_type( ‘simple’ ) ) {
render_request_info_button( $product );
}
}

However, when trying to do the same for product loops, the default “Add to cart” button still appears. Our current loop code only adds our custom button below it:
remove_action( ‘woocommerce_shop_loop_item_title’, ‘woocommerce_template_loop_product_title’, 10 );
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );

add_action( ‘woocommerce_shop_loop_item_title’, ‘custom_woocommerce_loop_title_and_button’, 10 );
function custom_woocommerce_loop_title_and_button() {
global $product;

echo ‘<p class=”product-title wd-entities-title”>’ . get_the_title() . ‘
‘;

if ( $product && ( $product->is_type( ‘simple’ ) || $product->is_type( ‘variable’ ) ) ) {
echo ‘<div class=”wd-add-btn wd-add-btn-replace”>’;
echo ‘get_id() ) . ‘”>’;
echo ‘<span>’ . esc_html__( ‘Request info’, ‘woodmart’ ) . ‘</span>’;
echo ‘‘;
echo ‘</div>’;
}
}

This does add our custom button, but the original “Add to cart” button still appears. It seems like the .wd-add-btn block is rendered through internal theme logic that isn’t affected by the standard WooCommerce hooks.

Could you advise on the best way to properly override or disable the default .wd-add-btn output in loops so that only our custom button is shown and connected to the popup?

Hello,

To remove the default button on the product loop page you need to use the following line of code

remove_action( 'woodmart_add_loop_btn', 'woocommerce_template_loop_add_to_cart', 10 );

Kind Regards

[Author]

Posts