WooCommerce

一款为每个商店页面提供区块的 WooCommerce 主题

使用 WordPress 提供的编辑器和区块设计商品页面、商店网格、购物车和结账页面,然后从一个可直接运行的商店演示站点开始。WooCommerce 负责管理订单,Canvas 负责设计外观。

更新于

24
WooCommerce 区块
18
商店模板
21
可导入的商店演示站点
区块

24 个区块,覆盖四个负责销售的页面

WooCommerce 商店中顾客能看到的每个部分都是带设置面板的区块,因此您无需修改模板文件,即可移动、重新设计或移除它们。

产品页面11 个区块

通过逐个添加区块来构建单个商品布局,或从随附的模板中选择一个开始,再调整各个部分。

Product Images Included with any plan

显示 WooCommerce 商品的特色图片和可选的图库缩略图。

Product Gallery Linker Included with any plan

缩略图列表可让商品图库轮播滑动至您点击的图片。

Product Price Included with any plan

显示 WooCommerce 商品价格,包括促销价和货币格式。

Product Rating Included with any plan

显示当前 WooCommerce 商品的星级评分,以及可选的评价数量。

Product Meta 所有套餐均包含

显示商品元信息卡片:SKU、分类和标签。

商品简短描述 所有套餐均包含

显示商品简短描述,并完整保留其段落标记。

变体色板 所有套餐均包含

用于选择可变商品变体的颜色圆点或按钮式标签。

Add to Cart 所有套餐均包含

显示当前商品的 WooCommerce 加入购物车表单,可选包含数量输入框。

Product Tabs 所有套餐均包含

渲染 WooCommerce 产品数据选项卡:描述、附加信息和评价。

Product Share 包含在任意套餐中

显示“分享:”卡片,其中包含当前 WooCommerce 商品的社交分享链接。

Related Products Included with any plan

显示与当前商品相关的 WooCommerce 商品网格。仅在单个商品模板中显示。

商店及其商品目录 5 个区块

网格、轮播、分类卡片和价格筛选,每种都可从分类、标签、搜索结果或手动挑选的列表中获取内容。

商品 所有套餐均包含

以网格或列表布局显示 WooCommerce 商品。可按来源、分类、标签和排序方式进行筛选。

Product Categories Included with any plan

以响应式卡片网格展示 WooCommerce 商品分类,包含缩略图、名称和商品数量。

Product Carousel Included with any plan

以可滚动的 owl-carousel 轮播形式显示 WooCommerce 商品。支持自动播放、导航箭头、圆点指示器和响应式断点。

Store Price Filter Included with any plan

双滑块价格范围控件,可直接对商品网格进行筛选。

Conference Tickets Included with any plan

用于门票类商品分类的价格框,每个都带有数量选择框和实时加入购物车链接。

购物车 3 个区块

您可自行设计的购物车页面,并展示买家真正会看到的追加销售内容。

Cart Table 所有套餐均包含

显示 WooCommerce 购物车表格,包括商品行、数量和总计。

购物车合计 所有套餐均包含

显示 WooCommerce 购物车合计面板,包括小计、运费和结账按钮。

交叉销售 所有套餐均包含

显示当前 WooCommerce 购物车中的交叉销售商品。仅当购物车处于活动状态且包含交叉销售商品时才会渲染。

结账页面 3 个区块

账单信息表单、订单核对区域,以及告知买家刚刚发生了什么的提示通知。

Checkout Billing Included with any plan

显示 WooCommerce 结账账单地址表单。

Checkout Order Review Included with any plan

显示 WooCommerce 结账页订单核对摘要,包含商品明细与总计。

WooCommerce Notices 所有套餐均包含

显示 WooCommerce 通知:错误提示、成功消息或信息提示。

商店其他位置的 2 个区块

不属于上述四个界面的商店区块。

心愿单 所有套餐均包含

购物者收藏的商品,并显示价格、库存及加入购物车按钮。将其放在主题选项中为心愿单选定的页面上。

