跳到主要内容

Blocks 参考

本页面列出了该包中包含的 Woo 组件。 (由于仍有一些组件尚未采用 block.json 定义，因此此列表可能不完整)。

产品平均评分 (Beta) - woocommerce/product-average-rating​

显示产品的平均评分。

  • Name: woocommerce/product-average-rating
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/single-product
  • Parent:
  • Supports: color (背景, 文本), interactivity (clientNavigation), spacing (间距, padding), typography (fontSize)
  • Attributes: textAlign

加入购物车 按钮 - woocommerce/product-button​

显示一个行动按钮，该按钮可以将产品添加到购物车，或者链接到产品页面。

  • Name: woocommerce/product-button
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/all-products, woocommerce/single-product, core/post-template, woocommerce/product-template
  • Parent:
  • Supports: align (full, wide), color (背景, 文本, 链接), email, interactivity, spacing (间距, padding), typography (fontSize, lineHeight), html
  • Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, productId, textAlign, width

产品 图像 - woocommerce/product-image​

显示主要的产品图像。

  • Name: woocommerce/product-image
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
  • Parent:
  • Supports: dimensions (aspectRatio), email, interactivity (clientNavigation), spacing (间距, padding), typography (fontSize), html
  • Attributes: aspectRatio, height, imageSizing, isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, productId, saleBadgeAlign, scale, showProductLink, showSaleBadge, width

产品价格 - woocommerce/product-price​

显示产品的价格。

  • Name: woocommerce/product-price
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/all-products, woocommerce/featured-product, woocommerce/single-product, woocommerce/product-template, core/post-template
  • Parent:
  • Supports: color (背景, 文本, 链接), email, interactivity, spacing (间距, padding), typography (fontSize, lineHeight), html
  • Attributes: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

产品 图像 库 - woocommerce/product-image-gallery​

显示产品的图像。

  • Name: woocommerce/product-image-gallery
  • Category: woocommerce-product-elements
  • Ancestor:
  • Parent:
  • Supports: align, interactivity (clientNavigation), multiple
  • Attributes:

产品元数据 - woocommerce/product-meta​

显示产品的 SKU、分类、标签等信息。

  • 名称: woocommerce/product-meta
  • 分类: woocommerce-product-elements
  • 父级:
  • 祖先:
  • 支持: 对齐, 交互 (clientNavigation), 可复用
  • 属性:

产品评分 - woocommerce/product-rating​

显示产品的平均评分。

  • 名称: woocommerce/product-rating
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
  • 祖先:
  • 支持: 颜色 (文本, 背景, 链接), 交互 (clientNavigation), 间距 (外边距, 内边距), 排版 (字体大小)
  • 属性: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

产品评分计数器 - woocommerce/product-rating-counter​

显示产品的评论数量。

  • 名称: woocommerce/product-rating-counter
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/single-product
  • 祖先:
  • 支持: 颜色 (链接, 背景, 文本), 交互 (clientNavigation), 间距 (外边距, 内边距), 排版 (字体大小), 插入器
  • 属性: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

产品评分星级 - woocommerce/product-rating-stars​

使用星级显示产品的平均评分。

  • 名称: woocommerce/product-rating-stars
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/single-product
  • 祖先:
  • 支持: 颜色 (文本, 背景, 链接), 交互 (clientNavigation), 间距 (外边距, 内边距), 排版 (字体大小), 插入器
  • 属性: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId, textAlign

相关产品 - woocommerce/related-products​

显示相关产品。

  • 名称: woocommerce/related-products
  • 分类: woocommerce
  • 父级:
  • 祖先:
  • 支持: 对齐, 交互 (clientNavigation), 插入器, 可复用
  • 属性:

促销徽章 - woocommerce/product-sale-badge​

如果产品正在促销，则显示促销徽章。

  • 名称: woocommerce/product-sale-badge
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/single-product, woocommerce/product-template, core/post-template, woocommerce/product-gallery
  • 祖先:
  • 支持: 对齐, 颜色 (背景, 渐变, 文本, 链接), 邮件, 交互 (clientNavigation), 间距 (外边距), 排版 (字体大小, 行高), HTML
  • 属性: isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, productId

产品 SKU - woocommerce/product-sku​

显示产品的 SKU。

  • 名称: woocommerce/product-sku
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/product-meta, woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
  • 父类:
  • 支持: 颜色 (背景, 文本), 交互 (clientNavigation), 间距 (margin, padding), 排版 (fontSize, lineHeight), html
  • 属性: isDescendantOfAllProducts, prefix, productId, showProductSelector, suffix

产品库存指示器 - woocommerce/product-stock-indicator​

告知顾客产品是否缺货或处于延期交货状态。 当产品有库存时，此块将被隐藏。

  • 名称: woocommerce/product-stock-indicator
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/all-products, woocommerce/single-product, woocommerce/product-template, core/post-template
  • 父类:
  • 支持: 颜色 (背景, 文本), 交互, 间距 (margin, padding), 排版 (fontSize, lineHeight), html
  • 属性: isDescendantOfAllProducts

产品摘要 - woocommerce/product-summary​

显示关于产品的简短描述。

  • 名称: woocommerce/product-summary
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/all-products, woocommerce/featured-product, woocommerce/single-product, woocommerce/product-template, core/post-template
  • 父类:
  • 支持: 颜色 (背景, 链接, 文本), 交互 (clientNavigation), 间距 (margin, padding), 排版 (fontSize, lineHeight, textAlign)
  • 属性: isDescendantOfAllProducts, isDescendentOfQueryLoop, isDescendentOfSingleProductBlock, isDescendentOfSingleProductTemplate, linkText, productId, showDescriptionIfEmpty, showLink, summaryLength

产品标题 - woocommerce/product-title​

显示产品的标题。

  • 名称: woocommerce/product-title
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/all-products
  • 父类:
  • 支持: 颜色 (背景, 渐变, 文本, 链接), 交互 (clientNavigation), 间距 (margin), 排版 (fontSize, lineHeight), html
  • 属性: align, headingLevel, linkTarget, productId, showProductLink

折叠组 - woocommerce/accordion-group​

一组标题和相关的可展开内容。

  • 名称: woocommerce/accordion-group
  • 分类: woocommerce
  • 父级:
  • 父类:
  • 支持: 对齐 (full, wide), 背景 (backgroundImage, backgroundSize), 颜色 (背景, 渐变, 文本), 交互, 布局, 阴影, 间距 (blockGap, margin, padding), html
  • 属性: allowedBlocks, autoclose, iconPosition

折叠标题 - woocommerce/accordion-header​

折叠标题。

  • Name: woocommerce/accordion-header
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/accordion-item
  • Supports: anchor, border, color (background, gradient, text), interactivity, layout, shadow, spacing (margin, padding), typography (fontSize, textAlign), align
  • Attributes: icon, iconPosition, level, levelOptions, openByDefault, textAlignment, title

折叠 - woocommerce/accordion-item​

一个单独的折叠组件，用于显示标题和可展开的内容。

  • Name: woocommerce/accordion-item
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/accordion-group
  • Supports: align (full, wide), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin)
  • Attributes: openByDefault

折叠面板 - woocommerce/accordion-panel​

