WooCommerce - 在哪里可以编辑由钩子生成的 HTML?

问题描述 投票:0回答:2

我是 WooCommerce 新手。无论如何,我想创建自己的主题,所以我按照指南将核心模板文件复制到 /mywordpresstheme/woocommerce/

一切都很好,我正在编辑模板,效果很好。

但是,WooCommerce 中的挂钩和操作的工作方式让我感到困惑,我无法弄清楚生成的 HTML 的某些部分来自哪里。

例如,

content-product.php
中,有一个获取图像的钩子:

<?php
/*
* woocommerce_before_shop_loop_item_title hook
*
* @hooked woocommerce_show_product_loop_sale_flash - 10
* @hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
?>

但这是什么?它从何而来??操作名称中是否有任何线索表明我可以在哪里找到正在生成的 HTML 以进行编辑?

我已经阅读了 WooCommerce 上有关“挂钩和过滤器”的文章,但它没有解释有关在何处或如何根据具体情况更改这些内容的信息。

任何帮助将不胜感激。

我是这个系统的新手,我确信我只是忽略了一些非常明显的东西。

谢谢, 麦基。

wordpress e-commerce wordpress-theming woocommerce
2个回答
60
投票

但这是什么?它从何而来??里面有什么线索吗 操作名称,我可以在哪里找到正在生成的 HTML 编辑它的目的是什么?

这是一个

action hook
。它本身并没有执行任何操作,而是将注释中列出的函数
hook
放入其中,因此在触发此函数时运行。它在评论中说函数
woocommerce_template_loop_product_thumbnail
是负责获取缩略图的函数。您可以在 Woocommerce 插件中找到此功能。我使用 Sublime Text 编辑器(尽管我认为其他人也会这样做)在整个文件夹中搜索该短语,它准确地告诉我它在哪个文件中。在这种情况下,它就是所谓的可插入函数,位于
woocommerce-template.php
。 (现在在 2.1+ 版本中称为 wc-template-hooks.php)

可插入函数意味着您在主题的functions.php中定义了具有相同名称的新版本函数

function woocommerce_template_loop_product_thumbnail(){
  echo "apple";
}

如果你把上面的内容放在你的functions.php中,那么你只会看到“apple”这个词,而不是Woo的

woocommerce_template_loop_product_thumbnail()

我读过 WooCommerce 上有关“挂钩和过滤器”的文章,但它 没有解释任何关于在哪里或如何更改这些的情况 案例依据。

您将在主题的functions.php中进行所有更改,并且不需要根据具体情况进行更改。所有钩子和过滤器的行为都相同。也就是说,它们并不是最容易学习的东西,所以要对自己有耐心。我发现滤镜特别难以让我头脑清醒。

在无偿的自我推销中,我写了一系列关于WordPress钩子和过滤器的基础知识的文章(一篇文章说它是针对主题钩子的,但钩子就是钩子!)这都是我想要的东西人们在我的 WordPress 职业生涯刚开始时就告诉过我。


0
投票

这个问题的答案为我指明了正确的方向,以及这里的讨论:

https://www.webdesignvista.com/how-to-show- Different-product-image-in-woocommerce-shop-category-and-single-product-pages/

我需要为 woocommerce 产品目录缩略图使用单独的图像。图像需要是特定的、独特的 300x300 图像,仅用于目录缩略图,不会出现在产品页面上。

这是我的解决方案:

如果要使用单独的目录缩略图,我将其命名为productSKU_shopthumb.jpg,其中productSKU 是该产品的唯一 woocommerce 产品 SKU。每个图像都经过优化,可按默认目录缩略图大小 300x300(woocommerce 预定义大小“woocommerce_thumbnail”)显示。我将图像上传到 uploads 目录下的单独目录中。我们称之为 wc_custom_thumbs

如果找不到产品的自定义目录缩略图,代码将恢复为使用裁剪后的主产品图像的默认行为。这样,随着时间的推移,可以创建自定义目录拇指。

这是我的代码:

// Replace the default product thumbnail displayed on the shop browsing pages
// with a custom image prepared especially to display well as a square.

add_action( 'woocommerce_init', 'cm_display_custom_shop_image');

// Display a custom image prepared especially to display well as a square.
// If a custom image is not available, revert to default behavior which is
// to display the product main image cropped into a square (cropped into
// whatever the thumbnail size is defined to be... usually a square).
//
// Note that custom images must be named with product SKU to be found.
// This code will look for a custom shop image named <product SKU>_shopthumb.jpg
// 

function cm_display_custom_shop_image()
{
  remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

  function cm_replace_product_thumbnail()
  {
    global $product;
    
    $prod_sku = $product->get_sku();
    $uploads = wp_get_upload_dir();
    if ( $uploads && false === $uploads['error'] )
    {
      // Check that a custom shop thumb exists
      // in the wc_custom_thumbs uploads directory.
      $uploads_url = $uploads['baseurl'];
      $uploads_path = $uploads['basedir'];
      $custom_shop_thumb_filename = $uploads_path . '/wc_custom_thumbs/' . $prod_sku . '_shopthumb.jpg';

      if (file_exists($custom_shop_thumb_filename))
      {
        echo "<img src='" . $uploads_url . '/wc_custom_thumbs/' . $prod_sku . "_shopthumb.jpg'>";
      }
      else
      {
        // There is no custom image present.
        // Revert back to the default behavior.
      
        echo woocommerce_get_product_thumbnail();      
      }
    }
    else
    {
      // Error.
      // The uploads dir does not exist. This should never happen.
      // Revert back to the default behavior.
      
      echo woocommerce_get_product_thumbnail();

    } // end else

  } // end function cm_replace_product_thumbnail
    
  add_action( 'woocommerce_before_shop_loop_item_title', 'cm_replace_product_thumbnail', 10 );
    
} // end function cm_display_custom_shop_image

我希望它对某人有帮助!

© www.soinside.com 2019 - 2024. All rights reserved.