Question

我使用代码显示产品缩略图并具有“快速查看”功能。

这是产品缩略图的代码：

// 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;
    }
}

以下是“快速查看”图标的代码：

/**
* 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' )
    );
}

这是其中包含此代码的文件-template-catalog.php

我需要当我单击产品缩略图时，显示一个快速查看窗口。帮助结合这两个代码。预先谢谢你！

Answer 1

在product-catalog.php文件中，有两个动作可用于包装产品缩略图：

woocommerce_before_shop_loop_item：在缩略图之前添加HTML代码 woocommerce_after_shop_loop_item：在缩略图后添加HTML代码

您应将以下代码添加到functions.php文件中：

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');

Answer 2

所以这只是笨手笨脚的，但不确定我是否可以将 wc-template-functions.php 复制到我的主题中。无论如何，这对我有用。上面那个没有删除缩略图链接或在正确的位置添加了结束的“a”

/includes/wc-template-functions.php 并寻找 if ( ! function_exists( 'woocommerce_template_loop_product_link_open' ) ) {

将该部分替换为

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() )
);
}
}

添加这个自定义 css ul.products li.product .product-thumbnail .quick_view_button {width:100%!important;} div.product-summary > h2 > a{width:100%!important;}

在WooCommerce中单击产品缩略图时，打开快速查看窗口

2 个答案: