WoodMart 主题后台设置基础教程(2024最新)

WoodMart 主题

本篇是 WoodMart 主题使用教程系列二。因为要写的东西比较多,文章被拉的太长所以会分成几篇内容来讲。想要了解 《 WoodMart 主题介绍及安装教程》 点击立即查看。

WoodMart 后台设置教程

内容顺序不分先后,根据自己的问题对应查看哦。 

推荐大家一个不错的配色网站。可以根据你自己的喜好去选择网站的颜色。点击标题或图片查看。

woodmart 修改网站配色

如果你想修改网站的色调,可以通过复制里面的色号然后粘贴到 WoodMart 后台 ,“ 颜色的板块 ”进行替换。

网站按钮样式设置

woodmart 网站按钮样式设置

WoodMart 后台提供了多种按钮的样式,我们在这里修改了成圆角看看效果。

查看按钮设置的效果

首页刷新后,看到按钮样式没有改变。

菜单栏吸顶效果的设置

菜单栏吸顶效果的设置

当我们页面往下拖动的时候,菜单栏会吸附在顶部。这个功能可以在后台进行设置打开或关闭。

woodmart 后台设置吸顶效果

在后台 WoodMart 中找到 “ 页眉构建器 ” – “ 有星星标记的 Header Base ” – “ Main header 做上角有个⚙️ 标记点一下 ” – 找到 “ Sticky ” 点击开启,然后记得要 “保存” ,底部 “Save header” 也点一下即可。

导航菜单的样式修改

菜单修改前的效果

如图,导航菜单栏原始的效果图。

修改 Menu 的尺寸

修改 Menu 的尺寸

后台修改菜单栏的尺寸,修改完之后记得点击保存菜单。

菜单修改后的效果

再刷新看下效果,宽度就改变了。

页眉导航宽度设定

页眉导航宽度设定​

如图这是修改后的全宽效果图。

woodmart页眉导航全宽后台设置

“ 页眉构建器 ” – “ Settings ” – 开启 “ Make it overlap ” 记得保存两次。 另外不是所有的主题的页眉都可以这样改。

菜单栏下的区块设置

菜单栏下的区块设置​

还是这张图,我们看下 “ Menu Block ” 的效果并找到修改的地方。

找到menu block设置的地方

点击 “ 外观 ” – 在 “ 菜单 ” 里找到 “ Menu Block ”  记下对应的 ID。

对menu block进行设置修改

在 “HTML Blocks ” 栏目里面找到前面记下的 “ ID 号”,并对他进行编辑。记得使用 “ Elementor ” 进行编辑。

使用 Elementor 进行编辑

在 “ Elementor ” 中可以修改 “  Menu Block ” 的内容。修改完之后记得保存。

menu block的修改后效果图

WoodMart 首页修改

WoodMart 首页修改​

点击右上角的导航器,可以查看整个页面的布局。合理的布局结构是,一个内容板块对应一个容器。

轮播图的修改与新增

轮播图的修改与新增​

首先是第一个板块轮播图板块,左侧可以选择 Silder。

修改或新增抡播内容

可以在后台修改或者新增编辑轮播的内容。

修改轮播图的标题

我们用Elementor修改对某个轮播内容的标题。

新增轮播图修改高度

新增轮播图时,可以修改轮播的宽度、高度的尺寸,尽量保持统一。

查看修改后的轮播效果

刷新页面可以后看到修改后的效果,文字标题改了及新增了轮播图片。

新增自定义block
新增自定义的block

在首页底部,woodmart提供了预设的block。

插入自定义block

Elementor编辑界面就会自动生成对应的block的区块。你也可以自定调整里面的内容信息。修改完记得保存。

编辑修改自定义block

只需要将鼠标移动到block上面,点击insert按钮。

prefooter和footer的修改

prefooter and footer

如图,底部可以分成prefooter和footer两个部分,可以在后台找到对应的地方进行修改。