折叠面板

  • Name: woocommerce/accordion-panel
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/accordion-item
  • Supports: border, color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
  • Attributes: allowedBlocks, isSelected, openByDefault, templateLock

激活过滤器控件 - woocommerce/active-filters​

显示当前激活的过滤器。

  • Name: woocommerce/active-filters
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: color (text, background), interactivity (clientNavigation), html, inserter, lock, multiple
  • Attributes: displayStyle, headingLevel

加入购物车 + 选项 (Beta) - woocommerce/add-to-cart-with-options​

使用块来创建“加入购物车”区域，该区域针对不同类型的产品进行定制，例如可变产品和分组产品。

  • Name: woocommerce/add-to-cart-with-options
  • Category: woocommerce-product-elements
  • Ancestor:
  • Parent:
  • Supports: interactivity
  • Attributes: isDescendantOfAddToCartWithOptions

分组产品选择器 (Beta) - woocommerce/add-to-cart-with-options-grouped-product-selector​

显示一组可以添加到购物车的的产品。

  • Name: woocommerce/add-to-cart-with-options-grouped-product-selector
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/add-to-cart-with-options
  • Parent:
  • Supports: interactivity
  • Attributes:

分组产品：模板 (Beta) - woocommerce/add-to-cart-with-options-grouped-product-item​

一个列表项目模板，代表分组产品选择器块中的子产品。

  • Name: woocommerce/add-to-cart-with-options-grouped-product-item
  • Category: woocommerce-product-elements
  • Ancestor: woocommerce/add-to-cart-with-options-grouped-product-selector
  • Parent:
  • Supports: interactivity, inserter
  • Attributes:

分组产品：项目标签 (Beta) - woocommerce/add-to-cart-with-options-grouped-product-item-label​

以标签或段落的形式显示产品标题。

  • 名称: woocommerce/add-to-cart-with-options-grouped-product-item-label
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/add-to-cart-with-options-grouped-product-item
  • 父类:
  • 支持: color (background, gradients, text), layout (selfStretch), spacing (blockGap, margin, padding), typography (fontSize, lineHeight, textAlign), html
  • 属性:

分组产品：项目选择器 (Beta) - woocommerce/add-to-cart-with-options-grouped-product-item-selector​

添加一种在分组产品块中选择子产品的机制。根据产品的类型及其属性，这可能是一个按钮、复选框或链接。

  • 名称: woocommerce/add-to-cart-with-options-grouped-product-item-selector
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/add-to-cart-with-options-grouped-product-item
  • 父类:
  • 支持: interactivity, inserter
  • 属性:

产品数量 (Beta) - woocommerce/add-to-cart-with-options-quantity-selector​

显示一个输入字段，客户可以使用该字段选择要添加到购物车的产品的数量。

  • 名称: woocommerce/add-to-cart-with-options-quantity-selector
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/add-to-cart-with-options
  • 父类:
  • 支持: interactivity
  • 属性:

变体描述 (Beta) - woocommerce/add-to-cart-with-options-variation-description​

显示所选变体的描述。

  • 名称: woocommerce/add-to-cart-with-options-variation-description
  • 分类: woocommerce
  • 父级: woocommerce/add-to-cart-with-options
  • 父类:
  • 支持: color (background, gradients, link, text), dimensions (minHeight), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), html
  • 属性:

变体选择器：模板 (Beta) - woocommerce/add-to-cart-with-options-variation-selector-attribute​

一个用于属性名称和选项的模板，该模板将应用于所有具有属性的可变产品。

  • 名称: woocommerce/add-to-cart-with-options-variation-selector-attribute
  • 分类: woocommerce-product-elements
  • 父级: woocommerce/add-to-cart-with-options-variation-selector
  • 父类:
  • 支持: interactivity, inserter
  • 属性:

可变产品属性选择器：属性名称 (Beta) - woocommerce/add-to-cart-with-options-variation-selector-attribute-name​

格式化与可变产品关联的属性名称。

  • 名称: woocommerce/add-to-cart-with-options-variation-selector-attribute-name
  • 分类: woocommerce-product-elements
  • 父元素: woocommerce/add-to-cart-with-options-variation-selector-attribute
  • 父级:
  • 支持: color (背景, 渐变, 文本), 交互性, 间距 (内边距), 排版 (fontSize, lineHeight), alignWide, align, inserter
  • 属性:

可变产品属性选择器：属性选项 (Beta) - woocommerce/add-to-cart-with-options-variation-selector-attribute-options​

显示与可变产品关联的属性选项。

  • 名称: woocommerce/add-to-cart-with-options-variation-selector-attribute-options
  • 分类: woocommerce-product-elements
  • 父元素: woocommerce/add-to-cart-with-options-variation-selector-attribute
  • 父级:
  • 支持: 交互性, inserter
  • 属性: optionStyle

可变产品属性选择器 (Beta) - woocommerce/add-to-cart-with-options-variation-selector​

显示可供选择的产品变体，并允许用户加入购物车。

  • 名称: woocommerce/add-to-cart-with-options-variation-selector
  • 分类: woocommerce-product-elements
  • 父元素: woocommerce/add-to-cart-with-options
  • 父级:
  • 支持: 交互性
  • 属性:

属性筛选控件 - woocommerce/attribute-filter​

允许客户通过选择一个或多个属性（例如颜色）来筛选产品列表。

  • 名称: woocommerce/attribute-filter
  • 分类: woocommerce
  • 父元素:
  • 父级:
  • 支持: color (文本, 背景), html, inserter, interactivity, lock
  • 属性: attributeId, className, displayStyle, headingLevel, isPreview, queryType, selectType, showCounts, showFilterButton

商店面包屑 - woocommerce/breadcrumbs​

帮助客户跟踪他们在商店中的位置，并返回到父级网页。

  • 名称: woocommerce/breadcrumbs
  • 分类: woocommerce
  • 父元素:
  • 父级:
  • 支持: align (full, wide), color (链接, 文本, 背景), 交互性 (clientNavigation), 排版 (fontSize, lineHeight), html
  • 属性: align, contentJustification, fontSize

已接受的付款方式 - woocommerce/cart-accepted-payment-methods-block​

显示已接受的付款方式。

  • 名称: woocommerce/cart-accepted-payment-methods-block
  • 分类: woocommerce
  • 父元素:
  • 父级: woocommerce/cart-totals-block
  • 支持: inserter, align, html, multiple, reusable
  • 属性:

购物车交叉销售 - woocommerce/cart-cross-sells-block​

显示交叉销售模块。

  • Name: woocommerce/cart-cross-sells-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-items-block
  • Supports: align, html, inserter, multiple, reusable
  • Attributes:

购物车交叉销售产品 - woocommerce/cart-cross-sells-products-block​

显示交叉销售产品。

  • Name: woocommerce/cart-cross-sells-products-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-cross-sells-block
  • Supports: email, align, html, inserter, lock, multiple, reusable
  • Attributes: columns, lock

快速结账 - woocommerce/cart-express-payment-block​

允许客户通过快速支付选项轻松完成购物。

  • Name: woocommerce/cart-express-payment-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-totals-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: buttonBorderRadius, buttonHeight, lock, showButtonStyles

购物车商品 - woocommerce/cart-items-block​

