Woo blocks 主题定制

---

注意： 我们假设您已经具备一些关于区块主题开发的知识以及一些 WordPress 的概念。 如果您是完全不了解区块主题开发的新手，请查看 Develop Your First Low-Code Block Theme 以了解区块主题开发，并在准备创建新主题时，探索 Create Block Theme plugin 工具。

---

常用概念

区块模板

WooCommerce 默认提供以下几个 区块模板：

• 单个产品 (single-product.html)
• 产品目录 (archive-product.html)
  • 按分类的产品 (taxonomy-product_cat.html)
  • 按标签的产品 (taxonomy-product_tag.html)
  • 按属性的产品 (taxonomy-product_attribute.html)
• 产品搜索结果 (product-search-results.html)
• 网页: 即将推出 (page-coming-soon.html)
• 网页: 购物车 (page-cart.html)
• 网页: 结账 (page-checkout.html)
• 订单确认 (order-confirmation.html)

区块主题可以通过以下方式自定义这些模板：

• 可以通过在 /templates 文件夹下创建一个同名文件来覆盖模板。 例如，如果区块主题包含 wp-content/themes/yourtheme/templates/single-product.html 模板，它将优先于 WooCommerce 默认的单个产品模板。
• 按分类、按标签和按属性的产品模板会回退到产品目录模板。 换句话说，如果主题提供 archive-product.html 模板，但没有提供 taxonomy-product_cat.html 模板，则按分类的产品模板将使用 archive-product.html 模板。 同样适用于按标签和按属性的产品模板。
• 也可以为特定产品和分类法创建模板。 例如，如果主题提供一个文件名 single-product-cap.html 的模板，则该模板将用于渲染别名为 cap 的产品。 类似地，主题可以提供特定的分类法模板：taxonomy-product_cat-clothing.html 将用于别名为 clothing 的产品分类。
• 请始终记住，用户可以通过站点编辑器修改主题提供的模板。

区块模板部件

WooCommerce 还提供两个特定的 区块模板部件：

• 迷你购物车 (mini-cart.html)：用于迷你购物车区块抽屉。
• 结账头部 (checkout-header.html)：用作结账模板的头部。

与模板类似，主题可以通过在 /parts 文件夹下添加一个同名文件来覆盖这些部件。

全局样式

WooCommerce 块依赖于 全局样式 来进行样式设置。全局样式可以通过主题的 theme.json 文件或用户通过“外观 > 编辑器 > 样式”来定义，相比于纯 CSS，它具有以下优势：

• 更好的性能，因为只有所需的 CSS 才会输出到页面，从而减少渲染页面的文件大小。
• 用户可以通过界面轻松自定义。
• 优雅地处理插件和主题之间的冲突。
• 不受单个块或组件中的标记或类名更新的影响。
• 不依赖于块的特定嵌套顺序：用户可以自由地移动块，而不会导致样式中断。

示例

例如，假设您正在构建一个主题，并且希望自定义“产品价格”块的样式，您可以这样做，通过在您的 theme.json 文件中添加以下属性：

"styles": {
	"blocks": {
		"woocommerce/product-price": {
			"color": {
				"background": "#00cc00",
				"text": "#fff"
			},
			"typography": {
				"fontStyle": "italic",
				"fontWeight": "700"
			}
		}
		...
	}
	...
}

之前	之后

您可以在 developer.wordpress.org 上找到更多关于 全局样式 的 文档。您还可以找到 WooCommerce 块及其名称的列表。