这是一篇 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