包含购物车商品的列。

  • Name: woocommerce/cart-items-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/filled-cart-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

购物车商品明细 - woocommerce/cart-line-items-block​

包含购物车当前商品明细的模块。

  • Name: woocommerce/cart-line-items-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-items-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

订单摘要 - woocommerce/cart-order-summary-block​

向客户显示其订单的摘要。

  • Name: woocommerce/cart-order-summary-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-totals-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

优惠券表单 - woocommerce/cart-order-summary-coupon-form-block​

显示应用优惠券的表单。

  • Name: woocommerce/cart-order-summary-coupon-form-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-order-summary-block
  • Supports: align, html, multiple, reusable
  • Attributes: className, lock

折扣 - woocommerce/cart-order-summary-discount-block​

显示购物车折扣行。

  • Name: woocommerce/cart-order-summary-discount-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-order-summary-totals-block
  • Supports: align, html, lock, multiple, reusable
  • Attributes: className, lock

Fees - woocommerce/cart-order-summary-fee-block​

显示购物车费用行。

  • Name: woocommerce/cart-order-summary-fee-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-order-summary-totals-block
  • Supports: align, html, lock, multiple, reusable
  • 属性: className, lock

Heading - woocommerce/cart-order-summary-heading-block​

显示标题行。

  • Name: woocommerce/cart-order-summary-heading-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-order-summary-block
  • Supports: align, html, multiple, reusable
  • 属性: className, content, lock

Shipping - woocommerce/cart-order-summary-shipping-block​

显示购物车配送行。

  • Name: woocommerce/cart-order-summary-shipping-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-order-summary-totals-block
  • Supports: align, html, lock, multiple, reusable
  • 属性: lock

Subtotal - woocommerce/cart-order-summary-subtotal-block​

显示购物车小计行。

  • Name: woocommerce/cart-order-summary-subtotal-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-order-summary-totals-block
  • Supports: align, html, lock, multiple, reusable
  • 属性: className, lock

Taxes - woocommerce/cart-order-summary-taxes-block​

显示购物车税费行。

  • Name: woocommerce/cart-order-summary-taxes-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-order-summary-totals-block
  • Supports: align, html, lock, multiple, reusable
  • 属性: className, lock

Totals - woocommerce/cart-order-summary-totals-block​

显示小计、费用、折扣、配送和税费。

  • Name: woocommerce/cart-order-summary-totals-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-order-summary-block
  • Supports: align, html, lock, multiple, reusable
  • 属性: className, lock

Cart Totals - woocommerce/cart-totals-block​

包含购物车总计的列。

  • Name: woocommerce/cart-totals-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/filled-cart-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • 属性: checkbox, lock, text

Empty Cart - woocommerce/empty-cart-block​

包含在购物车为空时显示的块。

  • Name: woocommerce/empty-cart-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart
  • Supports: align (wide), html, inserter, lock, multiple, reusable
  • 属性: lock

购物车内容 - woocommerce/filled-cart-block​

包含在购物车包含产品时显示的模块。

  • Name: woocommerce/filled-cart-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart
  • Supports: align (wide), html, inserter, lock, multiple, reusable
  • Attributes: lock

继续结账 - woocommerce/proceed-to-checkout-block​

允许客户继续结账。

  • Name: woocommerce/proceed-to-checkout-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/cart-totals-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

购物车链接 - woocommerce/cart-link​

显示链接至购物车的链接。

  • Name: woocommerce/cart-link
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: color (background, link, text), interactivity (clientNavigation), spacing (padding), typography (fontSize), html, multiple
  • Attributes: cartIcon, content, isPreview

产品分类排序 - woocommerce/catalog-sorting​

允许客户更改产品的排序顺序。

  • Name: woocommerce/catalog-sorting
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: color (text, background), interactivity (clientNavigation), typography (fontSize)
  • Attributes: fontSize, useLabel

产品分类描述 - woocommerce/category-description​

显示当前的分类描述。

  • Name: woocommerce/category-description
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: color (background, text), spacing (margin, padding), typography, align, html
  • Attributes: textAlign

产品分类标题 - woocommerce/category-title​

显示当前的分类标题，并允许授权用户编辑它。

  • Name: woocommerce/category-title
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: color (background, text), spacing (margin, padding), typography, align, html
  • Attributes: isLink, level, linkTarget, rel, textAlign

结账 - woocommerce/checkout​

显示结账表单，以便您的客户可以提交订单。

  • Name: woocommerce/checkout
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (wide), html, multiple
  • Attributes: align, isPreview, showFormStepNumbers

操作 - woocommerce/checkout-actions-block​

允许客户提交他们的订单。

  • Name: woocommerce/checkout-actions-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: cartPageId, className, lock, priceSeparator, showReturnToCart

其他信息 - woocommerce/checkout-additional-information-block​

在 '其他信息' 的位置渲染附加字段。

  • Name: woocommerce/checkout-additional-information-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, multiple, reusable
  • 属性: className, lock

账单地址 - woocommerce/checkout-billing-address-block​

收集客户的账单地址。

  • Name: woocommerce/checkout-billing-address-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • 属性: lock

联系信息 - woocommerce/checkout-contact-information-block​

收集客户的联系信息。

  • Name: woocommerce/checkout-contact-information-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • 属性: lock

快捷结账 - woocommerce/checkout-express-payment-block​

允许客户通过快速支付选项简化结账流程。

  • Name: woocommerce/checkout-express-payment-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • 属性: buttonBorderRadius, buttonHeight, className, lock, showButtonStyles

结账字段 - woocommerce/checkout-fields-block​

包含结账地址字段的列。

  • Name: woocommerce/checkout-fields-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout
  • Supports: align, html, inserter, lock, multiple, reusable
  • 属性: className, lock

订单备注 - woocommerce/checkout-order-note-block​

允许客户向他们的订单添加备注。

  • Name: woocommerce/checkout-order-note-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, multiple, reusable
  • 属性: className, lock

订单摘要 - woocommerce/checkout-order-summary-block​

向客户展示他们订单的摘要。

  • Name: woocommerce/checkout-order-summary-block
  • 分类: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-totals-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • 属性: lock

购物车项目 - woocommerce/checkout-order-summary-cart-items-block​

显示购物车项目。

  • 名称: woocommerce/checkout-order-summary-cart-items-block
  • 分类: woocommerce
  • 父级:
  • 父类: woocommerce/checkout-order-summary-block
  • 支持: align, html, lock, multiple, reusable
  • 属性: className, disableProductDescriptions, lock

优惠券表单 - woocommerce/checkout-order-summary-coupon-form-block​

显示应用优惠券的表单。

  • 名称: woocommerce/checkout-order-summary-coupon-form-block
  • 分类: woocommerce
  • 父级:
  • 父类: woocommerce/checkout-order-summary-block
  • 支持: align, html, multiple, reusable
  • 属性: className, lock

折扣 - woocommerce/checkout-order-summary-discount-block​

显示购物车折扣行。

  • 名称: woocommerce/checkout-order-summary-discount-block
  • 分类: woocommerce
  • 父级:
  • 父类: woocommerce/checkout-order-summary-totals-block
  • 支持: align, html, lock, multiple, reusable
  • 属性: className, lock