心愿单按钮 所有套餐均包含

将当前产品保存到顾客的愿望清单。可在产品模板和产品卡片中使用。

购物者所见的服装店演示站点首页,包含全屏幻灯片和页眉中的购物车

服装店

一个时尚服饰目录,包含系列页面、可变商品和能实时显示数量的页眉购物车。

电商主题
家具演示站点的首页,这是一个提供家具销售和租赁服务的 WooCommerce 商店

家具

销售与租赁商品集中在同一目录中,商品网格和单品页面均采用区块布局。

室内设计主题
葡萄酒演示站点的首页,分屏首屏,品鉴标题位于酒瓶照片旁边

葡萄酒

一家葡萄酒庄商店,设计以商品摄影为主角,店铺页面位于其后。

餐厅主题

取自 21 个电商演示站点中的三个。买家在这些页面上看到的每个部分,都是背后带有设置面板的区块。

全部 314 个 Canvas 区块

行为

买家无需刷新页面即可完成的操作

通常每项都需要一个插件才能实现的三项商店功能已包含在此集成中。

属性颜色色板

在后台为商品属性项设置颜色,可变商品便会以颜色圆点或按钮样式代替下拉菜单,让购物者一眼就能选择变体。

AJAX 加入购物车

从网格、轮播或卡片浮层中添加商品时,购物车会就地更新。顾客会停留在当前浏览的页面,页眉迷你购物车也会同步显示数量。

商品卡片样式

将每张商品图片固定为同一形状,使卡片对齐;选择额外的图库图片是在悬停时显示还是以幻灯片形式轮播;并选择悬停遮罩提供的内容:购买、快速查看或两者兼有。

模板

站点编辑器中的 18 个商店模板

每个商店界面都是一个区块模板,您可以在站点编辑器中打开、编辑和重置,方式与编辑其他区块模板相同。

单个商品布局

商品页面可采用默认布局、跟随图库滚动的吸顶摘要、列表布局、以色彩为主的设计、商店设计、两种自定义链接图库布局之一,或左侧边栏、右侧边栏、双侧边栏变体。

商店页面布局

将商店页面整体布局为全宽、左侧边栏、右侧边栏,或两侧均设侧边栏,让筛选器和分类按您的商品目录需求放置在合适位置。

归档、购物车与结账

商店归档页、产品分类归档页、购物车和结账页均以模板形式提供,同时主题还提供 WooCommerce 模板覆盖文件。

WordPress 站点编辑器,模板面板已打开,列出“所有模板”,旁边是 Canvas 和 woocommerce 模板组,以及在编辑画布中渲染的一个 Canvas 模板

商店模板在站点编辑器自身的模板面板中列于 woocommerce 下,与 Canvas 模板并列,并可在同一界面中重置。

可在编辑器中为每个商品指定布局,也可在主题选项中为整个商店设置默认布局。您在站点编辑器中自定义的模板在更新后仍保持自定义状态,更新后 Canvas 会告知您哪些模板发生了变化。

主题选项

39 项商店选项,5 个选项卡

为商品目录、商品页面、购物车和结账页面以及页眉迷你购物车设置全店默认值,并提供适用于接受询价商店的目录模式。每页商品数、分页、商品图片形状、额外图库图片和卡片遮罩层均在此设置,而单独设置其中某项的区块在其所在页面上仍然优先生效。

  • 商品目录:各屏幕尺寸下每行商品数量、图片形状、悬停效果、促销标签
  • 产品页面:单个产品页面所显示的内容,以及吸顶的加入购物车栏
  • 购物车与结账:免费配送进度条,以及简洁、不分散注意力的结账页面
  • 迷你购物车:顾客添加商品时,页眉购物车的行为
  • 目录模式:隐藏价格和购买按钮,显示咨询按钮

助力销售的商店选项 目录模式 愿望清单

