Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Open quick view window when clicking on product thumbnail in WooCommerce

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!

Tags:

2

Answers


  1. 0

    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');
    Login or Signup to reply.
  2. 0

    So this is just ham fisted, but wasn’t sure if I could copy that wc-template-functions.php to my theme or not. This worked for me anyway. The one above didn’t remove the thumbnail link or add the closing "a" in the right place

    /includes/wc-template-functions.php and look for if ( ! function_exists( 'woocommerce_template_loop_product_link_open' ) ) {

    Replace that section with

    if ( ! function_exists( 'woocommerce_template_loop_product_link_open' ) ) {
/**
 * Insert the opening anchor tag for products in the loop.
 */
function woocommerce_template_loop_product_link_open() {
    global $product;

    $link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );

    printf(
    '<a href="%s" class="quick_view_button quick-view-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() )
);
}
}

    add this custom css ul.products li.product .product-thumbnail .quick_view_button {width:100%!important;} div.product-summary > h2 > a{width:100%!important;}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search