woocommerce payment gateway design

Question

Я хотел был бы изменить дизайн платежного шлюза, я хотел бы иметь шлюз оплаты один за другим вместо того, чтобы иметь один ниже другого.

Я попытался внести некоторые изменения в свой каталог woocommerce моей темы в файл payment-method.php, но безуспешно.

Код 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 без изменения любого кода в любом файле шаблона.

Ниже приведено селектор/правило css, применяемое к элементам li.

.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 атрибуты для этого селектора таким образом, чтобы соответствовать с пользовательским интерфейсом.

Надеюсь, что это поможет