这是一篇 Astra Pro Theme(进阶版)的 WooCommerce 扩充功能教程。 可参考 Astra 主题入门视频教程。
Astra 是一款优质轻量级且多功能的 WordPress 主题,不论是新手或是有一定程度的 WordPress 玩家,使用它都是很棒的选择。
WooCommerce 则是 WordPress 领域中,最热门且功能完整的网络开店插件,就算没任何程序基础,也能自架购物网站。
本文的教程章节如下:
- 1. 开始前需准备?
- 2. 启用 Astra Pro 的 WooCommerce 功能
- 3. General 一般设定
- 4. 产品目录页
- 5. Single Product 单一商品页
- 6. Order 结帐页面
- 7. 如何加上商品搜寻条件?
- 8. 商品快速浏览功能
- Astra 进阶版方案,更多教程?
- WordPress 学习资源
准备好了吗? 我们开始吧:)
1. 开始前需准备?
开始学习 Astra Pro 的 WooCommerce 电商功能前,需购买 Astra Pro版、安装主题插件、凭证激活、WooCommerce 功能启用。
详细操作流程可参考 Astra 进阶教程,文章有手把手教程。
如果你正好奇,使用 Astra 这款轻量快速的多功能主题,能做出一些什么网站?
我在建立Blog、搭建形象网站、搭建购物网站,有做不同类型的网站示范,共通点就是都用Astra主题,应该会有效地帮助到你。
如果你有兴趣且购买了 Astra pro版方案,那将会得到更多定制网页的能力。
2. Astra 模板安装&启用 WooCommerce 功能
可以先套用 Astra Pro Theme 的内置电商样板(任一种都可以),方便接下来的教程。
前往 WordPress 插件 > 安装插件,搜索 Astra 找到下图的插件并安装。
安装完成后,前往此插件的设定项,会出现 Astra 模板安装流程,选择 Elementor 作为教程范例(可选你常用的)。
备注:Elementor 是热门的 WordPress 页面编辑器,详细可参考 页面编辑器推荐。
进入后会看到很多模板,分类改为eCommerce电商,就会出现电商专用的,然后选你喜欢的套用即可。
备注:右上角有 Agency 标签的,需 Astra 主题的 MINI AGENCY BUNDLE 方案以上,才能够使用。
模板安装后,前往 WordPress 外观 > Astra Options。
确认 WooCommerce 模块有开启(才能使用 Astra Pro 扩充功能)。
然后前往 WordPress 外观 > 自定义 > WooCommerce,点击里面项目会发现功能变多了,这是 Astra Pro 进行的功能强化。
下面章节,会对挑选一些项目做教程。
备注:要使用 Astra 的 WooCommerce 扩充功能,必须有安装 WooCommerce 插件 & 启动 Astra Pro 的 WooCommerce 模块。
3. General 一般设定
前往 WooCommerce > General,这里可做 WooCommerce 一般设定。
Sale Notification 选择是否开启促销提示,Sale Bubble Style 设定促销样式。
- Sale Notification:促销显示方式,有 None 不显示、Default 简单版、Custom String 百分比可选。
- Sale Bubble Style:促销样式,有Circle圆形、Square方形可选。
Header Cart Icon区块,可设计购物车Icon。
- Display Cart Totals:是否显示总价。
- Display Cart Title:是否显示购物车文字。
以上就是 General 一般设定的部分。
4. 产品目录页
前往 WooCommerce > 产品目录,可做商品列表页的设定,下面和大家分享。
- Shop Archive Content Width:可自订版面宽度。
- Shop Columns:商品字段数量,可对不同设备做设定(点电脑的 Icon)。
- Products Per Page:每页出现几个商品。
Shop Product Structure 有许多可显示 or 关闭的字段,像是分类、标题、评分、加入购物车按钮等(眼睛 Icon) .. ,也可拖放做排序。
Product Styling 可设定商品字段的显示样式。
- Box Shadow:商品周围的阴影效果。
- Box Hover Shadow:鼠标移至商品上的阴影效果。
- Product Image Hover Style:鼠标移至商品上的图片效果。
还可设定文字颜色、字体、大小、行高等 ..,丰富商品列表页面。
WooCommerce > 产品目录,还有许多功能可设定,这边仅有列举部分教程。
像是 Pagination 导航方式,有 Number 数字、Infinite Scroll 无限滚动(无分页)的方式可选。
还有 Quick View 快速商品浏览、Off Canvas Sidebar 搜索条件,这两个我会放在下面额外教程。
5. Single Product 单一商品页
前往 WooCommerce > Single Product,可进行单一商品页面的设定,下面和大家分享。
- Image Width:可调图片宽度。
- Single Product Structure:可开启或隐藏字段,像是标题、价位、描述等 ..,操作方式和之前提到的一样。
- Enable Ajax Add To Cart:动态加入购物车效果(不用刷新页面)。
- Enable Image Zoom Effect:商品放大镜效果。
单一商品页下方通常会加上相关商品、加购商品功能,这里可做字段数量&商品数的设定。
有关于字段数量,还可对不同装置设定数量。
除此之外,还可设定文字颜色、字体、大小、行高等 ..,丰富单一商品页面。
6. Order 结帐页面
前往 WooCommerce > 结帐,可设定结帐流程页面。
这里只挑选 Astra Pro Theme 的结账功能做说明,至于其他原生结账选项,可参考 WooCommerce 教程、WooCommerce 金物流。
- Two Step Checkout:两步骤结账,第一页是账单信息,第二页是付款信息。
- Display Apply Coupon Field:是否显示折价券应用。
- Distraction Free Checkout:设定无干扰结帐(会隐藏页首选单)。
- Persistent Checkout Form Data:顾客如果不小心重整理页面,会保留已填写的字段资料。
是否显示订单备注功能。
以上就是 Astra 的结帐页面,部分功能介绍:)
7. 如何加上商品搜寻条件?
Astra Pro 可自订义商品搜索条件,方便顾客找到喜欢的商品,对有多种商品的电商是特别有用。
Step1:开启商品搜寻条件功能
前往 WooCommerce > 产品目录,找到 Off Canvas Sidebar 区块,可做相关调整。
启用后在商品列表页,就会出现类似的按钮可点选。
- Trigger for Off Canvas Sidebar:是否开启商品搜寻条件,有 Link 链接、Button 按钮、Custom Class 客制化,这几种样式。
- Off Canvas Button/Link Text:文字显示。
Step2:设定侧边栏小工具
搜索条件开启后,前往 WordPress 小工具 > Off-Canvas Filters,就能设定商品条件搜寻的侧边栏功能。
进入后点 新增小工具,有许多好用的工具可添加,像是依价格范围搜寻、商品分类搜寻、商品属性搜寻等 ..。 完成后点 发布 即可。
最后来看一下相关的完成图,完成后大概长这样。
以上就是 Astra 商品条件搜索的功能,有需要的人可以参考:)
8. 商品快速浏览功能
Astra Pro 提供商品快速浏览功能,方便顾客尽快完成购物流程,如果有需要可开启使用。
前往 WooCommerce > 产品目录,找到 Quick View 快速浏览,选择喜欢的显示方式。
Stick Add to Cart Button 可在快速浏览窗口,添加加入至购物车按钮。
- Quick View:快速预览方式。 有 Disabled 不使用、On Image 在图片上、On Image Click 点击图片、After Summary 商品描述下方,这几种可选。
设定完成后,点击商品图片就会出现快速浏览窗口啰。
以上就是 Astra Pro Theme 的 WooCommerce 相关功能介绍。
Astra pro方案,更多教程?
有关于 Astra 进阶版,我写了多篇使用教程,方便你认识和上手 Astra 进阶功能,如下。
- Astra Pro: Astrapro版方案,强化功能详细教程,可参考 Astra pro教程。
- Astra Pro WooCommerce: WooCommerce 电商功能强化,可参考 Astra Pro WooCommerce 教程。
- WP Portfolio:制作网站作品集、展示页面、服务案例等 .. 专用插件,可参考 WP Portfolio 教程。
- Ultimate Addons for Elementor:在 Elementor 上新增 40+ 个元素功能、100+ 网站模板、200+ 区块模板,可参考 UAE 教程。
- Premium Starter Templates:有更多 Astra pro模板可使用,可参考 Premium Starter Templates 教程。
如果都看完,相信你对 Astra 主题的整体掌握度,大概也就如鱼得水了,加油.
原文链接:https://www.itaoda.cn/blog/10885.html,转载请注明出处。
评论0