费用 - woocommerce/checkout-order-summary-fee-block​

显示购物车费用行。

  • 名称: woocommerce/checkout-order-summary-fee-block
  • 分类: woocommerce
  • 父级:
  • 父类: woocommerce/checkout-order-summary-totals-block
  • 支持: align, html, lock, multiple, reusable
  • 属性: className, lock

配送 - woocommerce/checkout-order-summary-shipping-block​

显示购物车配送行。

  • 名称: woocommerce/checkout-order-summary-shipping-block
  • 分类: woocommerce
  • 父级:
  • 父类: woocommerce/checkout-order-summary-totals-block
  • 支持: align, html, lock, multiple, reusable
  • 属性: lock

小计 - woocommerce/checkout-order-summary-subtotal-block​

显示购物车小计行。

  • 名称: woocommerce/checkout-order-summary-subtotal-block
  • 分类: woocommerce
  • 父级:
  • 父类: woocommerce/checkout-order-summary-totals-block
  • 支持: align, html, lock, multiple, reusable
  • 属性: className, lock

税费 - woocommerce/checkout-order-summary-taxes-block​

显示购物车税费行。

  • 名称: woocommerce/checkout-order-summary-taxes-block
  • 分类: woocommerce
  • 父级:
  • 父类: woocommerce/checkout-order-summary-totals-block
  • 支持: align, html, lock, multiple, reusable
  • 属性: className, lock

总计 - woocommerce/checkout-order-summary-totals-block​

显示小计、费用、折扣、配送和税费。

  • 名称: woocommerce/checkout-order-summary-totals-block
  • 分类: woocommerce
  • 父级:
  • 父类: woocommerce/checkout-order-summary-block
  • 支持: align, html, lock, multiple, reusable
  • 属性: className, lock

支付方式 - woocommerce/checkout-payment-block​

您商店的支付方式。

  • Name: woocommerce/checkout-payment-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

取货方式 - woocommerce/checkout-pickup-options-block​

显示本地自提的位置。

  • Name: woocommerce/checkout-pickup-options-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

收货地址 - woocommerce/checkout-shipping-address-block​

收集客户的收货地址。

  • Name: woocommerce/checkout-shipping-address-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

配送方式 - woocommerce/checkout-shipping-method-block​

选择配送或本地自提。

  • Name: woocommerce/checkout-shipping-method-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

配送选项 - woocommerce/checkout-shipping-methods-block​

显示您商店的配送选项和运费。

  • Name: woocommerce/checkout-shipping-methods-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: lock

条款和条件 - woocommerce/checkout-terms-block​

确保客户同意您的条款和条件以及隐私政策。

  • Name: woocommerce/checkout-terms-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout-fields-block
  • Supports: align, html, multiple, reusable
  • Attributes: checkbox, className, showSeparator, text

订单总计 - woocommerce/checkout-totals-block​

包含订单总计的列。

  • Name: woocommerce/checkout-totals-block
  • Category: woocommerce
  • Ancestor:
  • Parent: woocommerce/checkout
  • Supports: align, html, inserter, lock, multiple, reusable
  • Attributes: checkbox, className, text

经典短代码 - woocommerce/classic-shortcode​

渲染经典 WooCommerce 短代码。

  • Name: woocommerce/classic-shortcode
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align, inserter, interactivity (clientNavigation), html, multiple, reusable
  • Attributes: align, shortcode

即将推出 - woocommerce/coming-soon​

  • Name: woocommerce/coming-soon
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: color (背景, 文本), 插入器
  • Attributes: color, comingSoonPatternId, storeOnly

客户账户 - woocommerce/customer-account​

一个允许您的客户登录和退出您商店账户的块。

  • Name: woocommerce/customer-account
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align, color (背景, 文本), interactivity (客户端导航), spacing (边距, 内边距), typography (字体大小)
  • Attributes: displayStyle, iconClass, iconStyle

邮件内容 - woocommerce/email-content​

一个用于邮件内容的占位符块。

  • Name: woocommerce/email-content
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: email, 插入器
  • Attributes: emailType, postId

推荐分类 - woocommerce/featured-category​

视觉上突出显示一个产品分类，并鼓励用户立即采取行动。

  • Name: woocommerce/featured-category
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (全屏, 宽屏), ariaLabel, color (背景, 文本), filter (双色), interactivity (客户端导航), spacing (内边距), HTML
  • Attributes: alt, categoryId, contentAlign, dimRatio, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewCategory

推荐产品 - woocommerce/featured-product​

突出显示一个产品或变体。

  • Name: woocommerce/featured-product
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (全屏, 宽屏), ariaLabel, color (背景, 文本), filter (双色), interactivity (客户端导航), multiple, spacing (内边距), HTML
  • Attributes: alt, contentAlign, dimRatio, focalPoint, hasParallax, imageFit, isRepeated, linkText, mediaId, mediaSrc, minHeight, overlayColor, overlayGradient, previewProduct, productId

筛选块 - woocommerce/filter-wrapper​

  • Name: woocommerce/filter-wrapper
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: interactivity (客户端导航), 插入器
  • Attributes: filterType, heading

精选产品 - woocommerce/handpicked-products​

以网格形式显示精选产品。

  • Name: woocommerce/handpicked-products
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (全屏, 宽屏), interactivity (客户端导航), HTML, 插入器
  • Attributes: align, alignButtons, columns, contentVisibility, isPreview, orderby, products

Mini-Cart - woocommerce/mini-cart​

显示一个按钮，方便购物者快速查看购物车。

  • 名称: woocommerce/mini-cart
  • 分类: woocommerce
  • 父级:
  • 祖父级:
  • 支持: 间距 (margin, padding), 字体 (fontSize), HTML, 多选
  • 属性: addToCartBehaviour, cartAndCheckoutRenderStyle, hasHiddenPrice, iconColor, iconColorValue, isPreview, miniCartIcon, onCartClickBehaviour, priceColor, priceColorValue, productCountColor, productCountColorValue, productCountVisibility

Mini-Cart 内容 - woocommerce/mini-cart-contents​

显示一个迷你购物车组件。

  • 名称: woocommerce/mini-cart-contents
  • 分类: woocommerce
  • 父级:
  • 祖父级:
  • 支持: 颜色 (背景, 链接, 文本), 对齐, HTML, 插入器, 锁定, 多选, 可重用
  • 属性: isPreview, lock, 宽度

迷你购物车为空时的视图 - woocommerce/empty-mini-cart-contents-block​

当迷你购物车为空时显示的块。

  • 名称: woocommerce/empty-mini-cart-contents-block
  • 分类: woocommerce
  • 父级:
  • 祖父级: woocommerce/mini-cart-contents
  • 支持: 交互性, 对齐, HTML, 插入器, 锁定, 多选, 可重用
  • 属性: lock

迷你购物车已填充时的视图 - woocommerce/filled-mini-cart-contents-block​

包含显示迷你购物车内容的块。

  • 名称: woocommerce/filled-mini-cart-contents-block
  • 分类: woocommerce
  • 父级:
  • 祖父级: woocommerce/mini-cart-contents
  • 支持: 交互性, 对齐, HTML, 插入器, 锁定, 多选, 可重用
  • 属性: lock

