WoodMart是我最喜欢用也是经常推荐的B2C电商主题,自带很多商城功能,不用额外折腾插件。拖拽建站、页面美观,速度表现也很稳。搭配一台靠谱的服务器(比如Cloudways 2GB 以上),基本能做到秒开页面,对SEO和移动端转化都很友好。
主题安装
进入wordpress后台,外观,主题。(不知道如何登录后台请先查看wordpress后台教程)
1.点击上传主题。
2.把主题安装包上传,立刻安装。
3.稍等一会儿主题就安装完成了。



主题模板
woodmart主题模板在下面prebuilt websites进去就能看到。
刚进入会提示安装必要插件,woocommerce和woodmart core,一般装这两个就够了。
安装完成回到模板界面,这时候就可以导入了,选择适合自己的,import直接导入,导入完成就可以看到自己网站已经跟模板的一样了。


WoodMart主题元素
Theme setting:主题设置,包含了非常多,非常丰富的功能。有两个功能,一个是查看预置的元素,一个是备份主题设置。
Prebuilt Websilt:预览、选择主题模板
Theme License:主题证书(许可证)
Tools:插件、patcher、状态、更新历史
Header builder:页眉设置
Layouts:产品单页、聚合页、博客等之类的布局
Sliders:轮播图
Html Blocks:woodmart专用模块,可以用来设计各种功能、内容的展现形式
Sidebars:侧边栏

页眉
WoodMart主题自带 Header Builder,可以实现不同类型的页眉,无需插件或代码。主要有以下几种方式:
默认页眉
选择woodmart,点击header builder。

创建new header或者使用默认页眉都可以。

点击+号添加需要的元素,都是常用的页眉元素,非常方便。

点击小齿轮可以设置列数量,单列与3列可选。

设置页眉的布局,高度。
通常我是用三列,Logo、搜索框、login跟cart,看起来比较符合在线商城的需求。
页眉的宽度在这里改不了,需要到整个网站页面布局去改,改了整个网站的尺寸都会变,所以这也是一个缺点。

响应式,移动、桌面端元素展示设置。

页眉样式设置,风格,背景颜色,边框样式。

默认页眉效果。

透明页眉
一样在header builder里面设置,选择需要设置的页眉(一定要设置成默认页眉),点击设置。

两种样式,第一个make it overlap(重叠效果,文字才能悬浮在背景或者图片之上)按钮一定要打开。
make it boxed(盒状)看自己喜好,开不开都可以。


保存,点击页眉最前面的齿轮修改样式。如下图。

选择style样式,把背景颜色都改为0也就是透明。

保存即可。

固定页眉
同样是在header builder设置。
下面这种方式是个性设置,可以单独设置top bar、mian header、Header bottom的效果。
点击齿轮。
打开粘性页眉开关。

保存后,返回选择顶部设置按钮。
推荐:一开始直接点击setting进行整个页眉区域的设置,更轻松。

按下面全部打开:
固定页眉阴影。
滚动时隐藏。
固定方式:1.滚动时一直固定 2.向下滚动时显示
固定页眉高度

sticky header clone,更换固定页眉形式如下图。


固定透明页眉。

许可证
woodmart是付费主题,需要输入许可证才能激活。
如果不知道许可证在哪里,请看图2,3,一个是在购买的订单下载含有许可证的文件,第二个就是许可证(item purchase code),找到后输入theme license相应区域激活即可。



主题设置
General
Layout
Header:选择想要应用的页眉。
Site width要特别讲一下:这边改的话所有的元素都会变,有full width,box,wide1600px,custom可选,一般wide 1600px或者boxed。
Sidebar:选择侧边栏大小及位置。
Offcanvas sidebar for desktop:桌面侧边栏是侧边滑出方式。

容器无法全宽怎么办?
编辑container – 选择XTemos Layout – 然后选择container stretch的stretch container选项就能全宽。
Header Banner
页眉之上的促销海报。

banner link:海报带超链接
Banner content:海报内容
Style:风格
Close button:关闭按钮

促销弹窗
可以用HTML block来制作,也可以纯文本。
Style:背景颜色,文字颜色,弹窗宽度、内距
Setting:是否在移动端隐藏、什么时候展示(多少毫秒之后展示)、浏览多少个页面后展示、弹窗版本(这个不用写)


Age Verify Popup(年龄认证弹窗)
年龄是否满18同意弹窗,某些国家有这样的法规。

Cookie同意协议
cookie协议,特别是欧洲,或者你投谷歌广告需要有。

移动端底部导航菜单
移动端底部的导航菜单,方便购物或者用户来回跳转。

Search(搜索)
主要是搜索结果及来源的选择。


Sticky navigation(固定导航)
侧边固定导航,也是offcanvas菜单。

页面标题
页面标题布局设置,颜色背景。
下面就是SEO面包屑设置,有用yoast插件的可以打开,标题正常设置H1就行。


