Open quick view window when clicking on product thumbnail in WooCommerce

Dmitry :

I use the code to display product thumbnails and for "Quick View" functionality.

Here is the code for the product thumbnail:

// Change product thumbnail markup.
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail' );
add_action( 'woocommerce_before_shop_loop_item_title', array( __CLASS__, 'product_thumbnail' ) );

/**
* Product thumbnail.
*/
public static function product_thumbnail() {
    global $product;

    switch ( konte_get_option( 'shop_product_hover' ) ) {

        default:
            echo '<div class="product-thumbnail">';             
            woocommerce_template_loop_product_thumbnail();              
            echo '</div>';
            break;
    }
}

Here is the code for the "Quick View" icon:

/**
* Quick view button.
*/
public static function quick_view_button() {
    if ( ! konte_get_option( 'product_quickview' ) ) {
        return;
    }

    printf(
        '<a href="%s" class="quick_view_button quick-view-button button" data-toggle="%s" data-target="%s" data-product_id="%s" rel="nofollow">
            %s
        </a>',
        esc_url( get_permalink() ),
        'modal' == konte_get_option( 'product_quickview_style' ) ? 'modal' : 'off-canvas',
        'modal' == konte_get_option( 'product_quickview_style' ) ? 'quick-view-modal' : 'quick-view-panel',
        esc_attr( get_the_ID() ),
        konte_svg_icon( 'icon=eye&echo=0' )
    );
}

Here is the file that has this code in it - template-catalog.php

I need that when I click on the product thumbnail, a quick view window is displayed. Help combine these two codes. Thank you in advance!

Cadu De Castro Alves :

In the product-catalog.php file, there are two actions where you can hook into to wrap the product thumbnail:

woocommerce_before_shop_loop_item: adds HTML code before the thumbnail woocommerce_after_shop_loop_item: adds HTML code after the thumbnail

You should add the following code into the functions.php file:

function my_custom_link_open() {
    printf(
        '<a href="%s" class="quick_view_button quick-view-button button" data-toggle="%s" data-target="%s" data-product_id="%s" rel="nofollow">',
        esc_url( get_permalink() ),
        'modal' == konte_get_option( 'product_quickview_style' ) ? 'modal' : 'off-canvas',
        'modal' == konte_get_option( 'product_quickview_style' ) ? 'quick-view-modal' : 'quick-view-panel',
        esc_attr( get_the_ID() )
    );
}

function my_custom_link_close(){
      echo '</a>';
  }

add_action ('woocommerce_before_shop_loop_item', 'my_custom_link_open');
add_action ('woocommerce_after_shop_loop_item', 'my_custom_link_close');