WooCommerce中添加自定义产品标签

W

1.使用插件添加自定义产品标签

有多种 WordPress 插件可以添加自定义 WooCommerce 产品标签,因此您可以随意使用其中任何一种。不过,为了便于演示,我们将使用由 YIKES, Inc.开发的 Custom Product Tabs for WooCommerce 插件。

该插件有免费和高级两个版本。免费版涵盖了基本要求。如果您对更高级的功能感兴趣,可以选择高级计划,起价为 每年29.99美元,提供1年的更新和支持 。

现在我们看看如何使用该插件在 WooCommerce 中添加自定义产品标签。

1.1.安装并激活插件

首先,您需要在网站上安装并激活插件。要安装插件,请访问您的wp后台,并导航至  插件> 安装插件。 搜索由 YIKES, Inc 制作的 Custom Product Tabs for WooCommerce 插件。然后单击 立即安装 按钮安装插件。安装完成后,单击  Activate  在您的网站上激活插件。

如果您想使用高级版本或高级插件,则需要手动安装插件。您现在已经在网站上成功安装了插件。是时候使用 WooCommerce 的自定义产品标签插件添加自定义产品标签了。

1.2.为 WooCommerce 产品添加自定义产品标签

插件激活后,您可以在产品编辑页面为 WooCommerce 产品添加自定义产品标签。从您的 WP仪表盘, 导航到 产品 > 全部产品. 现在,将鼠标悬停在您希望添加自定义标签的产品上,然后点击 编辑.

这将打开 “产品编辑 “页面。向下滚动到 “产品数据 “部分,然后单击 “自定义标签”。您将获得两个选项: 添加标签 和 添加已保存标签。单击”添加标签  “按钮,将打开 “新建自定义标签 “表单。

在新建标签页表单中,指定标签页标题并添加相关内容。可随意添加文本、 图片、链接、多媒体等。此外,您还可以通过点击底部的添加标签 按钮来添加多个自定义标签。如果您有多个自定义选项卡,可以通过移动选项卡顺序箭头更改它们的顺序。完成后,点击 保存标签 保存新创建的自定义标签。

瞧!就这么简单。现在,您已经创建了自己的自定义产品标签。现在,导航到产品页面的前端,即可在网站上看到自定义标签。

但是,为多个产品逐个添加自定义标签可能会很累,而且不是一种有效的方法。这就是该插件自带保存标签功能的原因。让我们来了解一下 “已保存标签”,看看如何将其添加到 WooCommerce 产品中。

1.3.创建保存标签

已保存标签 作为模板,您可以将其保存起来,以供以后使用。创建保存标签后,只需几个简单的步骤,您就可以将其添加到产品中。因此,”已保存标签 “可以快速、轻松地为多个产品添加保管标签。

要创建 “已保存标签”,请访问您的 WP 管理面板 并单击 自定义产品标签。 在这里,您将看到之前创建的所有 “保存标签 “的列表。现在,单击顶部的 ;添加标签 按钮,它将带您进入新建标签表单。要创建保存标签,请转至您的 WP 管理控制面板 并单击 自定义产品标签。在这里,您将看到之前创建的所有 “保存标签 “的列表。现在,单击顶部的 添加标签 按钮,它将带您进入新建标签表单。

在新建标签页表单中,指定标签页标题并添加一个名称供参考。然后,添加标签内容。这可能包括文本、图像、多媒体、链接等。对所有更改满意后,单击保存标签 按钮保存标签。

就这样,您可以添加任意数量的标签供以后使用。要查找您创建的所有已保存标签,只需进入 WP 仪表板> 自定义产品标签。 在这里,您可以找到您的所有已保存标签,您可以在这里编辑、删除或添加新标签。

创建自己的 “已保存标签 “后,只需点击几下,就可以将其添加到任何产品中。让我们来看看如何操作。

1.4.为 WooCommerce产品添加保存标签

为产品添加 “已保存标签 “的过程与添加普通标签类似。进入 “产品编辑 “页面,向下滚动到 “产品数据 “部分。单击自定义选项卡,然后单击 添加保存选项卡 按钮.

从保存的标签列表中选择要添加的标签。它将加载所选标签页的所有数据。现在,你可以按原样保存,或根据自己的要求进行修改。你还可以通过点击相应的按钮添加更多自定义标签,并根据自己的喜好重新排列标签的顺序。

最后,有一个复选框可以覆盖 “已保存标签”。基本上,它会将该选项卡与原始保存选项卡去链接。因此,今后如果您对保存的标签页做了任何更改,这些更改将不会反映到该产品中。

保存自定义产品标签后,它将立即出现在产品页面上。要验证这一点,只需导航到网站前端,进入产品页面,就能看到自定义选项卡的运行情况。

