• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

WooCommerce创建插件:将产品简短描述添加到存档页面

woocommerce 与存档页面和循环捆绑在一起,效果很好,但有时您可能需要在主商店和其他存档页面上显示更多信息。

你需要什么

要继续学习,您需要:

  • wordpress的开发安装。

  • 一个代码编辑器

  • WooCommerce 已安装并激活。

  • 添加的产品——我已经导入了WooCommerce 附带的虚拟产品数据;有关如何执行此操作的详细信息,请参阅 本指南。

  • 激活了与 WooCommerce 兼容的主题——我正在使用 Storefront。

在开始之前,请确保您已经设置了 WooCommerce。要添加产品简短描述,您将遵循三个步骤:

  1. 为该功能创建一个插件并激活该插件。

  2. 添加一个输出产品简短描述的函数。

  3. 在 WooCommerce 中确定我们需要将函数挂钩的钩子,并将函数附加到该钩子。

所以让我们开始吧!

创建插件

在您的 wp-content/plugins 目录中,创建一个新的php文件。我打电话给我 的 tutsplus-product-archive-short-descriptions.php。

在代码编辑器中打开文件。在文件顶部,添加以下内容:

<?php
/**
 * Plugin Name: Tutsplus Display Product Short Descriptions in WooCommerce Archive pages
 * Plugin URI: https://www.weixiaolive.com/en/tutorials/woocommerce-adding-the-product-short-description-to-archive-pages--cms-25435
 * Description: Add product short descriptions to the loop in product archive pages (requires WooCommerce to be activated)
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 *
 */

这会设置插件并为 WordPress 提供激活它所需的一切。

现在转到 WordPress 管理员中的 插件 屏幕并找到插件:

WooCommerce创建插件:将产品简短描述添加到存档页面  第1张

现在激活它。

起初,它不会有任何区别,因为您没有填充它。这是商店主页面现在的样子:

WooCommerce创建插件:将产品简短描述添加到存档页面  第2张

编写函数以输出简短描述

WooCommerce 中产品的简短描述使用您在普通帖子中找到的摘录,因此要显示它,您需要做的就是显示帖子的摘录。

在您的插件文件中,添加以下代码:

function tutsplus_excerpt_in_product_archives() {
     
    the_excerpt();
     
}

就这么简单!但是现在您需要将您的函数与正确的操作挂钩,以便将其输出到存档页面中的正确位置。

将函数与正确的操作挂钩

让我们看一下 WooCommerce 中在存档页面上输出循环内容的文件。该文件是 content-product.php,您可以在 WooCommerce 插件的模板文件夹中找到它。

该文件包含许多动作挂钩,WooCommerce 使用所有这些挂钩来输出不同的内容。

由于我们想在产品标题下方显示我们的摘录,我们需要使用的钩子是 woocommerce_after_shop_loop_item_title. 从 content-product.php 文件中可以看出,它已经附加了两个函数, woocommerce_template_loop_rating() 和 woocommerce_template_loop_price(),它们的优先级分别为 5 和 10 。所以我们需要用更高的优先级来挂钩我们的函数,以确保它在这些之后触发。我会留下一些余地并 40 作为优先事项使用。

在您的函数下方,添加以下内容:

add_action('woocommerce_after_shop_loop_item_title','tutsplus_excerpt_in_product_archives',40);

现在保存您的插件文件并在浏览器中刷新商店页面。您现在将在产品名称下方看到产品简短描述:

WooCommerce创建插件:将产品简短描述添加到存档页面  第3张

限制产品说明的长度

如果您的产品简短描述很长,它们可能会弄乱您商店页面的布局。下面是它的外观和更长的描述:

WooCommerce创建插件:将产品简短描述添加到存档页面  第4张

就个人而言,我会在实时网站上使用较短的描述,并为长描述保留更详细的信息。但是,如果您想在产品页面上使用更长的简短描述,但在主商店页面上限制它们的长度呢?

您可以通过使用 wp_trim_words() 函数中的函数来显示摘录来做到这一点。编辑函数,使其看起来像这样:

function tutsplus_excerpt_in_product_archives() {
     
    echo wp_trim_words( get_the_excerpt(), 10 );
         
}
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );

显示的产品简短描述将限制为您在函数中指定的字数:

WooCommerce创建插件:将产品简短描述添加到存档页面  第5张

隐藏产品页面上的简短描述

您可能想要做的另一件事是对商店和存档页面使用简短描述,并在单个产品页面上仅使用长描述。

默认情况下,WooCommerce 在产品页面顶部显示简短描述,下方显示长描述:

WooCommerce创建插件:将产品简短描述添加到存档页面  第6张

要从产品页面中删除短描述并在其位置添加长描述,您需要将输出短描述的功能取消挂钩并将其替换为输出内容的功能,即长描述。

将此添加到您的插件文件中:

function tutsplus_remove_short_desc_product() {
    
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
	add_action( 'woocommerce_single_product_summary', 'the_content', 20 );
	
}
add_action( 'init', 'tutsplus_remove_short_desc_product' );

这将从产品页面顶部删除简短描述,并将其替换为详细描述。但是现在页面底部重复了长描述,因此您需要将其从产品选项卡中删除。用另一个函数来做,挂在 woocommerce_product_tabs 钩子上:

function tutsplus_remove_product_long_desc( $tabs ) {
    unset( $tabs['description'] );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_long_desc', 98 );

现在,您会发现您的各个产品页面的顶部是长描述,而不是短描述:

WooCommerce创建插件:将产品简短描述添加到存档页面  第7张

概括

因为 WooCommerce 使用动作挂钩输出几乎所有内容,所以通过编写函数并将它们附加到这些挂钩上来添加更多内容很简单。在本教程中,您学习了如何将产品简短描述添加到您的产品档案中。如果您想更进一步,您可以在函数中包含一个或多个条件标签,以便在特定存档页面上执行此操作。

文章目录
  • 你需要什么
  • 创建插件
  • 编写函数以输出简短描述
    • 将函数与正确的操作挂钩
  • 限制产品说明的长度
    • 隐藏产品页面上的简短描述
  • 概括