prefooter修改设置
找到prefooter的html block位置

在woodmart – footer中找到prefooter,找到对应的html-block-id,可以直接点击下面的“edit”进行修改,也可以到html block找到对应的修改。另外根据你的需求也可以自定义修改。

找到prefooter的html block位置

如图,html-block中找到prefooter所在的位置。这个原理和之前提到的header是一样的。

在Elementor中修改html block

在elementor中对block进行自定义修改,修改完记得保存。

footer修改设置
修改footer的栏目样式

找到footer修改的地方,把原来的5栏改成3栏,点击保存后刷新页面可以看到效果已经改变。

footer样式和小工具数量对应

如果要每个栏目中的子栏目内容进行修改,要去后台外观 – 小工具找到对应的内容。细心的朋友可以发现,当你改成footer3栏小工具也变成3栏(footer的栏目与小工具是对应的)

点击任意的小工具,依旧是可以找到对应html-block-id。后面的操作方式就基本一样了。

根据html-block-id修改footer栏目

WoodMart 首页修改

Elementor查看WoodMart首页结构

点击右上角的导航器,可以查看整个页面的布局。合理的布局结构是,一个内容板块对应一个容器。

Silder的修改与新增
轮播图的修改与新增​

首先是第一个板块Silder轮播图,左侧可以选择某个轮播类型。

修改或新增抡播内容

可以在后台修改或者新增编辑轮播的内容。

修改轮播图的标题

我们用Elementor修改对某个轮播内容的标题。

新增轮播图修改高度

新增轮播图时,可以修改轮播的宽度、高度的尺寸,尽量保持统一。

查看修改后的轮播效果1
查看修改后的轮播效果2

刷新页面可以后看到修改后的效果,文字标题改了及新增了轮播图片。

新增轮播类型
woodmart theme home silder new content

可以根据具体的需求,自定义新的轮播类型。

查看新的轮播类型

具体的操作方法:Add New轮播类型 – Silders Add New – Elementor的容器使用新增Silder – 刷新页面可以看到更新后的效果。

自定义轮播位置

可以在页面的任何区域,添加自定义的Silder。

新增自定义block
新增自定义的block

在首页底部,woodmart提供了预设的block。

插入自定义block

Elementor编辑界面就会自动生成对应的block的区块。你也可以自定调整里面的内容信息。修改完记得保存。

编辑修改自定义block

只需要将鼠标移动到block上面,点击insert按钮。

prefooter和footer的修改

prefooter and footer

如图,底部可以分成prefooter和footer两个部分,可以在后台找到对应的地方进行修改。

prefooter修改设置
找到prefooter的html block位置

在woodmart – footer中找到prefooter,找到对应的html-block-id,可以直接点击下面的“edit”进行修改,也可以到html block找到对应的修改。另外根据你的需求也可以自定义修改。

找到prefooter的html block位置

如图,html-block中找到prefooter所在的位置。这个原理和之前提到的header是一样的。

在Elementor中修改html block

在elementor中对block进行自定义修改,修改完记得保存。

footer修改设置
修改footer的栏目样式

找到footer修改的地方,把原来的5栏改成3栏,点击保存后刷新页面可以看到效果已经改变。

footer样式和小工具数量对应

如果要每个栏目中的子栏目内容进行修改,要去后台外观 – 小工具找到对应的内容。细心的朋友可以发现,当你改成footer3栏小工具也变成3栏(footer的栏目与小工具是对应的)

点击任意的小工具,依旧是可以找到对应html-block-id。后面的操作方式就基本一样了。

根据html-block-id修改footer栏目
免费主题配图

WooCommerce基础设定

常规设置

woocommerce常规设置

商店地址填写你的业务所在地,销售位置选择了特定的区域,在结账时只能选择指定的地区。

设置销售区域

如图,由于后台设定了中国大陆。前台结账页面只有一个选项。假如你后台新增“美国”对应的结账页也会新增“美国”大家可以去试一下。

