时间戳

首页 > 解决方案 > WooCommerce 商店页面缩略图包装

wordpress - WooCommerce 商店页面缩略图包装

问题描述

我正在看这个：https ://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

我想将商店页面中的拇指包裹到另一个 div 中。

如果我使用以下代码，我可以实现一些目标，但问题是许多主题删除或不使用 woocommerce_before_shop_loop_item_title 并使用一些不同的代码，我无法有效地执行我的操作。

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

add_action( 'woocommerce_before_shop_loop_item_title', 'my_woocommerce_before_shop_loop_item_title', 10 );


function my_woocommerce_before_shop_loop_item_title() {

            global $product;

            $post_id = $product->get_id();

            $html = woocommerce_get_product_thumbnail('woocommerce_thumbnail');
          
            echo '<div class="my">' . $html . '</div>';
    
           
        }

是否有处理产品缩略图的操作或挂钩，我可以对其执行自己的操作？不管之前和之后发生了什么？

标签： wordpresswoocommerce

解决方案

请尝试以这种方式实施。

//replace the functionprefix with your functions prefix
function functionprefix_wrap_loop_product_image() {

    if ( ! class_exists( 'WooCommerce' ) ) return; //* exit if WooCommerce not active

    add_action( 'woocommerce_before_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_open', 10 );
    add_action( 'woocommerce_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_close', 10 );

}
add_action( 'woocommerce_before_shop_loop' , 'functionprefix_wrap_loop_product_image', 3 );
//replace the functionprefix with your functions prefix
function functionprefix_product_loop_image_wrapper_open() {
    echo '<div class="image-wraper">';
}

function functionprefix_product_loop_image_wrapper_close() {
    echo '</div>';
}

推荐阅读