请求将商品价格移至购物车模块数量减号按钮左侧

核心方案：无插件实现（避免网站崩溃风险） #

针对WooCommerce产品页，通过钩子调整HTML结构+CSS布局，同时兼容后续添加的尺寸、颜色等属性变量，具体步骤如下：

1. 调整价格位置（PHP钩子实现）

将价格插入到数量减号按钮左侧，同时确保变量产品切换属性时价格自动同步。将以下代码添加到主题的functions.php文件，或使用Code Snippets插件（轻量稳定，不会导致崩溃）：

add_action('woocommerce_before_add_to_cart_quantity', 'move_product_price_to_quantity_left');
function move_product_price_to_quantity_left() {
    global $product;
    // 自动获取当前产品/选中属性的价格（兼容变量产品）
    $price_html = $product->get_price_html();
    echo '<span class="custom-price-position">' . $price_html . '</span>';
}

// 隐藏原始位置的价格（可选，根据需求保留或隐藏）
add_action('wp_head', 'hide_original_product_price');
function hide_original_product_price() {
    echo '<style>.summary .price { display: none; }</style>';
}

2. 布局样式调整（CSS）

通过弹性盒布局实现价格与数量按钮的横向排列，空间不足时可调整字体大小和按钮尺寸：

/* 把数量模块改为弹性布局，对齐元素 */
.quantity {
    display: flex;
    align-items: center;
    gap: 10px; /* 调整价格与按钮的间距 */
}

/* 自定义价格样式，空间不足时缩小字体 */
.custom-price-position {
    font-size: 16px; /* 可改为14px/12px节省空间 */
    font-weight: 600;
    color: #2d2d2d;
}

/* 调整数量按钮尺寸，空间不足时缩小 */
.quantity .minus, .quantity .plus {
    padding: 5px 8px; /* 默认可能是8px 12px，按需缩小 */
    font-size: 14px;
}

/* 确保变量产品切换属性时价格布局稳定 */
.variations_form .custom-price-position {
    display: inline-block;
    min-width: 80px; /* 防止价格跳动 */
}

将上述CSS添加到外观→自定义→额外CSS中即可。

3. 兼容属性切换的动态更新（JS可选）

如果变量产品切换属性时价格未自动更新，添加以下JS代码确保同步：

jQuery(document).ready(function($) {
    // 切换属性时更新价格
    $('form.variations_form').on('show_variation', function(event, variation) {
        $('.custom-price-position').html(variation.price_html);
    });
    // 取消属性选择时恢复原始价格
    $('form.variations_form').on('hide_variation', function() {
        var originalPrice = $('.summary .price').html();
        $('.custom-price-position').html(originalPrice);
    });
});

注意事项 #

• 不要直接修改主题核心文件，避免主题更新后代码丢失；
• 测试变量产品切换属性时，确认价格是否正常同步；
• 空间不足时，优先缩小价格字体，再调整按钮尺寸，保证布局美观。

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