迷你购物车“查看购物车”按钮 - woocommerce/mini-cart-cart-button-block​

当迷你购物车包含产品时，显示购物车按钮的块。

  • 名称: woocommerce/mini-cart-cart-button-block
  • 分类: woocommerce
  • 父级:
  • 祖父级: woocommerce/mini-cart-footer-block
  • 支持: 颜色 (背景, 文本), 插入器, 交互性 (clientNavigation), 对齐, HTML, 多选, 可重用
  • 属性: cartButtonLabel, lock

迷你购物车“继续结账”按钮 - woocommerce/mini-cart-checkout-button-block​

当迷你购物车包含产品时，显示结账按钮的块。

  • 名称: woocommerce/mini-cart-checkout-button-block
  • 分类: woocommerce
  • 父级:
  • 祖父级: woocommerce/mini-cart-footer-block
  • 支持: 颜色 (背景, 文本), 插入器, 交互性 (clientNavigation), 对齐, HTML, 多选, 可重用
  • 属性: checkoutButtonLabel, lock

Mini-Cart 底部 - woocommerce/mini-cart-footer-block​

显示 Mini-Cart 块的底部的块。

  • 名称: woocommerce/mini-cart-footer-block
  • 分类: woocommerce
  • 父级:
  • 父块: woocommerce/filled-mini-cart-contents-block
  • 支持: 交互性, 对齐, HTML, 插入器, 锁定, 多选, 可复用
  • 属性: 锁定

Mini-Cart 项目 - woocommerce/mini-cart-items-block​

包含填充 Mini-Cart 的产品表格和其他自定义块。

  • 名称: woocommerce/mini-cart-items-block
  • 分类: woocommerce
  • 父级:
  • 父块: woocommerce/filled-mini-cart-contents-block
  • 支持: 交互性 (clientNavigation), 对齐, HTML, 插入器, 锁定, 多选, 可复用
  • 属性: 锁定

Mini-Cart 产品表格 - woocommerce/mini-cart-products-table-block​

显示 Mini-Cart 块的产品表格的块。

  • 名称: woocommerce/mini-cart-products-table-block
  • 分类: woocommerce
  • 父级:
  • 父块: woocommerce/mini-cart-items-block
  • 支持: 交互性, 对齐, HTML, 插入器, 锁定, 多选, 可复用
  • 属性: 锁定

Mini-Cart 购物按钮 - woocommerce/mini-cart-shopping-button-block​

当 Mini-Cart 为空时，显示购物按钮的块。

  • 名称: woocommerce/mini-cart-shopping-button-block
  • 分类: woocommerce
  • 父级:
  • 父块: woocommerce/empty-mini-cart-contents-block
  • 支持: 颜色 (背景, 文本), 插入器, 交互性 (clientNavigation), 对齐, HTML, 多选, 可复用
  • 属性: 锁定, startShoppingButtonLabel

Mini-Cart 标题 - woocommerce/mini-cart-title-block​

显示 Mini-Cart 块的标题的块。

  • 名称: woocommerce/mini-cart-title-block
  • 分类: woocommerce
  • 父级:
  • 父块: woocommerce/filled-mini-cart-contents-block
  • 支持: 颜色 (文本, 背景), 交互性 (clientNavigation), 排版 (字体大小), 对齐, HTML, 插入器, 锁定, 多选, 可复用
  • 属性: 锁定

Mini-Cart 标题 项目计数器 - woocommerce/mini-cart-title-items-counter-block​

显示 Mini-Cart 标题部分的项目计数器的块。

  • 名称: woocommerce/mini-cart-title-items-counter-block
  • 分类: woocommerce
  • 父级:
  • 父块: woocommerce/mini-cart-title-block
  • 支持: 颜色 (背景, 文本), 交互性, 间距 (内边距), 排版 (字体大小), 对齐, HTML, 插入器, 锁定, 多选, 可复用
  • 属性:

Mini-Cart Title Label - woocommerce/mini-cart-title-label-block​

用于显示迷你购物车标题部分的模块。

  • 名称: woocommerce/mini-cart-title-label-block
  • 分类: woocommerce
  • 父模块:
  • 父级: woocommerce/mini-cart-title-block
  • 支持: color (背景, 文本), interactivity (客户端导航), spacing (内边距), typography (字体大小), align, html, inserter, lock, multiple, reusable
  • 属性: label

Next/Previous Buttons - woocommerce/product-gallery-large-image-next-previous​

显示“下一张”和“上一张”按钮。

  • 名称: woocommerce/product-gallery-large-image-next-previous
  • 分类: woocommerce
  • 父模块: woocommerce/product-gallery-large-image, woocommerce/product-collection
  • 父级:
  • 支持: align, color (背景, 文本), interactivity, layout (允许垂直对齐, 默认, 允许对齐, 允许方向), shadow, spacing (外边距)
  • 属性:

Additional Field List - woocommerce/order-confirmation-additional-fields​

显示当前订单的附加字段值列表。

  • 名称: woocommerce/order-confirmation-additional-fields
  • 分类: woocommerce
  • 父模块:
  • 父级:
  • 支持: align (全屏, 宽屏), spacing (外边距, 内边距), html, multiple
  • 属性: align, className

Additional Fields - woocommerce/order-confirmation-additional-fields-wrapper​

显示来自“联系方式”和“订单”位置的附加结账字段。

  • 名称: woocommerce/order-confirmation-additional-fields-wrapper
  • 分类: woocommerce
  • 父模块:
  • 父级:
  • 支持: align (全屏, 宽屏), spacing (外边距, 内边距), html, multiple
  • 属性: heading

Additional Information - woocommerce/order-confirmation-additional-information​

显示由第三方扩展提供的当前订单的附加信息。

  • 名称: woocommerce/order-confirmation-additional-information
  • 分类: woocommerce
  • 父模块:
  • 父级:
  • 支持: align (全屏, 宽屏), spacing (外边距, 内边距), html, multiple
  • 属性: align, className

Billing Address - woocommerce/order-confirmation-billing-address​

显示订单确认的账单地址。

  • 名称: woocommerce/order-confirmation-billing-address
  • 分类: woocommerce
  • 父模块:
  • 父级:
  • 支持: align (全屏, 宽屏), color (背景, 文本), spacing (外边距, 内边距), typography (字体大小, 行高), html, inserter, multiple
  • 属性: align

账单地址 - woocommerce/order-confirmation-billing-wrapper​

显示订单确认页面的账单地址部分。

  • Name: woocommerce/order-confirmation-billing-wrapper
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), spacing (margin, padding), html, multiple
  • Attributes: heading

账户创建 - woocommerce/order-confirmation-create-account​

允许客户在购买后创建账户。

  • Name: woocommerce/order-confirmation-create-account
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), color (background, button, text), spacing (margin, padding), html, inserter, lock, multiple
  • Attributes: align, className, customerEmail, hasDarkControls, lock, nonceToken

订单下载 - woocommerce/order-confirmation-downloads​

显示已购买的下载链接。

  • Name: woocommerce/order-confirmation-downloads
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html, multiple
  • Attributes: align, className

下载部分 - woocommerce/order-confirmation-downloads-wrapper​

显示可下载产品部分。

  • Name: woocommerce/order-confirmation-downloads-wrapper
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), spacing (margin, padding), html, multiple
  • Attributes: heading

