WoodMart电商主题使用教程(含下载)

WoodMart 是 WooCommerce 最强电商主题之一,以下为完整使用与配置教程(不含安装激活),覆盖后台入口、核心设置、电商功能、页面编辑、页眉页脚、菜单、性能与维护全流程。

一、后台入口与基础概览

进入 WordPress 后台 → 左侧菜单栏 WoodMart(主题核心面板),主要子菜单:

Theme Settings(主题设置):全站样式、布局、颜色、字体、电商、性能等全局配置(最常用)。

Header Builder(页眉生成器):拖拽式自定义页眉(含多套页眉、悬浮 /sticky 效果)。

Footer Builder(页脚生成器):拖拽式自定义页脚、小工具区域。

HTML Blocks(HTML 块):创建可复用模块(如广告、导航、弹窗),全局调用。

Presets(设置预设):为不同页面 / 分类创建独立主题配置(如首页、分类页、单品页各一套)。

Plugins(插件):安装 / 更新主题配套插件(如 Elementor、WPBakery、WooCommerce)。

Import/Export(导入导出):备份 / 恢复主题设置、演示数据。

二、Theme Settings(主题设置)核心配置(必做)

  1. General(通用)

Layout(布局):全站宽度(Boxed/Full Width)、侧边栏位置(左 / 右 / 无)、内容宽度、间距。

Colors(颜色):主色、辅助色、按钮色、文字色、背景色、暗黑模式配色。

Typography(字体):标题字体、正文字体、字体大小、行高、权重(支持 Google Fonts)。

Logo(Logo):上传主 Logo、移动端 Logo、悬浮 /sticky 状态 Logo、Logo 宽度。

Favicon(网站图标):上传浏览器标签图标。

Preloader(预加载):启用 / 禁用加载动画、选择动画样式、自定义加载图标。

  1. Header(页眉)

Header Layout:选择默认页眉模板(如简约、电商、多栏)。

Sticky Header(悬浮页眉):启用滚动固定、设置悬浮样式、隐藏 / 显示元素。

Top Bar(顶部栏):启用 / 禁用、设置内容(电话、邮箱、社交、语言 / 货币切换)。

Mobile Header(移动端页眉):汉堡菜单样式、Logo 位置、搜索 / 购物车图标位置。

  1. Shop(商店,电商核心)

(1)Product Archive(产品聚合页 / 分类页)

Layout:网格 / 列表布局、产品列数(2/3/4/5 列)、产品间距、分页(无限滚动 / 加载更多 / 传统分页)。

Products per page:每页显示数量(默认 12,建议 12--24)。

Sidebar:侧边栏位置、筛选器位置(顶部 / 侧边)。

Shop filters(商店筛选):启用 AJAX 筛选(属性、价格、分类、评分)、筛选器样式、默认展开 / 折叠。

Product labels(产品标签):新品、热销、特价、库存紧张标签样式、位置、自定义文本。

Quick view(快速预览):启用 / 禁用、预览弹窗样式、显示内容(图片、价格、属性、加入购物车)。

(2)Single Product(单品页)

Layout:图片位置(左 / 右 / 顶部)、图片大小、缩略图样式(水平 / 垂直)。

Product tabs(产品标签):描述、评论、附加信息、自定义标签(如尺寸、材质)。

Add to cart(加入购物车):按钮样式、数量选择器、AJAX 加入购物车(无刷新)。

Product meta(产品元信息):显示 / 隐藏 SKU、分类、标签、库存、重量、尺寸。

Related products(相关产品):显示数量、列数、排序方式。

Upsells/Cross-sells(关联销售 / 交叉销售):启用 / 禁用、布局。

(3)Advanced Shop Features(高级电商功能)

Wishlist(心愿单):启用、按钮位置、心愿单页面、邮件通知。

Compare(产品比较):启用、比较按钮、比较页面、最多比较数量。

Abandoned Cart(废弃购物车):启用、邮件提醒、延迟时间、优惠设置。

Free shipping bar(免邮进度条):启用、目标金额、显示位置、样式。

Size guide(尺寸指南):启用、自定义尺寸表、弹窗 / 页面显示。

Waitlist(缺货等待列表):启用、邮件通知、到货提醒。

Stock progress bar(库存进度条):启用、显示低库存进度。

  1. Blog(博客)

Layout:列表 / 网格、侧边栏、分页、文章元信息(日期、作者、分类、评论)。

Single post(单篇文章):布局、侧边栏、分享按钮、相关文章。

  1. Performance(性能优化,必开)

CSS/JS Optimization:压缩 CSS/JS、合并 CSS/JS、延迟加载 JS、移除未使用 CSS。

Lazy Load:图片 /iframe 懒加载、排除特定图片。

Cache:启用主题缓存、缓存时间、清除缓存按钮。

Fonts:预加载字体、禁用 Google Fonts(国内站建议)。

Disable Unused Features:禁用表情、嵌入、古腾堡块(如用 Elementor)。

  1. Other(其他)

Page Builder:选择默认编辑器(Elementor/WPBakery)。

Maintenance Mode(维护模式):启用、自定义维护页面。

Custom CSS/JS:添加自定义代码。

WPML(多语言):多语言兼容设置。

三、Header Builder(页眉生成器):拖拽自定义页眉

进入 WoodMart → Header Builder,默认有 1 套页眉(标星为当前使用)。

新建页眉:点击 Add New → 命名 → 选择模板 → 进入编辑。

结构编辑:

页眉分为Top Bar、Header、Bottom Bar三行,每行可添加元素(Logo、菜单、搜索、购物车、社交、按钮、HTML 块等)。

