如何将WooCommerce自定义单选按钮从垂直排列改为水平横向排列

你可以选择以下任意一种方式实现单选按钮水平排列： #

方案1：修改functions.php中的代码（无需额外加CSS） #

原来的代码每个单选按钮都包裹了块级元素<p>，默认会独占一行导致垂直排列，你可以直接替换原有函数代码：

add_action( 'woocommerce_review_order_before_payment', 'display_extra_fields_after_billing_address' , 10, 1 );
function display_extra_fields_after_billing_address () { 
    ?>
    <div class="delivery-options-wrap" style="display: flex; gap: 20px; margin: 10px 0;">
        <span><input type="radio" name="delivery_option" value="29 x 1" required />29 x 1</span>
        <span><input type="radio" name="delivery_option" value="27 x 2" />27 x 2</span>
        <span><input type="radio" name="delivery_option" value="25 x 3" />25 x 3</span>
    </div>
<?php
}

这个方案直接在行内加了flex布局样式，保存后刷新就能看到单选按钮水平排列，gap属性可以调整选项之间的间距。 #

方案2：不修改PHP代码，添加自定义CSS即可 #

你可以把以下CSS代码添加到WordPress后台「外观」-「自定义」-「额外CSS」的输入框中保存即可：

/* 单选按钮父级p标签改为行内块元素实现水平排列，精准匹配不会影响其他元素 */
p:has(input[name="delivery_option"]) {
    display: inline-block;
    margin-right: 20px;
}
/* 浏览器不支持:has选择器时使用下方适配性更强的通用写法 */
.woocommerce-checkout-payment p {
    display: inline-block;
    margin-right: 20px;
}

如果使用通用写法，注意如果支付区域还有其他独立p标签可能会受影响，优先使用带:has的选择器。

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