本篇是 WoodMart 主题使用教程系列二。因为要写的东西比较多,文章被拉的太长所以会分成几篇内容来讲。想要了解 《 WoodMart 主题介绍及安装教程》 点击立即查看。
WoodMart 后台设置教程
内容顺序不分先后,根据自己的问题对应查看哦。
推荐大家一个不错的配色网站。可以根据你自己的喜好去选择网站的颜色。点击标题或图片查看。
如果你想修改网站的色调,可以通过复制里面的色号然后粘贴到 WoodMart 后台 ,“ 颜色的板块 ”进行替换。
网站按钮样式设置
WoodMart 后台提供了多种按钮的样式,我们在这里修改了成圆角看看效果。
首页刷新后,看到按钮样式没有改变。
菜单栏吸顶效果的设置
当我们页面往下拖动的时候,菜单栏会吸附在顶部。这个功能可以在后台进行设置打开或关闭。
在后台 WoodMart 中找到 “ 页眉构建器 ” – “ 有星星标记的 Header Base ” – “ Main header 做上角有个⚙️ 标记点一下 ” – 找到 “ Sticky ” 点击开启,然后记得要 “保存” ,底部 “Save header” 也点一下即可。
导航菜单的样式修改
如图,导航菜单栏原始的效果图。
修改 Menu 的尺寸
后台修改菜单栏的尺寸,修改完之后记得点击保存菜单。
再刷新看下效果,宽度就改变了。
页眉导航宽度设定
如图这是修改后的全宽效果图。
“ 页眉构建器 ” – “ Settings ” – 开启 “ Make it overlap ” 记得保存两次。 另外不是所有的主题的页眉都可以这样改。
菜单栏下的区块设置
还是这张图,我们看下 “ Menu Block ” 的效果并找到修改的地方。
点击 “ 外观 ” – 在 “ 菜单 ” 里找到 “ Menu Block ” 记下对应的 ID。
在 “HTML Blocks ” 栏目里面找到前面记下的 “ ID 号”,并对他进行编辑。记得使用 “ Elementor ” 进行编辑。
在 “ Elementor ” 中可以修改 “ Menu Block ” 的内容。修改完之后记得保存。
WoodMart 首页修改
点击右上角的导航器,可以查看整个页面的布局。合理的布局结构是,一个内容板块对应一个容器。
轮播图的修改与新增
首先是第一个板块轮播图板块,左侧可以选择 Silder。
可以在后台修改或者新增编辑轮播的内容。
我们用Elementor修改对某个轮播内容的标题。
新增轮播图时,可以修改轮播的宽度、高度的尺寸,尽量保持统一。
刷新页面可以后看到修改后的效果,文字标题改了及新增了轮播图片。
新增自定义block
在首页底部,woodmart提供了预设的block。
Elementor编辑界面就会自动生成对应的block的区块。你也可以自定调整里面的内容信息。修改完记得保存。
只需要将鼠标移动到block上面,点击insert按钮。
prefooter和footer的修改
如图,底部可以分成prefooter和footer两个部分,可以在后台找到对应的地方进行修改。
prefooter修改设置
在woodmart – footer中找到prefooter,找到对应的html-block-id,可以直接点击下面的“edit”进行修改,也可以到html block找到对应的修改。另外根据你的需求也可以自定义修改。
如图,html-block中找到prefooter所在的位置。这个原理和之前提到的header是一样的。
在elementor中对block进行自定义修改,修改完记得保存。
footer修改设置
找到footer修改的地方,把原来的5栏改成3栏,点击保存后刷新页面可以看到效果已经改变。
如果要每个栏目中的子栏目内容进行修改,要去后台外观 – 小工具找到对应的内容。细心的朋友可以发现,当你改成footer3栏小工具也变成3栏(footer的栏目与小工具是对应的)
点击任意的小工具,依旧是可以找到对应html-block-id。后面的操作方式就基本一样了。
WoodMart 首页修改
点击右上角的导航器,可以查看整个页面的布局。合理的布局结构是,一个内容板块对应一个容器。
Silder的修改与新增
首先是第一个板块Silder轮播图,左侧可以选择某个轮播类型。
可以在后台修改或者新增编辑轮播的内容。
我们用Elementor修改对某个轮播内容的标题。
新增轮播图时,可以修改轮播的宽度、高度的尺寸,尽量保持统一。
刷新页面可以后看到修改后的效果,文字标题改了及新增了轮播图片。
可以根据具体的需求,自定义新的轮播类型。
具体的操作方法:Add New轮播类型 – Silders Add New – Elementor的容器使用新增Silder – 刷新页面可以看到更新后的效果。
可以在页面的任何区域,添加自定义的Silder。
新增自定义block
在首页底部,woodmart提供了预设的block。
Elementor编辑界面就会自动生成对应的block的区块。你也可以自定调整里面的内容信息。修改完记得保存。
只需要将鼠标移动到block上面,点击insert按钮。
prefooter和footer的修改
如图,底部可以分成prefooter和footer两个部分,可以在后台找到对应的地方进行修改。
prefooter修改设置
在woodmart – footer中找到prefooter,找到对应的html-block-id,可以直接点击下面的“edit”进行修改,也可以到html block找到对应的修改。另外根据你的需求也可以自定义修改。
如图,html-block中找到prefooter所在的位置。这个原理和之前提到的header是一样的。
在elementor中对block进行自定义修改,修改完记得保存。
footer修改设置
找到footer修改的地方,把原来的5栏改成3栏,点击保存后刷新页面可以看到效果已经改变。
如果要每个栏目中的子栏目内容进行修改,要去后台外观 – 小工具找到对应的内容。细心的朋友可以发现,当你改成footer3栏小工具也变成3栏(footer的栏目与小工具是对应的)
点击任意的小工具,依旧是可以找到对应html-block-id。后面的操作方式就基本一样了。
WooCommerce基础设定
常规设置
商店地址填写你的业务所在地,销售位置选择了特定的区域,在结账时只能选择指定的地区。
如图,由于后台设定了中国大陆。前台结账页面只有一个选项。假如你后台新增“美国”对应的结账页也会新增“美国”大家可以去试一下。
要做国外电商要启动“税率和计算”,国外很注重税率。优惠券的使用根据你的业务需求可以选择开启或关闭。还可以选择你需要使用什么货币进行结算。
如图,当销售区域增加了美国结账页增加了美国。开启优惠券后,可以输入优惠券码。另外支付的货币改成了美元。优惠券的使用方法和税率的设置在后面会讲到。
产品设置
商店页
WooCommerce创建完已经预设好了商店页面Shop,对应的后台设置也是选中的Shop。这里基本上是不太会去调整的。
加入购物车的行为,建议就用默认。你也可以测试勾选后刷新页面看下效果,再决定使用哪种动态效果。图片占位符可以设定为8。重量单位可以看你销售的是什么产品来设定。销售到国外用克比较多。
商品评价
可以选择开启或关闭评论。开启评论后的选项,可进行自定义配置。
必须购买才能评论。
可以进行评星,可设置成非必选项。
账户和隐私
WooCommerce提供2种方式进行结账。
未登录注册也可以下单。
未登录后不能下单。
下单后在我的账户上显示订单信息。
创建账户选项不勾选,则在创建订单时由用户设置密码。
账户擦拭请求建议保持默认状态。
订单信息保持默认状态:永久保存。
总结:结账的2种类型及多种不同的状态,根据你的需求进行设定。教程中的图片展示只是示例,有缺失的部分用户可以通过实践配置就能明白。如有不清楚的地方可以咨询我们。
电子邮件
WooCommerce提供了邮件模版的样式
可以在后台设置头部的图片、底部的内容、中间是邮件正文内容。可以通过邮件的类型进行自定义。另外还可以设置字体颜色、背景等等。
邮件的正文内容,可以根据用户自定义文案内容。
高级设置
其他地方不需要改动,都是WooCommerce默认设置好了。隐私政策进行绑定,安全结账尽量使用SSL进行付款。
WoodMart更新现有商品
- 标题:自定义修改标题
- 链接:设置产品的链接,最好是用可读性比较高的英文
- 内容详情:WordPress编辑器 或 Elementor编辑器
- 常规:商品数量、促销价格、税类型
- 库存:SKU、库存状态等
- 配送:产品重量、尺寸、及配送方式
- 产品封面图:对外展示的第一张图片
- 关联产品:与当前产品关联的产品
- 属性:颜色、尺寸的设置
- 评价:用户对商品的评价
- 产品相册:在详情页展示的其他图片
- 产品分类:设置产品类别
后台的详情设定与前端的展示都是一一对应的。如上图,需要注意以下几点:
1、产品封面图和相册图要与页面设计图片尺寸对应,可以保持页面的美观度。
2、产品最难设置的是SKU、税率、配送
自定义产品描述
产品描述由Elementor管控的。关于产品描述的自定义设计,一般都是在这里进行编辑。
后台保存后刷新页面,在描述区域会替换成用户自定义的内容。
关联产品
后台设置关联产品
设置后刷新页面,可以看到用户端展示关联产品。
产品其他信息
后台设置产品的品牌和颜色的信息。
用户端展示产品其他信息,如果勾选产品页可见则关闭显示。
产品品牌设置
品牌信息显示开关在主题设置 – 商品 – 品牌中进行设置。
后台如果关闭显示,用户端则不显示。
属性 - 品牌类型设置
在后台产品 – 属性 – 配置类别 – 可以找到所有的品牌类型, 记住html-block-id,到里面可以找到品牌类型的设置。
右下角容器里面的内容,都是可以进行自定义设置。
对应的用户端展示页面,可以看到关于品牌的设置信息。
WoodMart电商扩充功能
商店设置
第1个:3种不同的购物车点击后的状态;感觉默认的显示小工具会更好一些。
第2个:会在几秒种后自动关闭。
第3个:可以选择开启,让用户在购物车中修改商品数量。
修改完之后保存页面,刷新页面就能看到对应的效果。这里不做更多演示了。
如果你的商品有sku,建议开启。后台如果开启了sku,用户展示端会相应的显示sku的部分。
后台商品 – 尺寸说明,控制着页面中尺寸展示是开或关。
也可以在产品详情页控制尺寸开或关。
可变产品
1、可变商品在产品列表页可以快速购买,觉得可以关闭。毕竟买东西还是要进入详情页看一看比较好。
2、在产品列表页上显示可边颜色。 根据你的需求去设置吧。
woodmart提供了参考效果,把鼠标移到问号即可查看,就不演示了。
产品标签的设置
Woodmart 可以设置商品标签类型有:促销的、 最新的、热门的。
如果关闭Sale按钮,则显示Sale。开启Sale按钮并在产品价格设置原价和促销价,则页面上会自动统计百分比优惠。
在后台产品列表页,点亮产品的星星表示为热门的。
用户端展示的结果。最新的产品可以在后台设置最新的时间。
品牌的属性
后台可以设置,在用户端品牌展示区域是否显示。还可以设定具体的位置。
快速预览
后台可以设置产品列表的“放大镜按钮”快速预览是否开启,以及具体的样式。
产品对比
后台可以设置是否开启对比,以及对比哪些属性。
将至少2个产品加入对比,然后点击右上角的对比按钮。
可以查看到后台设定的,对比的3个属性。
愿望清单
后台可以设置打开或关闭愿望清单、所有用户或注册登录用户、是否支持批量删除。
在我的账户,可以查看愿望清单以及是否可以多选删除。
WoodMart产品列表页
产品列表页设置
后台可以设置产品列表页的:Ajax加载方式,自动滚动到顶部、去掉面包屑、分类的样式
- 点击左侧颜色的分类时,右侧产品展示区域会有短暂的loading,这个就是ajax加载数据
- 还是点击左侧颜色的分类时,右侧产品展示区域会自动滚动到顶部区域
- 后台如果关闭面包屑,则3会不显示
在产品页显示产品分类的详情介绍。
产品网格
产品网格的风格设置比较简单。设置他的显示方式、分页数、行列数等。
根据你的喜好来设置不同的样式吧。
商店页面左侧区域小部件设置
商品列表页的产品过滤:价格、分类、品牌等等的设置可以去后台进行设置。
在后台 – 外观 – 小工具。 商店页面小部件区域可以找到对应的内容进行修改。