配送地址 - woocommerce/order-confirmation-shipping-address​

显示订单确认页面的配送地址。

  • Name: woocommerce/order-confirmation-shipping-address
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), color (background, text), spacing (margin, padding), typography (fontSize, lineHeight), html, inserter, multiple
  • Attributes: align

配送地址部分 - woocommerce/order-confirmation-shipping-wrapper​

显示订单确认页面的配送部分。

  • Name: woocommerce/order-confirmation-shipping-wrapper
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), spacing (margin, padding), html, multiple
  • Attributes: heading

订单状态 - woocommerce/order-confirmation-status​

显示“谢谢”消息，或关于当前订单状态的句子。

  • Name: woocommerce/order-confirmation-status
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), html, multiple
  • Attributes: align, className

订单摘要 - woocommerce/order-confirmation-summary​

在订单确认页面显示订单摘要。

  • 名称: woocommerce/order-confirmation-summary
  • 分类: woocommerce
  • 父级:
  • 祖父级:
  • 支持: align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), html, multiple
  • 属性: align, className

订单总计 - woocommerce/order-confirmation-totals​

显示已购买的商品和订单总计。

  • 名称: woocommerce/order-confirmation-totals
  • 分类: woocommerce
  • 父级:
  • 祖父级:
  • 支持: align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), html, multiple
  • 属性: align, className

订单总计部分 - woocommerce/order-confirmation-totals-wrapper​

显示订单详情部分。

  • 名称: woocommerce/order-confirmation-totals-wrapper
  • 分类: woocommerce
  • 父级:
  • 祖父级:
  • 支持: align (full, wide), spacing (margin, padding), html, multiple
  • 属性: heading

WooCommerce 网页 - woocommerce/page-content-wrapper​

显示 WooCommerce 网页内容。

  • 名称: woocommerce/page-content-wrapper
  • 分类: woocommerce
  • 父级:
  • 祖父级:
  • 支持: html, inserter, multiple
  • 属性: page

付款方式图标 - woocommerce/payment-method-icons​

显示可用付款方式的图标。

  • 名称: woocommerce/payment-method-icons
  • 分类: woocommerce
  • 父级:
  • 祖父级:
  • 支持: spacing (margin, padding)
  • 属性: numberOfIcons

按价格筛选控件 - woocommerce/price-filter​

允许客户通过选择价格范围来筛选商品列表。

  • 名称: woocommerce/price-filter
  • 分类: woocommerce
  • 父级:
  • 祖父级:
  • 支持: color (text, background), interactivity (clientNavigation), html, inserter, lock, multiple
  • 属性: className, headingLevel, inlineInput, showFilterButton, showInputFields

最畅销商品 - woocommerce/product-best-sellers​

显示您所有时期的最畅销商品列表。

  • 名称: woocommerce/product-best-sellers
  • 分类: woocommerce
  • 父级:
  • 祖父级:
  • 支持: align (full, wide), interactivity (clientNavigation), html, inserter
  • 属性: alignButtons, catOperator, categories, columns, contentVisibility, editMode, isPreview, orderby, rows, stockStatus

产品分类列表 - woocommerce/product-categories​

以列表或下拉形式显示所有产品分类。

  • 名称: woocommerce/product-categories
  • 分类: woocommerce
  • 父分类:
  • 父级:
  • 支持: align (full, wide), color (link, text, background), interactivity (clientNavigation), typography (fontSize, lineHeight), html
  • 属性: align, hasCount, hasEmpty, hasImage, isDropdown, isHierarchical, showChildrenOnly

按分类的产品 - woocommerce/product-category​

显示来自您所选分类的产品网格。

  • 名称: woocommerce/product-category
  • 分类: woocommerce
  • 父分类:
  • 父级:
  • 支持: align (full, wide), interactivity (clientNavigation), html, inserter
  • 属性: alignButtons, catOperator, categories, columns, contentVisibility, editMode, isPreview, orderby, rows, stockStatus

产品集合 - woocommerce/product-collection​

显示您商店中的产品集合。

  • 名称: woocommerce/product-collection
  • 分类: woocommerce
  • 父分类:
  • 父级:
  • 支持: align (full, wide), anchor, email, interactivity, html
  • 属性: __privatePreviewState, collection, convertedFromProducts, dimensions, displayLayout, forcePageReload, hideControls, query, queryContextIncludes, queryId, tagName

无结果 - woocommerce/product-collection-no-results​

当未找到任何产品时，此块的内容将显示。

  • 名称: woocommerce/product-collection-no-results
  • 分类: woocommerce
  • 父分类: woocommerce/product-collection
  • 父级:
  • 支持: align, color (background, gradients, link, text), email, interactivity (clientNavigation), typography (fontSize, lineHeight), html, reusable
  • 属性:

产品描述 - woocommerce/product-description​

显示产品的描述。

  • 名称: woocommerce/product-description
  • 分类: woocommerce
  • 父分类: woocommerce/single-product, woocommerce/product-template, core/post-template
  • 父级:
  • 支持: align (full, wide), background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), html
  • 属性:

产品详情 - woocommerce/product-details​

显示产品的描述、属性和评论。

  • 名称: woocommerce/product-details
  • 分类: woocommerce
  • 父分类:
  • 父级:
  • 支持: align (full, wide), interactivity (clientNavigation)
  • 属性: align, hideTabTitle

加入购物车 - woocommerce/add-to-cart-form​

显示一个按钮，允许客户将产品添加到购物车。使用添加的选项来优化不同类型的产品。

  • 名称: woocommerce/add-to-cart-form
  • 分类: woocommerce-product-elements
  • 父级:
  • 祖先:
  • 支持: 交互性
  • 属性: quantitySelectorStyle

产品筛选器 - woocommerce/product-filters​

允许购物者筛选网页上显示的商品。

  • 名称: woocommerce/product-filters
  • 分类: woocommerce
  • 父级:
  • 祖先:
  • 支持: 对齐, 颜色 (背景, 按钮, 标题, 文本, 启用对比检查器), 插入器, 交互性, 布局 (默认, 允许编辑), 多选, 间距 (块间距), 排版 (字体大小)
  • 属性: isPreview

激活的筛选器 - woocommerce/product-filter-active​

显示当前激活的筛选器。

  • 名称: woocommerce/product-filter-active
  • 分类: woocommerce
  • 父级: woocommerce/product-filters
  • 祖先:
  • 支持: 交互性, 间距 (边距, 内边距, 块间距)
  • 属性:

属性筛选器 - woocommerce/product-filter-attribute​

允许客户通过选择一个或多个属性（例如颜色）来筛选产品列表。

  • 名称: woocommerce/product-filter-attribute
  • 分类: woocommerce
  • 父级: woocommerce/product-filters
  • 祖先:
  • 支持: 颜色 (文本, 背景), 交互性, 间距 (块间距, 边距, 内边距), 排版 (字体大小, 行高)
  • 属性: attributeId, displayStyle, hideEmpty, isPreview, queryType, selectType, showCounts, sortOrder

列表 - woocommerce/product-filter-checkbox-list​