Canvas 主题选项中的“商店”部分,显示产品目录设置,包括每页产品数、分页、产品图片形状、额外图片和卡片叠加层
主题选项、商店部分、目录选项卡。
性能

五个 WooCommerce 开关

WooCommerce 会在网站的每个页面加载脚本和样式表,包括那些不销售任何商品的页面。这五个开关可以取消这一行为,且每项设置都可以恢复。

  • 在不输出商店内容的页面上移除 WooCommerce JavaScript
  • 如果您不查看这些报告,请关闭订单归因跟踪
  • 停止在每次页面加载时轮询 cart fragments 脚本
  • 在账户和结账页面之外移除密码强度库
  • 在结账和账户页面以外停用内置的 Select2 库

全部 35 项性能优化

WooCommerce 标签页,位于 Canvas 性能选项中,显示五个开关,用于在不需要 WooCommerce 脚本的页面上移除这些脚本
主题选项,性能,WooCommerce 标签页。
演示商店

21 个演示站点均为可正常运行的 WooCommerce 商店

产品、分类、属性、购物车和结账页面已导入,可直接用于测试下单。在做决定前,您可以实时预览其中任何一个。

全部 88 个演示站点

导入到正在运营的商店

您的商店页面会被接管,而不是重复创建

导入店铺设计时最常见的担忧,是醒来后发现站点有两个结账页面。Canvas 会将演示站点的 WooCommerce 页面与您站点中已有的页面对应起来。

WordPress 后台中的 Canvas 演示站点导入界面,以卡片形式展示演示站点目录,每张卡片均配有导入按钮

每个商店演示站点都经由此导入界面载入,界面中还包含用于撤销导入的回滚功能。

一个商店、一个购物车、一次结账

导入器会识别您现有的 WooCommerce 页面,并将演示站点的菜单和链接直接指向这些页面。

可撤销

导入过程创建的所有内容都会被记录,因此只需一个屏幕即可删除演示内容,并恢复导入前已有的选项和菜单。

包含的产品

演示产品、分类、属性和色板颜色会随设计一同提供,因此在您替换为自己的内容时,产品目录仍能正常显示。

或仅需页面

选择按页面导入,即可只获取演示站点的页面,而不包含其主题选项、菜单和首页。

常见问题

使用 Canvas 开展销售

店主最常提出的问题。文档详细介绍了每个区块和选项。

我还需要安装 WooCommerce 插件吗?

是的,Canvas 在 WooCommerce 之上添加区块、模板和选项,但不会替代其中任何功能。订单、商品、税费、运费和付款仍保留在 WooCommerce 中,其他扩展所依赖的位置也保持不变。如果您从商店演示站点开始,设置向导会在导入运行前为您安装并激活 WooCommerce。

导入商店演示站点会替换我的商店页面和结账页面吗?

不会。Canvas 导入器会沿用网站已有的 WooCommerce 页面,因此不会再出现第二个商店、购物车、结账或账户页面。现有商品和订单保持不变。

我可以将这些与 WooCommerce 自带的区块混用吗?

是的,Canvas 商店区块是普通的已注册区块,因此它们可与 WooCommerce 区块和核心区块并存于同一模板和同一页面中,您可以逐个替换,无需整体采用某种布局。

颜色色板如何工作?

在 WordPress 后台为商品属性项设置颜色后,Canvas Variation Swatches 区块会将该属性以颜色圆点或按钮样式呈现,取代下拉菜单,适用于商品页面及使用该区块的模板。

我的套餐是否包含商店区块?

是的:全部 24 个 Canvas 商店区块都是高级区块,每款套餐都包含全部高级区块。没有商店附加组件,也没有电商专属等级。其他主题通常会将此类功能单独收费:快速查看是 Astra Pro 的功能,而 OceanWP 则将其 eCommerce Pro 插件作为独立产品出售。

专注打造商店,无需操心底层技术

每个套餐均包含全部 24 个商店区块、全部 18 个商店模板和全部 21 个演示商店。没有需要升级到的电商专属版本。