woocommerce支付网关设计

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

你可以通过改变任何模板文件中的任何代码来完成。

以下是应用于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属性来此选择，以便与用户界面相匹配。

希望这会有所帮助