如何在WooCommerce中用Elementor小部件对齐商品按钮且不拉伸宽度？

方法一：自定义CSS实现精准对齐 #

通过给商品卡片设置Flex布局，让按钮自动固定在底部，同时保持按钮原有宽度：

/* 让商品卡片以垂直Flex布局填充容器高度 */
.elementor-widget-woocommerce-products .products .product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 让按钮容器自动顶至卡片底部 */
.elementor-widget-woocommerce-products .products .product .woocommerce-loop-product__link {
    margin-top: auto;
}

/* 强制按钮保持自适应宽度，避免被拉伸 */
.elementor-widget-woocommerce-products .products .product .add_to_cart_button {
    width: auto;
    align-self: flex-start; /* 可选：按钮左对齐；需要居中则改为center */
}

操作步骤：

1. 打开WordPress后台，进入「外观」→「自定义」→「额外CSS」
2. 将上述代码粘贴到输入框中并保存
3. 若使用缓存插件，清空缓存后刷新页面查看效果

提示：如果代码不生效，用浏览器F12开发者工具查看商品卡片和按钮的实际类名，替换代码中对应的选择器。

方法二：调整Elementor小部件布局设置 #

1. 在Elementor编辑器中选中WooCommerce商品小部件
2. 进入「布局」选项卡，找到「卡片布局」或「内容对齐」设置
3. 选择Flex布局模式，设置按钮区域对齐方式为「底部」
4. 在按钮样式设置中，将宽度改为「自动」而非「100%」

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