萨龙网络
登录
首页-WordPress文章-WooCommerce,WordPress-正文

在 WordPress 主题中编辑器 WooCommerce 产品选项卡-tabs

萨龙龙萨龙龙
WooCommerce, WordPress
4年前
0
0
3.24W
WooCommerce 产品页面默认有3个选项卡:描述,其它信息和评论,对于很多 WordPress 主题或许不太适合,需要修改或者添加选项卡。WooCommerce 官方文档已经给出了详细的文档: 需要将代码添加到主题functions.php文件。 1、删除选项卡
/**
 * 删除产品数据选项卡
 */
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、重命名选项卡
/**
 * 重命名选项卡
 */
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、更改选项卡顺序
/**
 * 更改选项卡顺序
 */
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、自定义选项卡内容
/**
 * 自定义选项卡内容
 */
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、添加自定义选项卡
/**
 * 添加一个自定义选项卡
 */
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;

}
/**
 * 选项卡内容
 */
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()
比如此段代码:
/**
 * 检查产品是否有属性、尺寸或重量
 */
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;
 
}
有了这些代码,稍作修改,定制选项卡易如反掌。
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/wordpress-woocommerce-change-product-tabs.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1412.36M457.17W4.42W
加载中…
分享:
WordPress 主题禁用古滕堡编辑器和小工具
WordPress 主题禁用古滕堡编辑器和小工具上一篇
WordPress 主题获得评论深度的2种方法下一篇
WordPress 主题获得评论深度的2种方法
相关文章
总数:114

自定义WooCommerce产品文章hook顺序

最近在做一款企业产品展示的商城网站,设计WooCommerce产品文章的布局与默认的布局有很大的不同,所以其中的一些模块都需要重新调整。WooC…
萨龙龙萨龙龙
WooCommerce
9年前
0
0
1.51W
0

WooCommerce 通过woocommerce_cart_item_thumbnail钩子修改购物车缩略图

在开发基于WooCommerce的商城主题时,我们一般会将模板文件添加到主题中来进行修改,对于有钩子或接口的地方,就没有必要再修改模板代码了…
萨龙龙萨龙龙
WooCommerce
6年前
0
0
1.70W
0

WordPress 主题禁用古滕堡编辑器和小工具

WordPress4.9.8版本就发布了古滕堡编辑器,很好用,添加文章也比经典编辑器方便很多。在5.8版本后又在小工具中增加了古滕堡编辑…
萨龙龙萨龙龙
WordPress
4年前
0
0
1.58W
0

WordPress 添加菜单项目描述

WordPress能够在自定义菜单中存储每个菜单项的描述,默认情况下,这些描述不会显示在前端菜单中,需要为相应的菜单增加显示描述的功能。 一…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.47W
0

WordPress 主题获得评论深度的2种方法

一、通过使用全局变量获取评论深度 我相信您应该知道wp_list_comments()函数,它可以将评论打印在网站页面上。 为什么这个功…
萨龙龙萨龙龙
WordPress
4年前
0
0
2.37W
0

修改Woocommerce商品固定链接其它自定义文章类型适用

在更新Concise主题时集成了前端用户中心和商城插件,发现插件中为商城产品文章设置好了固定链接,所以把萨龙网络的作品集与商城的两种自定义类型的…
萨龙龙萨龙龙
WooCommerce
11年前
0
0
1.46W
0

WordPress 主题 Slearn Pro 课程插件之编辑文章时创建和选择课时

在WordPress+Vue.js主题SlearnPro发布2.0重写版本后,用户反馈编辑课程选择课时时不够友好,课时很多时选择就相…
萨龙龙萨龙龙
WordPress
3年前
0
0
2.63W
0

WordPress为分类添加自定义值

在开发一些比较独特的主题过程中,需要自定义很多内容,本文是如何为分类添加自定义缩略图。 将如下代码添加到主题functions.php中:…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.13W
0

萨龙网络站点群所有网站使用https访问

HTTPS(全称:HyperTextTransferProtocoloverSecureSocketLayer),是以安全为目标的…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.49W
0

WordPress获取优酷视频缩略图

很多网站的视频都是来自在线视频网站,这样即节省网站空间也带来更高的访问速度,优酷视频是使用较多的。在添加视频文章时我们都想直接获取视频中的缩略图…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.30W
0

WordPress 最简便的边栏调用方法与提示

WordPress主题文章类型较多,想实现不同的文章类型页面调用不同的边栏,一般的方法是将代码写在主题根目录下的sidebar.php文件…
萨龙龙萨龙龙
WordPress
8年前
0
0
1.22W
0

删除或失效WordPress文章中的图像大小属性

默认情况下,WordPress会将图像元素width和height属性添加到图像元素中。这些属性会影响CSS宽度和高度属性,图片延迟加载时默认图…
萨龙龙萨龙龙
WordPress, 前端资讯
7年前
0
0
1.21W
0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容