上文我们介绍了如何使用第三方插件在 WooCommerce 中添加自定义产品标签。不过,还有另一种方法可以实现相同的功能,即使用自定义代码片段。让我们看看如何通过编程在 WooCommerce 产品页面中添加自定义产品标签。

2.以代码方式添加自定义产品标签

在开始使用代码片段在 WooCommerce 中添加自定义产品标签之前,让我们先来了解一下 如何在 WooCommerce 中添加代码片段。

2.1.访问 WordPress 的代码编辑器

首先,我们强烈建议您创建一个 完整备份 网站,并使用子主题编辑 functions.php 文件。请访问您的 WP仪表盘 并导航至 外观>主题编辑器 确保选择子主题并打开 functions.php  文件。现在,您可以在文件 functions.php 末尾添加自定义代码片段。完成后,点击 更新文件按钮 使更改生效。

或者,您也可以使用 代码片段 插件为您的网站添加自定义代码片段。首先,您需要从 WordPress 代码库中安装该插件。只需进入 WP仪表盘 > 插件> 添加新插件 搜索 Code Snippets 插件并将其安装到您的网站上。

然后,从您的 WP仪表盘 进入插件设置,点击 添加新片段 按钮,添加您的自定义代码片段。就这样,您可以根据需要添加任意数量的自定义代码片段。

使用该插件的一个好处是,您无需创建任何子主题,因为插件会自行处理代码片段。不过,还是建议使用子主题,以便在出现问题时确保网站安全。现在你已经学会了如何在 WordPress 网站上添加代码片段,让我们来看看如何使用自定义代码片段在 WooCommerce 中添加自定义产品标签。

2.2.为 WooCommerce 中的所有产品添加自定义产品标签

同时为所有产品添加自定义产品选项卡,对于所有产品的信息保持一致来说,确实非常有效。例如,您可以添加常见问题,这些问题在所有产品中或至少在指定类别的产品中基本保持不变。

以下代码片段可用于添加全局自定义产品标签,并填充相关内容。

//添加新的自定义产品标签
add_filter( 'woocommerce_product_tabs', 'ql_new_custom_product_tab' );

function ql_new_custom_product_tab( $tabs ) {

//要添加多个标签页,请更新 $tabs[xyz] 数组中每个新标签页的标签,如 custom_tab2、my_new_tab 等。
$tabs['custom_tab'] = array(
'title' => __( 'Custom Product Tab', 'woocommerce' ), //将 Custom Product Tab 更改为您想要的任何文本
'priority' => 50,
'callback' => 'ql_custom_product_tab_content'
);
return $tabs;
}

// 为自定义产品标签添加内容
function ql_custom_product_tab_content() {

// 自定义选项卡内容
//您可以在此添加任何 php 代码,它将显示在新创建的自定义选项卡中
echo '<h2>Custom Product Tab Content</h2>';
echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis in dui eget rutrum. Morbi quis sodales felis.</p>';
echo '<img src="http://hyxxxx/wp-content/uploads/2021/10/logo-1.jpg" width="300" height="400" align="center">';
}

完成!现在,您可以导航到网站前端并验证更改。

现在,上述代码段只能用于为 WooCommerce 中的所有产品添加自定义产品标签。但如果你只需要为特定产品添加自定义产品标签呢?我们有一个片段可以帮你完成这项工作。让我们一起来看看吧。

2.3.仅为特定产品添加自定义产品标签

首先,您需要获取要添加自定义标签的产品的产品 ID。只需转到您的 WP仪表盘 并导航到 产品 > 全部产品. 将鼠标悬停在您想要的产品上,它就会显示 Product-ID。保存此 Product-ID,因为稍后我们需要将其添加到代码片段中。

将以下代码片段复制并粘贴到 functions.php 文件或代码片段插件中,无论您使用哪种方法。只需记住将占位符 Product-ID 替换为您的实际 Product-ID。

//添加新的自定义产品标签
add_filter( 'woocommerce_product_tabs', 'ql_specific_custom_product_tab' );

function ql_specific_custom_product_tab( $tabs ) {
global $product;

//抓取产品 ID。将其替换为实际产品 ID
if( $product->get_id() == 1911 ) {

// 添加新标签页
//要添加多个标签页,请更新 $tabs['xyz'] 内每个新标签页的标签,如 custom_tab、my_new_tab 等。
$tabs['specific_product_tab'] = array(
'title' => __( 'Specific Product Tab', 'woocommerce' ), //将 Specific Product Tab 更改为您想要的任何文本
'priority' => 50,
'callback' => 'ql_specific_product_tab_content'
);
}
return $tabs;
}

//为自定义产品标签添加内容
function ql_specific_product_tab_content() {

// 自定义选项卡内容
//您可以在此添加任何 php 代码,它将显示在新创建的自定义选项卡中
echo '<h2>特定产品标签内容</h2>';
echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis in dui eget rutrum. Morbi quis sodales felis.</p>';
echo '<img src="http://hyxxxx.xxx/wp-content/uploads/2021/10/logo-1.jpg" width="300" height="400" align="center">';
}

