Home Forums WoodMart support forum Replace default loop Add to Cart button with custom popup trigger button

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #692121

    la.xtemos.acc
    Participant

    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?

    #692145

    Artem Temos
    Keymaster

    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

Viewing 2 posts - 1 through 2 (of 2 total)