页脚
一般导入主题模板之后,就自带页脚了,只需要修改它就可以。
可以在主题设置的footer之下选择页脚布局,风格,颜色及固定页脚的方式。



小工具制作页脚
设置之前先查看theme settings里面的footer,有没有把html block改为widget,然后选择一个自己喜欢的布局保存。
copyrights,版权声明也可以在这里更改。
页脚背景颜色,字体等都是这里修改。

保存完直接转外观,自定义。

选择小工具。

4个footer column就是页脚区域。

按需求往每个footer column里面添加内容,保存就可以了。

自带Footer功能
这种方式跟第一种有点类似,新建一个footer或者直接选择有的html block作为页脚。

版权
根据需求自己填写copyright内容。
copyright有两种布局。两列或中心(如图)。



预页脚
预页面讲的是页脚上面的那一部分,分不清楚可以看第二张图。
有纯文本和html block选择。


字体
Basic
基础字体设置,常用的Arial、Roboto
段落、标题、实体名称、二级字体、小工具标题字体、页眉字体



Advanced
高级字体设置,比如不同区域/设备/元素的特殊字体(比如H1/H2/H3/导航/按钮等),或者高级排版功能(字间距、字重等)

Custom Fonts
支持上传你自己的字体文件(woff/ttf/otf等),用于自定义品牌字体,或者导入第三方字体库。

Icon Fonts
设置全站/主题使用的icon font,比如FontAwesome、Material Icons等,控制网站小图标的风格与字体来源。

Adobe Fonts
如果你有Adobe Fonts账号,可以在这里对接Adobe Fonts,直接用Adobe提供的高级商用字体库。

Styles and Colors
Styles
通用外观风格配置。比如圆角的像素。
深色主题选择。


Colors
primary:主要颜色
secondary:次要颜色
Link:链接颜色
移动端顶部页眉颜色

Pages Background
所有页面背景颜色。
商城页面背景颜色
博客背景颜色。
Portfolio颜色。


Buttons
默认按钮风格,字体,颜色。
强调型按钮字体颜色风格。
高级按钮,自定义按钮hover,字体,风格,颜色。



Forms
表单形式和各种颜色设置。

Notices
成功,警告提示的文字和背景颜色。

Carousel
轮播图标颜色,边框等

轮播分页按钮、滚动条颜色风格设置。

商店
Shop
加入购物车后的动作:弹窗、侧边滑出购物车、无特殊动作,任选一种喜欢的
隐藏购物车小部件不打开
直接从购物车小部件更改产品数量,打开。

SKU,按需求打勾,通常打勾在结账、订单页面显示SKU,另外客户邮件也显示。

如果你是鞋服类或者SKU都是显示不同尺寸的,可以把尺寸指南打开。
动态折扣和显示折扣表打开,动态折扣 举个例子,数量越多折扣越大。

Variable Products
产品变体,在快速购买的页面上显示产品的SKU,这样用户就不需要进入产品页面就可以选择想要的SKU并添加进购物车结账。
属性色板:也就是产品有哪几种属性拥有不同的SKU,比如颜色,同一款式有多种颜色的上衣,或者尺寸,同一款产品有多种不同尺寸可选。
根据自己的产品来选择,使用变体中的图片打开,这样SKU就会变成图片样式,其实不打开也可以,只是在属性当中上传图片,在发布产品的可变属性中又要上传一次。


变体图片按以下选择。
最后一个选项,也要看产品,我一般不打开,打开变体图片也会加入到筛选的范围中,显示会比较多,比较冗余。

默认即可。

链接变体其实就是捆绑销售,在发布产品的关联产品可以添加你想交叉销售的产品,或者组合产品。

Product Labels
产品标签形状。
有折扣、热销、售罄、新品这几种标签。
其他的就是设置标签的底色和文字颜色。



Quick View
快速浏览:布局以及显不显示变体。

Compare
对比,比较几款产品的属性,比如价格等等。


Wishlist
愿望清单,开启后,你可以给添加到愿望清单的产品(用户)打折,送礼等等,你可以通过清单了解用户的喜好。


Waitlist
补货清单,补货通知。

Cart
购物车布局,以及数量变化同时更新购物车。

Checkout
结账带有产品图片,数量等等发票信息。

Thank You Page
感谢页面,增加停留时间,改善用户体验,增加回购率。

Frequently Bought Together
捆绑销售,这里可以做几个小动作或者技巧。
比如组合产品打折送礼,价格到哪个具体数值也可以有优惠。

Free Gifts
免费礼品,改善用户购买体验。
例如:购买多少金额赠送配套的产品,礼品卡,折扣券。

Free Shipping Bar
免运费进度条,设置一个额度,用户可以看到距离免运费的金额,提高单笔订单金额。


Estimate Delivery
预计送达时间,主打可视化的期待。

