WooCommerce 产品页面默认有3个选项卡:描述,其它信息和评论,对于很多 WordPress 主题或许不太适合,需要修改,排序或者添加选项卡。WooCommerce 官方文档已经给出了详细的文档:
一、使用代码修改
需要将代码添加到主题functions.php
文件。
1、删除选项卡
/**
* 删除产品数据选项卡
* @url https://kuajinggu.com/change-woocommerce-product-tabs/
*/
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // 删除描述
unset( $tabs['reviews'] ); // 删除评论
unset( $tabs['additional_information'] ); // 删除其它信息
return $tabs;
}
2、重命名选项卡
/**
* 重命名选项卡
* @url https://kuajinggu.com/change-woocommerce-product-tabs/
*/
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
$tabs['description']['title'] = __( '产品详情' ); // 重命名描述
$tabs['reviews']['title'] = __( '产品评论' ); // 签名评论
$tabs['additional_information']['title'] = __( '产品参数' ); // 签名其它信息
return $tabs;
}
3、更改选项卡顺序
/**
* 更改选项卡顺序
* @url https://kuajinggu.com/change-woocommerce-product-tabs/
*/
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {
$tabs['reviews']['priority'] = 5; // 评论第一
$tabs['description']['priority'] = 10; // 描述第二
$tabs['additional_information']['priority'] = 15; // 其它信息第三
return $tabs;
}
4、自定义选项卡内容
/**
* 自定义选项卡内容
* @url https://kuajinggu.com/change-woocommerce-product-tabs/
*/
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // 自定义描述回调
return $tabs;
}
/**
* 选项卡内容
*/
function woo_custom_description_tab_content() {
echo '<h2>Custom Description</h2>';
echo '<p>Here\'s a custom description</p>';
}
5、添加自定义选项卡
/**
* 添加一个自定义选项卡
* @url https://kuajinggu.com/change-woocommerce-product-tabs/
*/
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// 添加一个新选项卡
$tabs['test_tab'] = array(
'title' => __( '名称', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
/**
* 选项卡内容
* @url https://kuajinggu.com/change-woocommerce-product-tabs/
*/
function woo_new_product_tab_content() {
// The new tab content
echo '<h2>New Product Tab</h2>';
echo '<p>Here\'s your new product tab.</p>';
}
6、附加信息选项卡
“附加信息”选项卡仅在产品设置了重量、尺寸或属性,并选中“在产品页面上可见”时才会显示。如果在产品没有重量、尺寸或属性时,尝试对该选项卡更改,将出现类似于以下的错误消息:
Warning: call_user_func() expects parameter 1 to be a valid callback, no array or string given in /mysite/wp-content/plugins/woocommerce/templates/single-product/tabs/tabs.php on line 35
在这种情况下,必须使用 WooCommerce 条件判断:
has_attributes()
has_dimensions()
has_weight()
比如此段代码:
/**
* 检查产品是否有属性、尺寸或重量
* @url https://kuajinggu.com/change-woocommerce-product-tabs/
*/
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
global $product;
if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) {
$tabs['additional_information']['title'] = __( '产品参数' ); // 重命名附加信息选项卡
}
return $tabs;
}
二、使用相关插件自定义
需要安装一个免费插件,Custom Product Tabs for WooCommerce。
1.安装插件
1-1 WordPress后台 —— 左侧导航栏 —— 插件Plugins —— 搜索“Custom Product Tabs for WooCommerce”
我们要安装的是这个插件。
1-2 安装成功后 —— 左侧导航栏 —— 插件plugins —— 找到这个插件,点击Saved Tabs
2.新建Saved Tabs 通用模板
Save Tabs指的是常用的Tab内容,比如退换货,物流,其他常见的顾客疑问。
2-1 点击Add new,新增一个Saved Tabs
2-2 输入标题和正文内容,点击保存
3.在产品页增加Custom Tab 自定义标签选项卡
3-1 WordPress后台 —— 左侧导航栏 —— 产品Products —— Edit编辑产品
3-2 你可以在产品数据Product data这里看到 Custom Tabs(自定义标签页)
● Add a tab,新建一个标签页,每个产品可以输入不同内容
● Add a saved tab,套用之前保存的通用Tab内容
3-3 点击 Add a tab,输入标签页的标题和正文内容
3-4 如果你有多个自定义标签,点击旁边的Move tab order,调整位置顺序
3-5 保存标签页内容
3-6 保存产品页,点击Update更新
3-7 打开产品页,这时候就能看到新增的产品数据选项卡。
方便顾客切换菜单查看各部分内容
总结
如果你想系统学习使用WooCommerce,请看务必查看WooCommerce教程。当然Woodmart主题中可以自定义Tabs。