WooCommerce激活后如何自定义商店页面

WooCommerce作为WordPress最热门的电商插件，安装后会自动创建一个基础版”商店”页面。但这个默认页面往往比较简陋，无法满足商家的个性化需求。

本文将教你如何定制WooCommerce商店页面，从页面布局到功能优化，打造一个既专业又能提升销量的电商首页。

1. WooCommerce商店页面简介

激活 WooCommerce 插件后，它会自动创建几个关键页面：

• 商店（Shop）
• 购物车（Cart）
• 结账（Checkout）
• 我的账户（My Account）

你可以在后台：WooCommerce > 设置 > 产品 > 商店页面 设置哪个页面作为商店展示页面。

2. 自定义商店页面的主要方法

2.1 使用主题自带的自定义器

很多 WooCommerce 兼容主题（如 Astra、Storefront、OceanWP）都提供了可视化样式调整功能。

操作步骤如下：

1. 进入 WordPress 后台 > 外观 > 自定义
2. 选择 WooCommerce > 产品目录
3. 调整每页商品数量、每行商品数、默认排序方式、是否显示侧边栏等参数

适合初学者使用，简单直观。

2.2 使用页面构建器（Elementor 或 Gutenberg）

Elementor Pro 用户：

1. 安装 Elementor Pro + WooCommerce Builder
2. 前往 Elementor > 模板 > 添加新模板
3. 选择“产品归档”，设计你自己的商店布局
4. 添加产品列表、筛选器、横幅等控件
5. 保存并设置为默认商店归档页面

Gutenberg 用户：

1. 安装 WooCommerce Blocks 插件（如未默认支持）
2. 编辑商店页面，插入“特色分类”“产品分类”“价格筛选”等区块
3. 可搭配导航菜单与封面区块美化布局

2.3 使用短代码插入产品展示

WooCommerce 支持多个短代码调用商品：

进入 WordPress 后台 → 页面/文章 → 编辑目标页面

products limit="12" columns="4" orderby="date" order="DESC"

常用短代码还包括：

• featured_products 推荐商品
• sale_products正在打折的商品
• product_category category="服装"指定分类
• recent_products 最近上架

适用于快速控制页面内容。

3. 商店页面建议内容结构

为了提升用户体验和转化率，建议商店页面包含以下模块：

1. 分类导航菜单（帮助用户快速定位）
2. 商品筛选器（如价格、颜色、尺寸等）
3. 横幅/广告位（突出促销活动或新品）
4. 推荐商品区（热销、新品、限时特价）
5. 商品排序选项（按价格、上架时间等）
6. 用户评分和评价展示（增强信任感）

4. 推荐插件：增强商店页面功能

以下插件可帮助你实现更多自定义需求：

1. WooCommerce Blocks：添加商品区块到 Gutenberg 编辑器
2. Elementor Pro：可视化构建商品归档页面
3. YITH WooCommerce Ajax Filters：高级筛选功能，支持 AJAX 交互

5. 总结

自定义 WooCommerce 商店页面有多种方式，适合不同水平用户：

• 初学者可用主题设置与短代码快速美化商店
• 中高级用户建议使用 Elementor 或 Gutenberg 构建器提升视觉体验

最终目标是提升用户体验，突出重点商品，促进转化与复购。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息