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

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

萨龙龙萨龙龙
WooCommerce, WordPress
4年前
0
0
3.12W
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年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1342.20M456.65W3.85W
分享:
WordPress 主题禁用古滕堡编辑器和小工具
WordPress 主题禁用古滕堡编辑器和小工具上一篇
WordPress 主题获得评论深度的2种方法下一篇
WordPress 主题获得评论深度的2种方法
相关文章
总数:107

WordPress循环中判断为每篇文章设计不同的样式

新闻视频类Yewan主题的首页文章布局是不规则,文章的布局多样化,这是如何实现的?其实是很简单的,我们在循环中进行判断,每一篇文章都可以输出不同…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.20W
0

WordPress按自定义文章类型进行搜索

一般的Wordpress主题中都有多种自定义文章类型,除了了默认的文章还会有作品、商品等自定义类型的文章,而WordPress默认只能搜索到文章…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.24W
0

WordPress 添加菜单项目描述

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

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

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

WordPress多站点社区动态中获取自定义文章类型更新

萨龙网络使用Buddypress社区已经很长一段时间,在社区首页动态中可能获取整个网站的最新文章、用户注册,用户动态内容,而自定义文章类型的发布…
萨龙龙萨龙龙
Buddypress, WordPress
9年前
0
0
1.16W
0

WordPress 文章查询类 WP_Query 如何获取序列化数组中的文章

还是在开发导航类主题Slhao的时候遇到的问题,主题使用CodestarFramework专业版选项框架,文章的Metabox选项…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.04W
0

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

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

WordPress MU多站点从子域名转子目录

使用WordPressMU多站点来管理所有的站点确实很方便,可以省去很多重复的工作,节省资源。萨龙网络使用MU多站点已经很久,已经爱不释手,也…
萨龙龙萨龙龙
WordPress
10年前
0
0
2.40W
0

让SI CAPTCHA Anti-Spam插件支持WooCommerce注册表单验证码

萨龙网络使用的主题Purity最新版本弃用了Buddypress社区插件,这样注册表单只能使用WooCommerce商城自带的,验证码还是使用S…
萨龙龙萨龙龙
WooCommerce, WordPress
9年前
0
0
1.60W
0

WordPress+Nuxt.js+Vue.js开发的前端node项目被停止的处理方案

SlhaoPro主题前端上线后每天能收到宝塔的提示,说项目已经停止,找了很久没有发现问题。在查看node项目网站日志中的响应日志和错误日志时,…
萨龙龙萨龙龙
Nuxt.js, Vue.js, WordPress
2年前
1
1
1W
0

wordpress自定义域函数get_post_custom_values多个值循环

自定义域在Wordpress中有着相当重的份量,很多功能都可以在其中实现,最近有朋友要萨龙龙添加两个功能,一是缩略图使用自定义域来获取(支持外链…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.05W
0

WordPress Mega超级大菜单插件Ubermenu

Ubermenu是一个用户友好的、可高度定制响应式的Wordpress超级大菜单插件,工作原理与Wordpress3菜单系统类似,强大到可创建…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.67W
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 0
评论列表
总数:0
萨龙网络
没有相关内容