设置税、优惠券、结算单位

要做国外电商要启动“税率和计算”,国外很注重税率。优惠券的使用根据你的业务需求可以选择开启或关闭。还可以选择你需要使用什么货币进行结算。

woo cart address tax coupon show

如图,当销售区域增加了美国结账页增加了美国。开启优惠券后,可以输入优惠券码。另外支付的货币改成了美元。优惠券的使用方法和税率的设置在后面会讲到。

产品设置

商店页
shop为默认商品页

WooCommerce创建完已经预设好了商店页面Shop,对应的后台设置也是选中的Shop。这里基本上是不太会去调整的。

产品设置页

加入购物车的行为,建议就用默认。你也可以测试勾选后刷新页面看下效果,再决定使用哪种动态效果。图片占位符可以设定为8。重量单位可以看你销售的是什么产品来设定。销售到国外用克比较多。

商品评价

可以选择开启或关闭评论。开启评论后的选项,可进行自定义配置。

已购买才能评价

必须购买才能评论。

可以评论但不必填

可以进行评星,可设置成非必选项。

账户和隐私
pay status type

WooCommerce提供2种方式进行结账。

未登录也能下单

未登录注册也可以下单

必须登录才能下单

未登录后不能下单。

下单成功显示订单详情

下单后在我的账户上显示订单信息。

由用户下单时设定邮箱密码

创建账户选项不勾选,则在创建订单时由用户设置密码。

账户信息

账户擦拭请求建议保持默认状态。

pay user

订单信息保持默认状态:永久保存。

总结:结账的2种类型及多种不同的状态,根据你的需求进行设定。教程中的图片展示只是示例,有缺失的部分用户可以通过实践配置就能明白。如有不清楚的地方可以咨询我们。
电子邮件
邮件的模版

WooCommerce提供了邮件模版的样式

邮件的头部和底部设置

可以在后台设置头部的图片、底部的内容、中间是邮件正文内容。可以通过邮件的类型进行自定义。另外还可以设置字体颜色、背景等等。

邮件正文内容设置

邮件的正文内容,可以根据用户自定义文案内容。

高级设置
Woocommerce高级设置

其他地方不需要改动,都是WooCommerce默认设置好了。隐私政策进行绑定,安全结账尽量使用SSL进行付款。

WoodMart更新现有商品

产品详情1
  • 标题:自定义修改标题
  • 链接:设置产品的链接,最好是用可读性比较高的英文
  • 内容详情:WordPress编辑器 或 Elementor编辑器
  • 常规:商品数量、促销价格、税类型
  • 库存:SKU、库存状态等
  • 配送:产品重量、尺寸、及配送方式
  • 产品封面图:对外展示的第一张图片
产品详情2
  • 关联产品:与当前产品关联的产品
  • 属性:颜色、尺寸的设置
  • 评价:用户对商品的评价
  • 产品相册:在详情页展示的其他图片
  • 产品分类:设置产品类别
产品前端展示

后台的详情设定与前端的展示都是一一对应的。如上图,需要注意以下几点:
1、产品封面图和相册图要与页面设计图片尺寸对应,可以保持页面的美观度。
2、产品最难设置的是SKU、税率、配送

自定义产品描述
产品描述Elementor编辑

产品描述由Elementor管控的。关于产品描述的自定义设计,一般都是在这里进行编辑。

产品描述前端展示

后台保存后刷新页面,在描述区域会替换成用户自定义的内容。

关联产品
product relate set

后台设置关联产品

用户端展示关联产品

设置后刷新页面,可以看到用户端展示关联产品。

产品其他信息
后端设置产品其他信息

后台设置产品的品牌和颜色的信息。

用户端显示产品其他信息

用户端展示产品其他信息,如果勾选产品页可见则关闭显示。

产品品牌设置
后端设置品牌显示状态

品牌信息显示开关在主题设置 – 商品 – 品牌中进行设置。

用户端关闭品牌显示