显示一个筛选选项列表。

  • 名称: woocommerce/product-filter-checkbox-list
  • 分类: woocommerce
  • 父级: woocommerce/product-filter-attribute, woocommerce/product-filter-status, woocommerce/product-filter-taxonomy, woocommerce/product-filter-rating
  • 祖先:
  • 支持: 交互性
  • 属性: customLabelElement, customOptionElement, customOptionElementBorder, customOptionElementSelected, labelElement, optionElement, optionElementBorder, optionElementSelected

标签 - woocommerce/product-filter-chips​

以标签的形式显示筛选选项。

  • 名称: woocommerce/product-filter-chips
  • 分类: woocommerce
  • 父级: woocommerce/product-filter-attribute, woocommerce/product-filter-taxonomy, woocommerce/product-filter-status
  • 祖先:
  • 支持: 交互性
  • 属性: chipBackground, chipBorder, chipText, customChipBackground, customChipBorder, customChipText, customSelectedChipBackground, customSelectedChipBorder, customSelectedChipText, selectedChipBackground, selectedChipBorder, selectedChipText

清除过滤器 - woocommerce/product-filter-clear-button​

允许购物者清除已应用的过滤器。

  • 名称: woocommerce/product-filter-clear-button
  • 分类: woocommerce
  • 父级: woocommerce/product-filter-active
  • 父分类:
  • 支持: inserter, interactivity
  • 属性:

价格过滤器 - woocommerce/product-filter-price​

允许购物者通过选择价格范围来过滤产品。

  • 名称: woocommerce/product-filter-price
  • 分类: woocommerce
  • 父级: woocommerce/product-filters
  • 父分类:
  • 支持: interactivity, html
  • 属性:

价格滑块 - woocommerce/product-filter-price-slider​

滑块帮助购物者选择价格范围。

  • 名称: woocommerce/product-filter-price-slider
  • 分类: woocommerce
  • 父级: woocommerce/product-filter-price
  • 父分类:
  • 支持: color (背景, enableContrastChecker, 文本), interactivity, html
  • 属性: customSlider, customSliderHandle, customSliderHandleBorder, inlineInput, showInputFields, slider, sliderHandle, sliderHandleBorder

评分过滤器 - woocommerce/product-filter-rating​

允许客户根据评分来过滤产品集合。

  • 名称: woocommerce/product-filter-rating
  • 分类: woocommerce
  • 父级: woocommerce/product-filters
  • 父分类:
  • 支持: color (文本, 背景), interactivity
  • 属性: className, isPreview, minRating, showCounts

标签 - woocommerce/product-filter-removable-chips​

以标签的形式显示可移除的已应用过滤器。

  • 名称: woocommerce/product-filter-removable-chips
  • 分类: woocommerce
  • 父级: woocommerce/product-filter-active
  • 父分类:
  • 支持: interactivity, layout (默认, allowInheriting, allowSwitching, allowVerticalAlignment)
  • 属性: chipBackground, chipBorder, chipText, customChipBackground, customChipBorder, customChipText

状态过滤器 - woocommerce/product-filter-status​

允许购物者通过选择库存状态来过滤产品。

  • 名称: woocommerce/product-filter-status
  • 分类: woocommerce
  • 父级: woocommerce/product-filters
  • 父分类:
  • 支持: color (文本, 背景), interactivity, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), html
  • 属性: displayStyle, hideEmpty, isPreview, showCounts

分类法过滤器 - woocommerce/product-filter-taxonomy​

允许客户通过选择一个或多个分类法项来过滤产品集合，例如分类、品牌或标签。

  • 名称: woocommerce/product-filter-taxonomy
  • 分类: woocommerce
  • 父级: woocommerce/product-filters
  • 父分类:
  • 支持: color (文本, 背景), interactivity, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
  • 属性: displayStyle, hideEmpty, isPreview, showCounts, sortOrder, taxonomy

产品画廊 - woocommerce/product-gallery​

展示您的产品相关的图片和媒体。

  • 名称: woocommerce/product-gallery
  • 分类: woocommerce
  • 父级: woocommerce/single-product
  • 父分类:
  • 支持: align, email, interactivity, layout (allowEditing, allowOrientation, default, allowJustification)
  • 属性: fullScreenOnClick, hoverZoom

缩略图 - woocommerce/product-gallery-large-image​

显示产品的缩略图。

  • 名称: woocommerce/product-gallery-large-image
  • 分类: woocommerce
  • 父级: woocommerce/product-gallery
  • 父分类:
  • 支持: interactivity
  • 属性:

缩略图 - woocommerce/product-gallery-thumbnails​

显示产品的缩略图。

  • 名称: woocommerce/product-gallery-thumbnails
  • 分类: woocommerce
  • 父级: woocommerce/product-gallery
  • 父分类:
  • 支持: interactivity, spacing (margin)
  • 属性: aspectRatio, thumbnailSize

最新产品 - woocommerce/product-new​

显示您的最新产品网格。

  • 名称: woocommerce/product-new
  • 分类: woocommerce
  • 父级:
  • 父分类:
  • 支持: align (full, wide), interactivity (clientNavigation), html, inserter
  • 属性: alignButtons, catOperator, categories, columns, contentVisibility, editMode, isPreview, orderby, rows, stockStatus

促销产品 - woocommerce/product-on-sale​

显示当前正在促销的产品网格。

  • 名称: woocommerce/product-on-sale
  • 分类: woocommerce
  • 父级:
  • 父分类:
  • 支持: align (full, wide), interactivity (clientNavigation), html, inserter
  • 属性: alignButtons, catOperator, categories, columns, contentVisibility, isPreview, orderby, rows, stockStatus

产品结果数量 - woocommerce/product-results-count​

显示存档页面或搜索结果页面上的产品数量。

  • 名称: woocommerce/product-results-count
  • 分类: woocommerce
  • 父级:
  • 父分类:
  • 支持: color (text, background), interactivity (clientNavigation), typography (fontSize)
  • 属性:

产品评论 - woocommerce/product-reviews​

显示产品的评论。

  • 名称: woocommerce/product-reviews
  • 分类: woocommerce
  • 父级:
  • 父分类:
  • 支持: align (full, wide), color (background, gradients, heading, link, text), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), html
  • 属性: tagName

评论作者姓名 - woocommerce/product-review-author-name​

显示评论的作者姓名。

  • 名称: woocommerce/product-review-author-name
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews
  • 父类:
  • 支持: 颜色 (背景, 渐变, 链接, 文本), 交互 (客户端导航), 间距 (边距, 内边距), 排版 (字体大小, 行高), HTML
  • 属性: isLink, linkTarget, textAlign

评论内容 - woocommerce/product-review-content​

显示产品评论的内容。

  • 名称: woocommerce/product-review-content
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews
  • 父类:
  • 支持: 颜色 (背景, 渐变, 链接, 文本), 间距 (内边距), 排版 (字体大小, 行高), HTML
  • 属性: textAlign

评论日期 - woocommerce/product-review-date​

显示评论发布的日期。

  • 名称: woocommerce/product-review-date
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews
  • 父类:
  • 支持: 颜色 (背景, 渐变, 链接, 文本), 交互 (客户端导航), 间距 (边距, 内边距), 排版 (字体大小, 行高), HTML
  • 属性: format, isLink