Abandon Cart
废弃购物车,可能某些用户产品加入购物车,然后不小心删除了,可以恢复,另外就是可以有个倒计时,优惠券有效期,缩短购买过程。


产品聚合页
Product Archive
产品聚合页,ajax功能要开,动态筛选。

Product Grid
产品聚合页的布局,数量,形式以及分页还是无限滚动、加载更多,都可以自定义。



Product Styles
产品风格,根据所需。
产品标题对齐(两行)。
倒计时和评价计数可以开一下。





Categories Styles
目录风格。


Shop Filter
过滤器也叫筛选器。
主要看需要过滤的内容是什么,可以自定义。
或者自定义做html blocks,然后直接引用。


Widgets

Page Title
页面标题打开。
categories的话看个人喜好,第三张图就是打开的样式。



Sidebar
侧边栏主要是设置大小,位置,是否需要off canvas形式。

Single Product(产品单页设置)
Single Product
单个产品侧边栏、布局以及页面设计。
粘性产品:产品图片上下滚动
产品摘要添加影子:区分图片与摘要,让摘要更突出。
全宽产品页面:看个人


Gallery
产品组图布局风格。
缩略图尺寸,数量,大小。
产品主图设置单击放大,带视频。


Add to cart
ajax 加入购物车,加入购物车会侧滑出购物车内容。
sticky add to cart,固定购物车在底部。
移动设备固定购物车:一般不设置,看需求。
添加入购物车后的文本,可以写一些例如 使用XXX折扣码 可以节省多少等等的文本,增加购买率。


Buy Now
就是在add to cart 按钮旁边添加一个buy now 按钮。

Elements
面包屑,短描述,库存状态,倒计时,分享按钮按下图设置。




Reviews
评论布局。
Tabs是选项卡,切换风格的。
允许买家带图评论,这个很重要。




Tab
选项卡。
建议直接在发布产品最下方,自定义设置选项卡。

Related & Upsells
交叉捆绑销售,一个是数量,一个是位置。

Visitor Counter
前台显示该产品访客数。

Sold Counter
前台显示该产品销量。

My Account
Login / Register
登录注册页面以及提示文本、仪表盘。

Dashboard

Social Profiles
Social Profiles
侧边社交分享悬浮窗。

Links to Social Profiles
你的社媒主页链接,只要填入相应的链接,前台会自动显示社媒图标(带跳转链接)

Share Buttons
分享按钮,几乎主流都有。

API Integrations
Instagram API
instagram api集成。
自动抓取 Instagram 图片到网站
- 通过绑定 Instagram 账号,Woodmart 可以自动从你指定的 Instagram 账号拉取图片,并同步到 WordPress 媒体库。
- 拉取的图片可以作为商城首页、产品详情页、博客等模块的实时内容展示。
保持内容新鲜与自动更新
- 配合下方的“删除过时的图片”开关,可以让网站上的 Instagram 展示内容保持和你 Instagram 账号同步,只展示最新的图片。
- 老的图片自动从媒体库清理,避免堆积大量无用图片占用空间。
适合商城品牌内容运营
- 很多独立站品牌喜欢把 Instagram 的内容同步到商城首页,比如“品牌生活方式”、“买家秀”、“官方账号动态”。
- 通过自动同步,减少手动上传图片的繁琐操作,提高内容更新效率。

Google Map API
谷歌地图api集成,可以展示公司谷歌地图。

Social Authentication
启用后,用户可以用facebook,谷歌账户一键登录你的网站。

Performance
性能优化,第一次见到有主题自带优化加速功能。
但是如果你有优化加速插件这些功能就保持默认。没有可以全开。
CSS
禁用多余的古腾堡模块,内联大型CSS文件以及加载不加载某些样式都是可以优化网站速度。

JS
JS代码一般是功能性代码,第一个选项打开,第二个不要开,第三个新手也不要开。

Fonts & Icons
保持默认就可以。

Lazy Loading
延迟加载不在首屏的图像(内容)。

Plugins
这项也默认。

Preloader
默认。

Other
两个都不开。或者只开第一个。

Custom CSS
添加自定义CSS。比如谷歌跟踪代码,clarity代码。

Custom JS
添加自定义JS。

Other


Import / Export / Reset
导入导出或者重置主题设置。

WoodMart超级菜单
点击外观 – 菜单。

选择你需要创建mega menu的顶级菜单或者创建新菜单。

然后选择需要做mega menu的顶级页面。

点击creat new HTML Block开始创建超级菜单。

如果点击创建新的HTML Block里面没有elementor编辑选项怎么办?

Elementor-设置,把HTML Blocks打勾。

使用elementor编辑。

加入你想展示在超级菜单里面的元素。

保存后回到菜单,选择相对应得HTML Block即可。

超级菜单创建成功。

Woocommerce与支付网关
在线商城当然是要在线能下单,支付收款的。
可以查看下面的woodmart woocommerce如何发布设置产品以及如何关联测试paypal、stripe收款。