# 一款为每个商店页面提供区块的 WooCommerce 主题 URL: https://canvaswp.com/zh-hans/woocommerce/ Updated: 2026-11-03 WooCommerce 使用 WordPress 提供的编辑器和区块设计商品页面、商店网格、购物车和结账页面，然后从一个可直接运行的商店演示站点开始。WooCommerce 负责管理订单，Canvas 负责设计外观。 更新于 2026年11月3日 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 个区块 不属于上述四个界面的商店区块。 #### 心愿单 所有套餐均包含 购物者收藏的商品，并显示价格、库存及加入购物车按钮。将其放在主题选项中为心愿单选定的页面上。 #### 心愿单按钮 所有套餐均包含 将当前产品保存到顾客的愿望清单。可在产品模板和产品卡片中使用。 ### 服装店 一个时尚服饰目录，包含系列页面、可变商品和能实时显示数量的页眉购物车。 [电商主题](https://canvaswp.com/zh-hans/wordpress-themes/ecommerce/) ### 家具 销售与租赁商品集中在同一目录中，商品网格和单品页面均采用区块布局。 [室内设计主题](https://canvaswp.com/zh-hans/wordpress-themes/interior-design/) ### 葡萄酒 一家葡萄酒庄商店，设计以商品摄影为主角，店铺页面位于其后。 [餐厅主题](https://canvaswp.com/zh-hans/wordpress-themes/restaurant/) 取自 21 个电商演示站点中的三个。买家在这些页面上看到的每个部分，都是背后带有设置面板的区块。 [全部 314 个 Canvas 区块](https://canvaswp.com/zh-hans/blocks/) 行为 ## 买家无需刷新页面即可完成的操作 通常每项都需要一个插件才能实现的三项商店功能已包含在此集成中。 ### 属性颜色色板 在后台为商品属性项设置颜色，可变商品便会以颜色圆点或按钮样式代替下拉菜单，让购物者一眼就能选择变体。 ### AJAX 加入购物车 从网格、轮播或卡片浮层中添加商品时，购物车会就地更新。顾客会停留在当前浏览的页面，页眉迷你购物车也会同步显示数量。 ### 商品卡片样式 将每张商品图片固定为同一形状，使卡片对齐；选择额外的图库图片是在悬停时显示还是以幻灯片形式轮播；并选择悬停遮罩提供的内容：购买、快速查看或两者兼有。 模板 ## 站点编辑器中的 18 个商店模板 每个商店界面都是一个区块模板，您可以在站点编辑器中打开、编辑和重置，方式与编辑其他区块模板相同。 ### 单个商品布局 商品页面可采用默认布局、跟随图库滚动的吸顶摘要、列表布局、以色彩为主的设计、商店设计、两种自定义链接图库布局之一，或左侧边栏、右侧边栏、双侧边栏变体。 ### 商店页面布局 将商店页面整体布局为全宽、左侧边栏、右侧边栏，或两侧均设侧边栏，让筛选器和分类按您的商品目录需求放置在合适位置。 ### 归档、购物车与结账 商店归档页、产品分类归档页、购物车和结账页均以模板形式提供，同时主题还提供 WooCommerce 模板覆盖文件。 商店模板在站点编辑器自身的模板面板中列于 woocommerce 下，与 Canvas 模板并列，并可在同一界面中重置。 可在编辑器中为每个商品指定布局，也可在主题选项中为整个商店设置默认布局。您在站点编辑器中自定义的模板在更新后仍保持自定义状态，更新后 Canvas 会告知您哪些模板发生了变化。 主题选项 ## 39 项商店选项，5 个选项卡 为商品目录、商品页面、购物车和结账页面以及页眉迷你购物车设置全店默认值，并提供适用于接受询价商店的目录模式。每页商品数、分页、商品图片形状、额外图库图片和卡片遮罩层均在此设置，而单独设置其中某项的区块在其所在页面上仍然优先生效。 - 商品目录：各屏幕尺寸下每行商品数量、图片形状、悬停效果、促销标签 - 产品页面：单个产品页面所显示的内容，以及吸顶的加入购物车栏 - 购物车与结账：免费配送进度条，以及简洁、不分散注意力的结账页面 - 迷你购物车：顾客添加商品时，页眉购物车的行为 - 目录模式：隐藏价格和购买按钮，显示咨询按钮 [助力销售的商店选项](https://docs.canvaswp.com/store-options-that-help-you-sell) [目录模式](https://docs.canvaswp.com/catalog-mode) [愿望清单](https://docs.canvaswp.com/the-wishlist) 主题选项、商店部分、目录选项卡。 性能 ## 五个 WooCommerce 开关 WooCommerce 会在网站的每个页面加载脚本和样式表，包括那些不销售任何商品的页面。这五个开关可以取消这一行为，且每项设置都可以恢复。 - 在不输出商店内容的页面上移除 WooCommerce JavaScript - 如果您不查看这些报告，请关闭订单归因跟踪 - 停止在每次页面加载时轮询 cart fragments 脚本 - 在账户和结账页面之外移除密码强度库 - 在结账和账户页面以外停用内置的 Select2 库 [全部 35 项性能优化](https://canvaswp.com/zh-hans/performance/) 主题选项，性能，WooCommerce 标签页。 演示商店 ## 21 个演示站点均为可正常运行的 WooCommerce 商店 产品、分类、属性、购物车和结账页面已导入，可直接用于测试下单。在做决定前，您可以实时预览其中任何一个。 ### [Bag Store 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/ecommerce/) 商店与电商 · 9 个页面 · [安装内容：Bag Store 演示站点的区块与内容类型](https://docs.canvaswp.com/design-ecommerce) ### [Barber Shop 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/barber/) 美容与水疗 · 7 页 · [安装内容：Barber Shop 演示站点的区块和内容类型](https://docs.canvaswp.com/design-barber) ### [CanvasRoam 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/youtube-creator/) 作品集与个人 · 10 个页面 · [安装内容：CanvasRoam 演示站点的区块与内容类型](https://docs.canvaswp.com/design-youtube-creator) ### [Christmas Store 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/xmas/) 商店与电商 · 6 个页面 ### [Clothing Store 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/store/) 商店与电商 · 19 个页面 · [安装内容：Clothing Store 演示站点的区块与内容类型](https://docs.canvaswp.com/design-store) ### [Conference 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/conference/) 活动与婚礼 · 25 个页面 · [安装内容：Conference 演示的区块和内容类型](https://docs.canvaswp.com/design-conference) ### [Drone 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/drone/) 商店与电商 · 12 个页面 ### [eBook 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/ebook/) 商店与电商 · 9 个页面 ### [Fashion Shop 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/shop/) 商店与电商 · 25 个页面 ### [Fashion Store 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/fashion-store/) 商店与电商 · 16 个页面 ### [FORM 2026 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/event-conference/) 活动与婚礼 · 14 个页面 · [安装内容：FORM 2026 演示的区块和内容类型](https://docs.canvaswp.com/design-event-conference) ### [Furniture 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/furniture/) 商店与电商 · 12 个页面 ### [Game of Canvas 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/gaming/) 娱乐与社区 · 12 个页面 · [安装内容：Game of Canvas 演示站点的区块与内容类型](https://docs.canvaswp.com/design-gaming) ### [Illustrator 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/illustrator/) 作品集与个人 · 7 个页面 · [安装内容：Illustrator 演示站点的区块与内容类型](https://docs.canvaswp.com/design-illustrator) ### [Jewelry Boutique 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/jewellery-boutique/) 商店与电商 · 17 个页面 ### [Podcasts 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/podcasts/) 博客与杂志 · 13 个页面 · [安装内容：Podcasts 演示站点的区块和内容类型](https://docs.canvaswp.com/design-podcasts) ### [Pottery Shop 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/shop-2/) 商店与电商 · 12 个页面 ### [Speaker Store 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/speaker/) 商店与电商 · 11 个页面 ### [Supplement Store 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/supplements/) 商店与电商 · 13 个页面 ### [Wildroot Gear 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/gear/) 商店与电商 · 14 个页面 · [安装内容：Wildroot Gear 演示站点的区块与内容类型](https://docs.canvaswp.com/design-gear) ### [Wine Estate 演示站点，实时预览（在新标签页中打开）](https://demos.canvaswp.com/wine/) 餐饮 · 10 个页面 · [安装内容：Wine Estate 演示站点的区块和内容类型](https://docs.canvaswp.com/design-wine) [全部 88 个演示站点](https://canvaswp.com/zh-hans/demos/) 导入到正在运营的商店 ## 您的商店页面会被接管，而不是重复创建 导入店铺设计时最常见的担忧，是醒来后发现站点有两个结账页面。Canvas 会将演示站点的 WooCommerce 页面与您站点中已有的页面对应起来。 每个商店演示站点都经由此导入界面载入，界面中还包含用于撤销导入的回滚功能。 ### 一个商店、一个购物车、一次结账 导入器会识别您现有的 WooCommerce 页面，并将演示站点的菜单和链接直接指向这些页面。 ### 可撤销 导入过程创建的所有内容都会被记录，因此只需一个屏幕即可删除演示内容，并恢复导入前已有的选项和菜单。 ### 包含的产品 演示产品、分类、属性和色板颜色会随设计一同提供，因此在您替换为自己的内容时，产品目录仍能正常显示。 ### 或仅需页面 选择按页面导入，即可只获取演示站点的页面，而不包含其主题选项、菜单和首页。 常见问题 ## 使用 Canvas 开展销售 店主最常提出的问题。[文档](https://docs.canvaswp.com/setting-up-your-shop)详细介绍了每个区块和选项。 **我还需要安装 WooCommerce 插件吗？** 是的，Canvas 在 WooCommerce 之上添加区块、模板和选项，但不会替代其中任何功能。订单、商品、税费、运费和付款仍保留在 WooCommerce 中，其他扩展所依赖的位置也保持不变。如果您从商店演示站点开始，设置向导会在导入运行前为您安装并激活 WooCommerce。 **导入商店演示站点会替换我的商店页面和结账页面吗？** 不会。Canvas 导入器会沿用网站已有的 WooCommerce 页面，因此不会再出现第二个商店、购物车、结账或账户页面。现有商品和订单保持不变。 **我可以将这些与 WooCommerce 自带的区块混用吗？** 是的，Canvas 商店区块是普通的已注册区块，因此它们可与 WooCommerce 区块和核心区块并存于同一模板和同一页面中，您可以逐个替换，无需整体采用某种布局。 **颜色色板如何工作？** 在 WordPress 后台为商品属性项设置颜色后，Canvas Variation Swatches 区块会将该属性以颜色圆点或按钮样式呈现，取代下拉菜单，适用于商品页面及使用该区块的模板。 **我的套餐是否包含商店区块？** 是的：全部 24 个 Canvas 商店区块都是高级区块，每款套餐都包含全部高级区块。没有商店附加组件，也没有电商专属等级。其他主题通常会将此类功能单独收费：快速查看是 [Astra Pro 的功能](https://canvaswp.com/zh-hans/compare/astra/)，而 OceanWP 则将其 [eCommerce Pro 插件](https://canvaswp.com/zh-hans/compare/oceanwp/)作为独立产品出售。