Как переместить блок «способ оплаты» в Woocommerce?

Question

[Роман Говоров]

Сейчас вот так:


Нужно сделать вот так:


Нашел в исходниках код (/wp-content/plugins/woocommerce/templates/checkout/form-checkout.php):

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

	<?php if ( $checkout->get_checkout_fields() ) : ?>

		<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

		<div class="col2-set" id="customer_details">
			<div class="col-1">
				<?php do_action( 'woocommerce_checkout_billing' ); ?>
			</div>

			<div class="col-2">
				<?php do_action( 'woocommerce_checkout_shipping' ); ?>
			</div>
		</div>

		<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>

	<?php endif; ?>
	
	<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
	
	<h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
	
	<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

	<div id="order_review" class="woocommerce-checkout-review-order">
		<?php do_action( 'woocommerce_checkout_order_review' ); ?>
	</div>

	<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>

</form>

Строка <?php do_action( 'woocommerce_checkout_order_review' ); ?>, отвечает за вывод как раз таки блока доставки и оплаты, мне нужно оплату перенести в другое месте, как на скриншоте, как это сделать?

Уже голову сломал с этими add_action() и do_action()..

Answer 1

[Роман Говоров]

отредактировал файл /wp-content/plugins/woocommerce/templates/checkout/form-checkout.php
и закинул в папку темы /wp-content/themes/rstheme/woocommerce/checkout/form-checkout.php
Получилось то что и требовалось:

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

    <?php if ( $checkout->get_checkout_fields() ) : ?>
        <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
        <div class="row" id="customer_details">
            <div class="col-md-6">
                <?php do_action( 'woocommerce_checkout_billing' ); ?>
            </div>
            <div class="col-md-6">
                <?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
                <h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
                <p class="ti-0 h5 text-center pb-3" style="font-size: 15px">Чтобы рассчитать стоимость доставки укажите Ваш город</p>
                <?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

                <div id="order_review" class="woocommerce-checkout-review-order">
                    <?=woocommerce_order_review();?>
                </div>

                <?php do_action( 'woocommerce_checkout_after_order_review' ); ?>

            </div>
        </div>
        <?=woocommerce_checkout_payment();?>
    <?php endif; ?>
</form>

Answer 2

[Пычев Анатолий]

Он и так внизу формы (судя по коду который Вы предоставили), перестраивайте колонки со стилями
Просмотрите функции которые вызываются этими хуками, проверьте разметку.

Comments

[Роман Говоров]

(судя по коду который Вы предоставили)

это фотошоп)

Answer 3

[daniablag]

Нашел ответ как перенести попроще. В дочернюю тему в папку woocommerce/checkout добавляем payment.php Оборачиваем там ul с платежами в див с любым id (у меня payment-left) и добавляем ещё свой класс, может понадобиться.
Далее в функшионс.пхп добавляем сниппет к футеру.
Естественно классы и const свои пропишите

add_action( 'wp_footer', function() {
		if( is_checkout() ){ 
 ?>
<script language="javascript">
    const secondaryBlock = document.getElementById('payment-left');
	const description = document.querySelector('#customer_details');
	const brandList = document.querySelector('.woocommerce-additional-fields');
	
	description.insertBefore(secondaryBlock, brandList);
</script>
	<?php
}
} );