就是这样。现在,您新创建的自定义产品标签已应用于您所需的产品,并将只显示该产品。

现在,您已经看到了在 WooCommerce 中为单个产品和所有产品添加自定义产品标签的代码片段。让我们再往前走一点,看看还有哪些代码片段可以自定义产品标签。

2.4.重命名产品标签

有时,您可能需要替换自定义选项卡的标题,甚至更改默认选项卡的名称。例如,如果是电视节目或电影,您可能希望将 “评论 “选项卡更改为 “评分”。使用下面的代码片段可以轻松更改自定义产品的标题。

//重新命名 WooCommerce 中的产品标签
add_filter( 'woocommerce_product_tabs', 'ql_rename_product_tabs', 98 );

function ql_rename_product_tabs( $tabs ) {
//将 $tabs[xyz] 数组中的选项卡标签替换为实际选项卡标签
$tabs['reviews']['title'] = __( 'Ratings' ); // 重命名评论选项卡
$tabs['custom_tab']['title'] = __( 'Custom Tab Updated' ); // 重命名用户创建的自定义选项卡。
return $tabs;
}

太好了!您的产品标签页现已重新命名。您现在可以导航到网站前端,亲自验证更改。

2.5.重新排序选项卡

以下代码片段允许您更改产品标签的顺序。它以优先级值为基础。

数字越小表示优先级越高,数字越大表示优先级越低。因此,优先级最高的标签页会首先显示,然后是排在后面的标签页,而优先级最低的标签页会显示在最后一个位置。

请看下面的代码,它使用了几个产品标签来演示如何工作。如有需要,您可以添加更多产品标签,然后根据自己的喜好重新排序。只需确保将标签标题替换为实际标签标题即可。

//在 WooCommerce 中重新排序产品标签
add_filter( 'woocommerce_product_tabs', 'ql_reorder_product_tabs', 98 );

function ql_reorder_product_tabs( $tabs ) {
//根据优先级值重新排序标签页
//更换里面的标签 $tabs['xyz'] 数组,其中包含实际的标签页标签
$tabs['description']['priority'] = 5; // 说明一
$tabs['custom_tab']['priority'] = 10; // 自定义选项卡第二个。
$tabs['specific_product_tab']['priority'] = 15; // 第三个是产品特定选项卡。
$tabs['reviews']['priority'] = 20; //最后评论
return $tabs;
}

就是这样!现在,您已经按照自己的自定义顺序对产品标签进行了排序。现在,您可以导航到 WooCommerce 商店的前端来验证更改。

2.6.删除标签

现在,您已经添加了所有这些标签,但如果您现在想删除它们,该怎么办呢?事实证明,有一个代码片段可以删除产品页面上所有不需要的产品标签。

以下代码片段对默认和自定义产品选项卡都很有效。只需记住用实际标签页标题更改标签页标题即可。

//移除 WooCommerce 中的产品标签
add_filter( 'woocommerce_product_tabs', 'ql_remove_custom_product_tabs', 98 );
function ql_remove_custom_product_tabs( $tabs ) {

//将 $tabs[xyz] 数组中的选项卡标签替换为实际选项卡标签
unset( $tabs['reviews'] ); // 删除评论选项卡
unset( $tabs['description'] ); // 删除说明选项卡
unset( $tabs['custom_tab'] ); // 删除用户创建的自定义选项卡。
return $tabs;
}

就是这样。您不需要的产品标签现已成功移除。现在,您可以导航到 WooCommerce 商店的前端并验证更改。

上面,我们已经介绍了如何使用第三方插件和编程方式在 WooCommerce 中添加自定义产品标签。现在,让我们继续看看组织 WooCommerce 产品的其他几种方法。

附加:如何对WooCommerce产品进行排序

按特定顺序排列产品有两个作用。首先,它可以将某些产品放在页面顶部,从而突出显示这些产品。其次,由于产品的组织方式合乎逻辑,客户可以更轻松地查找或滚动浏览产品。

默认情况下,WooCommerce 提供六个排序选项,并允许您选择其中一个作为默认排序方法。这些选项包括

默认排序(自定义排序 + 名称): 默认情况下,产品根据其名称排序,但同时允许您自定义产品排序。这对于突出显示不符合单一标准的产品非常有用。

受欢迎程度(销售额): 按销售额降序排列项目,将最畅销的项目排在最前面。

平均评分: 按平均评分从高到低排列产品。评分最高的产品排在最前面,其次是后面的产品,依此类推。

按最近时间排序: 根据产品添加到商店的时间排序。这会将最新产品放在最上面,有利于突出最新添加的产品。

按价格排序(asc, desc): 根据您的选择,按价格升序或降序对产品进行排序。