如何更改店面主题产品页面选项卡颜色

已发表: 2020-10-29

店面产品页面标签颜色 WooCommerce 在 WordPress 存储库中拥有超过 500 万个活动安装。 WooCommerce 是一个非常受欢迎的 WordPress 电子商务解决方案。大多数人都在使用 WooCommerce 建立他们的在线商店，主要是因为它的灵活性和易于定制。

WooCommerce 有许多扩展，几乎涵盖了您可能需要的所有特性或功能。然而，其中一些需要花钱，但他们仍然可以完成工作。您可以使用操作轻松地自己进行一些自定义。

店面产品页面标签颜色

在本教程中，我将更改产品页面选项卡的颜色。此外，我将使用添加和编辑 WooCommerce 产品选项卡。

如果您熟悉 WooCommerce，就会知道 WooCommerce 支持三个选项卡。这些选项卡是：

描述
附加信息
评论

这是 Storefront 主题显示它们的方式：产品标签

更改 WooCommerce 产品页面选项卡颜色的步骤

以下是您需要遵循的步骤：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 自定义。
在出现的左侧边栏中向下导航到Additional CSS 。
添加 CSS 规则。

 .woocommerce div.product .woocommerce-tabs ul.tabs li.active

{

背景颜色：#a02fa4 !important;

颜色：白色！重要；

}

这将是结果：

此代码更改活动选项卡的颜色。

此外，我将分享一些片段来自定义此部分。

添加自定义 WooCommerce 店面产品标签的步骤

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面后，查找主题功能文件以添加添加自定义 WooCommerce 产品选项卡的功能。
将以下代码添加到 functions.php 文件中：

 add_filter('woocommerce_product_tabs', 'njengah_new_product_tab');

功能 njengah_new_product_tab( $tabs ) {

// 添加新标签

$tabs['test_tab'] = 数组（

'title' => __( '折扣', 'text-domain' ),

'优先级' => 50,

'回调' => 'njengah_new_product_tab_content'

);

返回$标签；

}




功能 njengah_new_product_tab_content() {

// 新标签内容

回声“折扣”；

echo '这是您的新折扣产品标签。';

}

这将是结果：

删除 WooCommerce 店面产品标签的步骤

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面后，查找主题函数文件以添加删除 WooCommerce Storefront 产品选项卡的函数。
将以下代码添加到 functions.php 文件中：

 add_filter('woocommerce_product_tabs', 'njengah_remove_product_tabs', 98);

功能 njengah_remove_product_tabs( $tabs ) {

未设置（$tabs['description']）； // 移除描述标签

未设置（$tabs['reviews']）； // 移除评论标签

未设置（$tabs['additional_information']）； // 删除附加信息选项卡

未设置（$tabs['test_tab']）； // 移除折扣标签

返回$标签；

}

这将是结果：

重命名 WooCommerce 店面产品标签的步骤

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面后，查找主题函数文件以添加重命名 WooCommerce Storefront 产品选项卡的函数。
将以下代码添加到 functions.php 文件中：

 add_filter('woocommerce_product_tabs', 'njengah_rename_tabs', 98);

功能 njengah_rename_tabs( $tabs ) {

$tabs['description']['title'] = __( '更多信息', 'text-domain' ); // 重命名描述选项卡

$tabs['reviews']['title'] = __('Ratings', 'text-domain'); // 重命名评论标签

$tabs['additional_information']['title'] = __('Product Data', 'text-domain'); // 重命名附加信息选项卡

$tabs['test_tab']['title'] = __( 'Commission', 'text-domain' ); //重命名折扣标签

返回$标签；

}

这将是结果：

重新订购 WooCommerce 产品标签的步骤

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。打开主题编辑器页面后，查找主题函数文件以添加函数以重新订购 WooCommerce 产品选项卡。
将以下代码添加到 functions.php 文件中：

 add_filter('woocommerce_product_tabs', 'njengah_reorder_tabs', 98);

功能 njengah_reorder_tabs( $tabs ) {

$tabs['reviews']['priority'] = 5; // 先评论

$tabs['description']['priority'] = 15; // 说明第三

$tabs['additional_information']['priority'] = 20; // 附加信息第四

返回$标签；

}

这将是结果：

结论

这篇文章分享了如何更改单个产品页面上活动产品选项卡的颜色。此外，我还分享了一些可用于自定义此部分的代码片段。我已经说明了如何添加或删除产品选项卡。此外，我还演示了如何重命名和重新排序 WooCommerce Storefront 产品选项卡。

类似文章

如何删除搜索框店面主题
如何在 WordPress 中将子菜单添加到自定义帖子类型菜单
如何在店面主题 WooCommerce 中隐藏标签
从 WooCommerce 产品页面隐藏或删除数量字段
如何使用 WooCommerce 销售数字产品
如何在 WooCommerce 中添加自定义订单状态
如何在 WooCommerce 中隐藏添加到购物车按钮
如何更改按钮颜色店面主题
如何更改字体大小 WooCommerce 店面主题
如何从店面 WooCommerce 中隐藏移动页脚
如何隐藏类别 WooCommerce 店面主题
如何更改店面每行产品数量
如何在 WooCommerce 店面中关闭下一个产品选项卡
如何删除相关产品 WooCommerce 店面主题
如何向 WooCommerce 产品添加类别
如何从店面主题标题中删除购物车
如何在 WooCommerce 中重命名订单状态消息
如何更改每页的产品 WooCommerce 店面主题
如何将 WooCommerce 购物车和结帐放在一页上
如何在 WooCommerce 的商店页面中隐藏所有产品