拖拽元素调整顺序、对齐(左 / 中 / 右)、间距、样式。

Sticky Header(悬浮页眉):单独设置悬浮状态的元素显示 / 隐藏、样式。

Mobile Header(移动端页眉):单独设置移动端布局、汉堡菜单、元素位置。

保存并设为默认:编辑完成后点击 Save → 设为 Default Header。

四、Footer Builder(页脚生成器):拖拽自定义页脚

进入 WoodMart → Footer Builder,默认有 1 套页脚。

新建页脚:点击 Add New → 命名 → 选择列数(1--6 列)。

添加小工具:每列可添加 WooCommerce 小工具(分类、筛选、购物车)、WoodMart 小工具(产品轮播、品牌、社交)、文本 / HTML、菜单。

样式设置:背景色、文字色、间距、边框、版权信息。

保存并设为默认:编辑完成后点击 Save → 设为 Default Footer。

五、Mega Menu(超级菜单)设置

进入 Appearance → Menus,编辑主菜单。

选中需要设置超级菜单的菜单项 → 点击WoodMart Menu Settings。

启用Mega Menu → 选择列数(2--6 列) → 每列添加子菜单 / 分类 / 产品 / HTML 块。

样式设置:背景色、文字色、宽度、图标、图片。

保存菜单 → 前台查看效果。

六、页面编辑(Elementor/WPBakery)

  1. 首页 / 页面编辑

进入 Pages → All Pages,选择页面 → 点击Edit with Elementor(或 WPBakery)。

使用 WoodMart 元素:

Product Grid/Carousel:产品网格 / 轮播、筛选条件(分类、标签、热销、新品)、布局、数量。

Product Tabs:产品标签(新品 / 热销 / 特价)切换。

Banner Slider:轮播广告、自定义链接。

Category Grid:分类网格、分类图片、名称。

Brand Slider:品牌轮播、品牌链接。

Testimonials:客户评价轮播。

保存并预览:编辑完成后点击 Update → 预览前台效果。

  1. 产品编辑

进入 Products → Add New,添加产品信息(标题、描述、价格、库存、图片、属性)。

WoodMart 产品设置:

Product Layout:单品页布局、图片位置。

Product Labels:自定义产品标签(新品、热销)。

Extra Content:单品页额外内容(视频、尺寸表、自定义 HTML)。

发布产品 → 前台查看。

七、HTML Blocks(可复用模块)

进入 WoodMart → HTML Blocks → Add New,命名模块。

使用 Elementor/WPBakery 编辑内容(如广告、导航、弹窗、产品推荐)。

调用方式:

在 Header/Footer Builder 中添加HTML Block元素 → 选择模块。

在页面编辑中添加WoodMart HTML Block元素 → 选择模块。

在菜单中添加HTML Block作为超级菜单内容。

八、Presets(设置预设):为不同页面定制样式

进入 WoodMart → Presets → Add New,命名预设(如 "分类页深色模式")。

配置设置:修改布局、颜色、字体、页眉、页脚、产品展示等(仅修改需要差异化的部分)。

应用条件:选择应用范围(全站、特定页面、特定分类、特定产品)。

保存预设 → 前台自动生效。

九、日常操作与维护

清除缓存:Theme Settings → Performance → Clear Cache;更新主题 / 产品后必做。

更新主题:WoodMart → Plugins → 检查主题更新 → 一键更新。

备份设置:WoodMart → Import/Export → Export Settings → 下载备份文件。

性能测试:用 PageSpeed Insights、GTmetrix 检测,根据报告优化 Performance 设置。

常见问题:

样式错乱:清除缓存、禁用 CSS/JS 合并、检查插件冲突。

产品不显示:检查产品库存、可见性、分类设置。

移动端适配异常:在 Header Builder/Theme Settings 中单独调整移动端设置。

十、电商功能实操(快速上手)

快速预览:Theme Settings → Shop → Product Archive → 启用 Quick View → 前台分类页点击产品预览。

心愿单 / 比较:Theme Settings → Shop → Advanced Features → 启用 Wishlist/Compare → 产品页添加按钮 → 前台查看心愿单 / 比较页面。

废弃购物车:Theme Settings → Shop → Advanced Features → 启用 Abandoned Cart → 设置邮件提醒 → 客户未付款时自动发送提醒。

免邮进度条:Theme Settings → Shop → Advanced Features → 启用 Free Shipping Bar → 设置目标金额 → 前台显示进度。

十一、WoodMart电商主题下载

网上搜素"芒果运营WordPrss"即可找到。

相关推荐
syjy21 小时前
WooCommerce Variation Swatches Pro WordPress插件使用教程(含下载)
wordpress·wordpress插件
WordPress学习笔记11 小时前
模板业(mobanye)各行各业的网站模板
wordpress
syjy21 天前
(含下载)All in One SEO Pack Pro WordPress插件使用教程
wordpress·wordpress插件
syjy22 天前
WP Smush Pro WordPress插件使用教程(含下载)
wordpress·wordpress插件
代龙涛2 天前
WordPress archive.php 分类与归档页面开发指南
开发语言·后端·php·wordpress
WordPress学习笔记3 天前
Grace主题(Grace Theme):高端原创设计 优雅大气的WordPress主题
wordpress
WordPress学习笔记4 天前
建跨境独立站用XXTheme主题好还是GraceTheme主题好?
wordpress
WordPress学习笔记6 天前
外贸模板推荐
wordpress
WordPress学习笔记7 天前
用“第一性原理”思维,为搜索引擎收录铺就坦途
搜索引擎·wordpress
Web极客码8 天前
深入了解WordPress网站访客意图
服务器·前端·wordpress