如何在WooCommerce产品分类页横向对齐Gutenberg加入购物车按钮？

问题背景 #

使用Twenty Three主题（全站点编辑FSE）及WooCommerce，通过Products (Beta)古腾堡区块展示产品分类时，分类卡片内的按钮因文本长度不同无法横向对齐，且无法通过区块工具设置实现对齐，也不能修改文本长度。

CSS解决方案 #

可以通过以下CSS代码实现按钮的横向对齐：

/* 针对Products (Beta)区块的分类卡片按钮对齐 */
.wp-block-woocommerce-products-beta .wc-block-grid__product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wp-block-woocommerce-products-beta .wc-block-grid__product-add-to-cart {
    margin-top: auto;
}

代码说明 #

• 给产品分类卡片设置flex布局并让高度占满，确保每个卡片的高度一致
• 给按钮容器设置margin-top: auto，让按钮自动推到卡片底部，实现横向对齐

如何添加CSS #

• 进入WordPress后台，打开外观 > 自定义 > 额外CSS
• 将上述代码粘贴到额外CSS编辑器中
• 点击发布保存更改

注意：如果代码未生效，可通过浏览器开发者工具（F12）查看元素实际类名，微调CSS选择器以适配页面结构。

内容的提问来源于stack exchange，提问作者Machineuser