如何让WooCommerce标签在移动设备上水平对齐

WooCommerce默认移动端产品页的描述、评论标签为垂直布局，你可以通过添加自定义CSS修改为水平排列，具体操作如下：

1. 登录WordPress后台，进入「外观」→「自定义」→「额外CSS」
2. 粘贴以下代码：

@media (max-width: 768px) {
    /* 将标签容器设置为弹性布局 */
    .woocommerce-tabs .tabs {
        display: flex;
        gap: 15px; /* 标签间的间距，可根据需求调整 */
        flex-wrap: wrap; /* 屏幕过小时自动换行，避免内容挤压 */
    }
    /* 移除标签默认的底部外边距 */
    .woocommerce-tabs .tabs li {
        margin-bottom: 0;
    }
    /* 优化标签按钮的内边距，提升移动端点击体验 */
    .woocommerce-tabs .tabs li a {
        padding: 8px 16px;
    }
}

3. 点击「发布」保存设置

如果上述代码未生效，可能是主题自定义了标签的类名，你可以通过浏览器开发者工具（按F12）查看标签容器的实际类名，替换代码中的.woocommerce-tabs .tabs即可。

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