后台如果关闭显示,用户端则不显示。

属性 - 品牌类型设置
属性-品牌信息类型

在后台产品 – 属性 – 配置类别 – 可以找到所有的品牌类型, 记住html-block-id,到里面可以找到品牌类型的设置。

elementor编辑品牌信息

右下角容器里面的内容,都是可以进行自定义设置。

用户端展示页查看品牌信息

对应的用户端展示页面,可以看到关于品牌的设置信息。

WoodMart电商扩充功能

商店设置
商店设置

第1个:3种不同的购物车点击后的状态;感觉默认的显示小工具会更好一些。
第2个:会在几秒种后自动关闭。
第3个:可以选择开启,让用户在购物车中修改商品数量。
修改完之后保存页面,刷新页面就能看到对应的效果。这里不做更多演示了。

商品SKU显示

如果你的商品有sku,建议开启。后台如果开启了sku,用户展示端会相应的显示sku的部分。

商品尺寸设置

后台商品 – 尺寸说明,控制着页面中尺寸展示是开或关。

shop set size close

也可以在产品详情页控制尺寸开或关。

产品尺寸展示
可变产品
可变商品设置

1、可变商品在产品列表页可以快速购买,觉得可以关闭。毕竟买东西还是要进入详情页看一看比较好。
2、在产品列表页上显示可边颜色。 根据你的需求去设置吧。

可变商品属性设置

woodmart提供了参考效果,把鼠标移到问号即可查看,就不演示了。

产品标签的设置
产品标签sale和new设置
产品标签hot设置

Woodmart 可以设置商品标签类型有:促销的、 最新的、热门的。

product set sale

如果关闭Sale按钮,则显示Sale。开启Sale按钮并在产品价格设置原价和促销价,则页面上会自动统计百分比优惠。

product set hot

在后台产品列表页,点亮产品的星星表示为热门的。

product show tag

用户端展示的结果。最新的产品可以在后台设置最新的时间。

品牌的属性
品牌的属性设置

后台可以设置,在用户端品牌展示区域是否显示。还可以设定具体的位置。

快速预览
快速预览的设置

后台可以设置产品列表的“放大镜按钮”快速预览是否开启,以及具体的样式。

产品对比
后台设置产品是否对比和对比的属性

后台可以设置是否开启对比,以及对比哪些属性。

点击查看产品对比

将至少2个产品加入对比,然后点击右上角的对比按钮。

产品对比详情

可以查看到后台设定的,对比的3个属性。

愿望清单
后台设置愿望清单

后台可以设置打开或关闭愿望清单、所有用户或注册登录用户、是否支持批量删除。

用户查看愿望清单和批量删除

在我的账户,可以查看愿望清单以及是否可以多选删除。

WoodMart产品列表页

产品列表页设置
设置产品列表页

后台可以设置产品列表页的:Ajax加载方式,自动滚动到顶部、去掉面包屑、分类的样式

产品列表页展示
  • 点击左侧颜色的分类时,右侧产品展示区域会有短暂的loading,这个就是ajax加载数据
  • 还是点击左侧颜色的分类时,右侧产品展示区域会自动滚动到顶部区域
  • 后台如果关闭面包屑,则3会不显示
产品分类详情

在产品页显示产品分类的详情介绍。

产品网格
产品网格的后台设置

产品网格的风格设置比较简单。设置他的显示方式、分页数、行列数等。

产品网格的展示效果

根据你的喜好来设置不同的样式吧。

商店页面左侧区域小部件设置
产品过滤小部件

商品列表页的产品过滤:价格、分类、品牌等等的设置可以去后台进行设置。

产品过滤的后台设置

在后台 – 外观 – 小工具。 商店页面小部件区域可以找到对应的内容进行修改。

转载:感谢您对本站的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处 “来源wordpress建站 - 漾动网络”

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

wordpress建站广告宣传图

Get Your Free Demo Free Demo

Sign Up to Sitech