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