评论表单 - woocommerce/product-review-form​

显示产品的评论表单。

  • 名称: woocommerce/product-review-form
  • 分类: woocommerce
  • 父级:
  • 父类:
  • 支持: 颜色 (背景, 渐变, 标题, 链接, 文本), 交互, 间距 (边距, 内边距), 排版 (字体大小, 行高), HTML
  • 属性: textAlign

评论评分 - woocommerce/product-review-rating​

显示产品评论的评分。

  • 名称: woocommerce/product-review-rating
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews
  • 父类:
  • 支持: 颜色 (背景, 渐变, 文本), 交互 (客户端导航)
  • 属性: textAlign

评论模板 - woocommerce/product-review-template​

包含用于显示产品评论的块元素，例如标题、作者、日期、评分等。

  • 名称: woocommerce/product-review-template
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews
  • 父类:
  • 支持: 对齐, 交互 (客户端导航), 间距 (边距, 内边距), 排版 (字体大小, 行高), HTML, 可复用
  • 属性:

评论分页 - woocommerce/product-reviews-pagination​

显示分页导航，用于显示下一组或上一组产品评论，如果适用。

  • 名称: woocommerce/product-reviews-pagination
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews
  • 父分类:
  • 支持: align, color (background, gradients, link, text), interactivity (clientNavigation), layout (default, allowInheriting, allowSwitching), typography (fontSize, lineHeight), html, reusable
  • 属性: paginationArrow

评论下一页 - woocommerce/product-reviews-pagination-next​

显示下一篇产品评论的页面链接。

  • 名称: woocommerce/product-reviews-pagination-next
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews-pagination
  • 父分类:
  • 支持: color (background, gradients, text), interactivity (clientNavigation), typography (fontSize, lineHeight), html, reusable
  • 属性: label

评论页码 - woocommerce/product-reviews-pagination-numbers​

显示产品评论分页的页码列表。

  • 名称: woocommerce/product-reviews-pagination-numbers
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews-pagination
  • 父分类:
  • 支持: color (background, gradients, text), interactivity (clientNavigation), typography (fontSize, lineHeight), html, reusable
  • 属性:

评论上一页 - woocommerce/product-reviews-pagination-previous​

显示上一篇产品评论的页面链接。

  • 名称: woocommerce/product-reviews-pagination-previous
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews-pagination
  • 父分类:
  • 支持: color (background, gradients, text), interactivity (clientNavigation), typography (fontSize, lineHeight), html, reusable
  • 属性: label

评论标题 - woocommerce/product-reviews-title​

显示包含评论数量的标题。

  • 名称: woocommerce/product-reviews-title
  • 分类: woocommerce
  • 父级: woocommerce/product-reviews
  • 父分类:
  • 支持: align, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), anchor, html
  • 属性: level, levelOptions, showProductTitle, showReviewsCount, textAlign

产品规格 - woocommerce/product-specifications​

显示产品的重量、尺寸和属性。

  • 名称: woocommerce/product-specifications
  • 分类: woocommerce
  • 父级: woocommerce/single-product, woocommerce/product-template, core/post-template
  • 父分类:
  • 支持: align (full, wide), spacing (margin, padding), typography (fontSize, lineHeight), html
  • 属性: showAttributes, showDimensions, showWeight

按照标签的产品 - woocommerce/product-tag​

显示带有所选标签的产品网格。

  • Name: woocommerce/product-tag
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), interactivity (clientNavigation), html, inserter
  • Attributes: alignButtons, columns, contentVisibility, isPreview, orderby, rows, stockStatus, tagOperator, tags

产品模板 - woocommerce/product-template​

包含用于渲染产品的块元素。

  • Name: woocommerce/product-template
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), anchor, color (background, gradients, link, text), email, interactivity, layout (allowEditing, allowInheriting, allowSizingOnChildren, allowSwitching, allowVerticalAlignment), typography (fontSize, lineHeight), html, inserter, reusable
  • Attributes:

顶级产品 - woocommerce/product-top-rated​

显示您评价最高的产品的网格。

  • Name: woocommerce/product-top-rated
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), interactivity (clientNavigation), html, inserter
  • Attributes: alignButtons, catOperator, categories, columns, contentVisibility, editMode, isPreview, orderby, rows, stockStatus

所有产品 - woocommerce/all-products​

以网格布局显示您商店中的产品。

  • Name: woocommerce/all-products
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), interactivity (clientNavigation), html, inserter, multiple
  • Attributes: alignButtons, columns, contentVisibility, isPreview, layoutConfig, orderby, rows

按照属性的产品 - woocommerce/products-by-attribute​

显示带有所选属性的产品网格。

  • Name: woocommerce/products-by-attribute
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: align (full, wide), interactivity (clientNavigation), html, inserter
  • Attributes: alignButtons, attrOperator, attributes, columns, contentVisibility, isPreview, orderby, rows, stockStatus

评分筛选控件 - woocommerce/rating-filter​

允许客户根据评分筛选产品网格。

  • Name: woocommerce/rating-filter
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: color (background, button, text), interactivity (clientNavigation), html, inserter, lock, multiple
  • Attributes: className, displayStyle, isPreview, selectType, showCounts, showFilterButton

所有评论 - woocommerce/all-reviews​

显示所有产品的评论列表。

  • Name: woocommerce/all-reviews
  • Category: woocommerce
  • Ancestor:
  • Parent:
  • Supports: color (text, background), interactivity (clientNavigation), typography (fontSize), html
  • Attributes:

按分类显示评论 - woocommerce/reviews-by-category​

显示来自特定分类的商品评论。

  • Name: woocommerce/reviews-by-category
  • 分类: woocommerce
  • Ancestor:
  • Parent:
  • Supports: 颜色 (文本, 背景), 交互性 (clientNavigation), 排版 (fontSize), html
  • 属性:

按产品显示评论 - woocommerce/reviews-by-product​

显示您产品的评论。

  • Name: woocommerce/reviews-by-product
  • 分类: woocommerce
  • Ancestor:
  • Parent:
  • Supports: 颜色 (文本, 背景), 交互性 (clientNavigation), 排版 (fontSize), html
  • 属性:

单个产品 - woocommerce/single-product​

显示您选择的单个产品，并完全控制其显示方式。

  • Name: woocommerce/single-product
  • 分类: woocommerce
  • Ancestor:
  • Parent:
  • Supports: 对齐 (full, wide), 交互性
  • 属性: isPreview, productId

库存状态筛选控件 - woocommerce/stock-filter​

允许客户根据库存状态筛选商品列表。

  • Name: woocommerce/stock-filter
  • 分类: woocommerce
  • Ancestor:
  • Parent:
  • Supports: 颜色 (背景, 按钮, 文本), 交互性 (clientNavigation), html, 插入器, 锁定, 多选
  • 属性: className, displayStyle, headingLevel, isPreview, selectType, showCounts, showFilterButton

商店通知 - woocommerce/store-notices​

显示由 WooCommerce 或扩展程序生成的面向购物者的通知。

  • Name: woocommerce/store-notices
  • 分类: woocommerce
  • Ancestor:
  • Parent:
  • Supports: 对齐 (full, wide), 交互性 (clientNavigation), 多选
  • 属性: align