单个产品页面上的 Woocommerce 钩子溢出

Posted 2023-03-25

【中文标题】单个产品页面上的 Woocommerce 钩子溢出

【英文标题】：Woocommerce hook overflow on Single Product Page

【发布时间】：2021-12-30 00:57:23

【问题描述】：

我在 Functions.php 中的代码显示存储在相应 WooCommerce 产品上的自定义字段（使用高级自定义字段插件）中的文本。

我的问题是，我只能在商店/产品档案中显示这个。当我尝试在单个产品页面缩略图中挂钩时，它不起作用。

如何挂钩到主单产品页面图像？

商店存档 - 正确显示。

单一产品页面 - 主图片上缺少，仅显示在相关产品上

我在functions.php中的代码

function wpo_before_shop_loop_item_title() 
   if (defined('WPO_IS_ENABLED') && (WPO_IS_ENABLED === false)) 
      // Disabled by configuration.
      else 
      $post_id = get_the_ID();

      // Is this a featured product?
      $terms = wp_get_post_terms(
         $post_id,
         'product_visibility',
         array('fields' => 'names')
      );
      $is_featured = in_array('featured', $terms);

      // Get our custom overlay properties.
      $custom_overlay_text = get_post_meta($post_id, 'product_overlay_text', true);
      $is_custom_overlay_visible = boolval(get_post_meta(
         $post_id,
         'is_product_overlay_enabled',
         true
      ));

      // Featured product star.
      if ($is_featured) 
         echo '<div class="prod-overlay prod-overlay-feat">';
         echo '<i class="fa fa-star" aria-hidden="true"></i>';
         echo '</div>'; // .prod-overlay
      

      // Custom overlay text.
      if ($is_custom_overlay_visible && !empty($custom_overlay_text)) 
         echo '<div class="prod-overlay prod-overlay-text">';
         printf(
            '<span class="prod-overlay-label">%s</span>',
            esc_html($custom_overlay_text)
         );
         echo '</div>'; // .prod-overlay
      
   

add_action(
   'woocommerce_before_shop_loop_item_title',
   'wpo_before_shop_loop_item_title', 'woocommerce_before_add_to_cart_button', 'woocommerce_product_thumbnails' , 
   9
);

【问题讨论】：

请同时添加您为覆盖文本添加的 CSS。

【参考方案1】：

您可以使用woocommerce_product_thumbnails 操作挂钩。试试下面的代码。

function woocommerce_product_thumbnails_single_product() 

    if( is_product() )

        global $product;

        if (defined('WPO_IS_ENABLED') && (WPO_IS_ENABLED === false)) 
          // Disabled by configuration.
          else 
            $post_id = $product->get_id();

            // Is this a featured product?
            $terms = wp_get_post_terms(
                $post_id,
                'product_visibility',
                array('fields' => 'names')
            );
            $is_featured = in_array('featured', $terms);

            // Get our custom overlay properties.
            $custom_overlay_text = get_post_meta($post_id, 'product_overlay_text', true);
            $is_custom_overlay_visible = boolval(get_post_meta(
                $post_id,
                'is_product_overlay_enabled',
                true
            ));

            // Featured product star.
            if ($is_featured) 
                echo '<div class="prod-overlay prod-overlay-feat">';
                echo '<i class="fa fa-star" aria-hidden="true"></i>';
                echo '</div>'; // .prod-overlay
            

            // Custom overlay text.
            if ($is_custom_overlay_visible && !empty($custom_overlay_text)) 
                echo '<div class="prod-overlay prod-overlay-text">';
                printf(
                    '<span class="prod-overlay-label">%s</span>',
                    esc_html($custom_overlay_text)
                );
                echo '</div>'; // .prod-overlay
            
        

    

add_action( 'woocommerce_product_thumbnails','woocommerce_product_thumbnails_single_product' );

经过测试和工作

【讨论】：

效果很好，谢谢。

【参考方案2】：

woocommerce_before_shop_loop_item_title 挂钩仅对循环渲染的产品执行 (source)。您需要使用在单个产品页面上实际执行的钩子之一。为了识别正确的钩子，您可以使用Visual Hook Guide 或WooCommerce Source Code。