Question

我想改变支付网关的设计，我希望支付网关一个在另一个旁边而不是一个在另一个之下。

我尝试在文件payment-method.php中对我的主题的woocommerce目录进行一些更改，但没有成功。

payement网关代码：

 <li class="payment_method_<?php echo $gateway->id; ?>">
 <input id="payment_method_<?php echo $gateway->id; ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />
<div class="wallet_box_<?php echo $gateway->id; ?>">
<label for="payment_method_<?php echo $gateway->id; ?>">
<?php echo $gateway->get_title(); ?> <!--<?php echo $gateway->get_icon(); ?>-->
</label>
</div>
<?php if ( $gateway->has_fields() || $gateway->get_description() ) : ?>
<div class="payment_box payment_method_<?php echo $gateway->id; ?>" <?php if ( ! $gateway->chosen ) : ?>style="display:none;"<?php endif; ?>>
        <?php $gateway->payment_fields(); ?>
</div>
<?php endif; ?>
</li>

如果您有任何想法，请提前感谢。

Answer 1

您可以通过css完成，而无需更改任何模板文件中的任何代码。

以下是应用于li元素的css选择器/规则。

.woocommerce-checkout #payment ul.payment_methods li

在主题css文件中使用此选择器并向其添加css规则。以下供您参考。

.woocommerce-checkout #payment ul.payment_methods li{ float:left; display:inline-block; width:30%; //change this percentage according to number of items you have padding:5px; //suite the padding amount for yourselves }

您可能需要为此选择器添加更多css属性，以便与UI匹配。

希望这有帮助

woocommerce支付网关设计

1 个答案: