7B2主题商品列表添加价格排序功能(多种排序)

B2主题功能十分丰富,可扩展性强,比如商城功能就十分强大,但是有些细节需要完善。本文就是老白应评论区站友邀请开发,目的就是给B2主题前台和后台的商品列表界面,增加一个商品类型筛选和价格排序功能,详细代码教程如下。

7B2主题商品列表添加价格排序功能(多种排序)

1.B2主题后台商品筛选

1.1 代码

十分简单,把下面的代码添加到主题或子主题中,function.php文件中即可

// 7B2主题商品列表添加筛选-https://www.dzw6.com/33516.html
add_action('restrict_manage_posts', 'add_shop_type_filter');
function add_shop_type_filter($post_type) {
if ('shop' !== $post_type) return;
$filter_value = isset($_GET['zrz_shop_type_filter']) ? $_GET['zrz_shop_type_filter'] : '';
$options = array(
'normal' => '出售',
'lottery' => '积分抽奖',
'exchange' => '积分兑换'
);
echo '<select name="zrz_shop_type_filter">';
echo '<option value="">所有商品类型</option>';
foreach ($options as $key => $value) {
printf(
'<option value="%s"%s>%s</option>',
$key,
$key == $filter_value ? ' selected="selected"' : '',
$value
);
}
echo '</select>';
}
add_filter('parse_query', 'apply_shop_type_filter');
function apply_shop_type_filter($query) {
global $pagenow, $typenow;
if ($typenow === 'shop' && $pagenow === 'edit.php' && !empty($_GET['zrz_shop_type_filter'])) {
$filter_value = sanitize_text_field($_GET['zrz_shop_type_filter']);
$query->set('meta_query', array(
array(
'key' => 'zrz_shop_type',
'value' => $filter_value,
'compare' => '='
)
));
}
}
// 7B2主题商品列表添加筛选-https://www.dzw6.com/33516.html

1.2 效果演示

(看筛选功能,积分我取消了)7B2主题商品列表添加价格排序功能(多种排序)

2.商品价格显示及后台排序

2.1 效果演示

后台商品列表:

7B2主题商品列表添加价格排序功能(多种排序)

2.2 实现代码

3.前端商品页面多种筛选

3.1 效果演示

如图,在前台商品购买界面,显示三种筛选模式

7B2主题商品列表添加价格排序功能(多种排序)

3.2 实现代码

位置/TempParts/shop,shop-buy.php文件,替换为下面的代码

css样式代码,加到style.css文件

/* 排序按钮样式-https://www.dzw6.com/33516.html */
.topic-type-menu ul {
display: flex;
gap: 15px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.topic-type-menu ul li {
margin: 0;
}
.topic-type-menu ul li a {
display: block;
padding: 8px 15px;
border-radius: 4px;
background: var(--b2-background-light);
color: var(--b2-text-color);
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid var(--b2-border-color);
}
.topic-type-menu ul li a:hover {
background: var(--b2-main-hover);
border-color: transparent;
}

4.相关推荐

B2主题可扩展的东西很多,老白以后会结合自己的使用情况发布相关教程或者插件

如有特殊定制化需求可微信联系老白

B2主题通用美化:https://www.dzw6.com/tag/b2-theme-beautify

B2主题圈子美化:https://www.dzw6.com/tag/b2_theme_circle

WordPress顶级优化教程:https://www.dzw6.com/tag/wordpress_optimization

给TA打赏
共{{data.count}}人
人已打赏
网站建设

7B2主题阅读权限管理插件B2 Perm Manager Pro

2025-4-24 10:45:08

网站建设

WordPress网站B2主题美化代码高亮+复制(2025更新)

2025-4-28 11:47:40

🚨 小黑屋
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索