移动端WooCommerce：将价格移至库存可用性旁（Astra+Elementor Pro）

针对你用Astra主题+Elementor Pro的场景，提供两种可行方案：

一、CSS代码调整（快速生效） #

之前用transform: translate没成功，大概率是选择器优先级不够或未结合布局属性，改用flex流式布局更适配移动端：

1. 简单产品适配代码 #

复制以下代码到外观>自定义>附加CSS，或Elementor页面设置的「自定义CSS」中：

/* 移动端：简单产品价格、库存、加购按钮同行排列 */
@media (max-width: 768px) {
    /* 调整产品摘要区域为flex容器 */
    .single-product .summary.entry-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px; /* 元素间间距，可自行调整 */
    }
    /* 调整各元素顺序与样式 */
    .single-product .price {
        order: 1;
        margin: 0;
        font-size: 1.2rem; /* 按需调整价格字号 */
    }
    .single-product .stock {
        order: 2;
        margin: 0;
        font-size: 0.9rem;
    }
    .single-product .single_add_to_cart_button {
        order: 3;
        flex: 1 1 100%; /* 让加购按钮占满整行 */
        margin-top: 8px;
    }
    /* 减少顶部冗余间距，确保首屏可见 */
    .single-product .site-content {
        padding-top: 15px !important;
    }
    .single-product .product_title.entry-title {
        margin-bottom: 10px !important;
        font-size: 1.3rem;
    }
}

2. 变量产品适配代码 #

如果是带规格的变量产品，替换为以下代码：

/* 移动端：变量产品价格、库存、加购按钮同行排列 */
@media (max-width: 768px) {
    .single-product .woocommerce-variation-add-to-cart {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }
    .single-product .price {
        order: 1;
        margin: 0;
    }
    .single-product .stock {
        order: 2;
        margin: 0;
    }
    .single-product .variations_button {
        order: 3;
        flex: 1 1 100%;
    }
    /* 首屏优化同前 */
    .single-product .site-content {
        padding-top: 15px !important;
    }
    .single-product .product_title.entry-title {
        margin-bottom: 10px !important;
    }
}

二、Elementor Pro可视化调整（无代码） #

如果你更偏好可视化操作，可通过Elementor产品模板修改：

• 打开Elementor编辑你的产品单页模板（若未创建，先在Elementor>模板>添加新模板>单产品模板）
• 找到「价格」Widget，将其拖拽到包含「库存状态」和「加入购物车」按钮的同一Section/Column中
• 选中该容器Section/Column，在Elementor左侧面板的「布局」选项中，设置显示方式为Flex，方向为「行」（移动端可保持行或按需改为列）
• 调整各元素的「对齐」和「间距」，确保价格与库存在同一行，加购按钮占满整行
• 最后调整产品标题、顶部Section的内边距/外边距，缩小冗余空间，确保移动端首屏能完整显示价格、库存、加购按钮

注意事项 #

• 若CSS代码未生效，可在选择器前添加!important提升优先级，或检查你的主题/Elementor是否有其他样式冲突
• 测试不同移动端设备（如320px宽度的小屏手机），确保布局不会错乱

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