Как переместить пункт «Доставка» на странице оплаты в вордпресс?

Question

[vyacheslav_babenko]

Подскажите, как переместить пункт "доставка" выше, чтобы он был не в таблице, а перед тем, как заполнять поля доставки? Плагин woocommerce, сайт на вп.
Вот этот пункт:

Нужно переместить сюда:

Comments

[theboban]

У меня получилось так (по требованию заказчика)

Код:

<?php
/* ====================================
 * Plugin Name: Anti-Func
 * Description: Плагин для добавления сторонних кодов, чтобы не залезать в файл functions.php и не ронять сайт при не правильном коде. 
 * Plugin URI: 
 * Author: Vladimir Kozlov
 * Author URI: https://pluscode.online/
 * Version: 1.0
 * ==================================== */

/*
 * Добавляем часть формы к фрагменту
 */



add_filter( 'woocommerce_update_order_review_fragments', 'awoohc_add_update_form_billing', 99 );
function awoohc_add_update_form_billing( $fragments ) {

	$checkout = WC()->checkout();
	ob_start();
	
	
	echo '<div class="woocommerce-billing-fields__field-wrapper">';
	$content = "<h3>Детали оплаты</h3>";
	echo $content;
	
	echo '<table >';
			
			    do_action( 'woocommerce_review_order_before_shipping' );
			          wc_cart_totals_shipping_html();
			    do_action( 'woocommerce_review_order_after_shipping' );
	echo '</table>';
	

	$fields = $checkout->get_checkout_fields( 'billing' );
	foreach ( $fields as $key => $field ) {
		if ( isset( $field['country_field'], $fields[ $field['country_field'] ] ) ) {
			$field['country'] = $checkout->get_value( $field['country_field'] );
		}
		woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
	}

	echo '</div>';

	$art_add_update_form_billing              = ob_get_clean();
	$fragments['.woocommerce-billing-fields'] = $art_add_update_form_billing;

	return $fragments;
}

/*
 * Убираем поля для конкретного способа доставки
 */
add_filter( 'woocommerce_checkout_fields', 'awoohc_override_checkout_fields' );
function awoohc_override_checkout_fields( $fields ) {
   // получаем выбранные метод доставки
   $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
	
   // проверяем текущий метод и убираем не ненужные поля
   if ( 'local_pickup:13' === $chosen_methods[0] ) {
	   
      unset( $fields['billing']['billing_company'] );
      unset( $fields['billing']['billing_address_1'] );
      unset( $fields['billing']['billing_address_2'] );
      unset( $fields['billing']['billing_city'] );
      unset( $fields['billing']['billing_postcode'] );
      //unset( $fields['billing']['billing_country'] );
      unset( $fields['billing']['billing_state'] );
	  
   }
	
	if ( 'omniva_parcel_machines_ee' === $chosen_methods[0] ) {
      unset( $fields['billing']['billing_company'] );
      unset( $fields['billing']['billing_address_1'] );
      unset( $fields['billing']['billing_address_2'] );
      unset( $fields['billing']['billing_city'] );
      unset( $fields['billing']['billing_postcode'] );
      //unset( $fields['billing']['billing_country'] );
      unset( $fields['billing']['billing_state'] );
   }
	
	if ( 'edostavka-package-door:12:137' === $chosen_methods[0] ) {
      unset( $fields['billing']['billing_company'] );
      //unset( $fields['billing']['billing_address_1'] );
      unset( $fields['billing']['billing_address_2'] );
      //unset( $fields['billing']['billing_city'] );
      unset( $fields['billing']['billing_postcode'] );
      //unset( $fields['billing']['billing_country'] );
      unset( $fields['billing']['billing_state'] );
   }
   
   return $fields;
}

add_action( 'wp_footer', 'awoohc_add_script_update_shipping_method' );
function awoohc_add_script_update_shipping_method() {
	if ( is_checkout() ) {
		?>
		<!--Выполняем обновление полей при переключении доставки-->
		<script>
            jQuery(document).ready(function ($) {

                $(document.body).on('updated_checkout updated_shipping_method', function (event, xhr, data) {
                    $('input[name^="shipping_method"]').on('change', function () {
                        $('.woocommerce-billing-fields__field-wrapper').block({
                            message: null,
                            overlayCSS: {
                                background: '#fff',
                                'z-index': 1000000,
                                opacity: 0.3
                            }
                        });
                    });
                    var first_name = $('#billing_first_name').val(),
                        last_name = $('#billing_last_name').val(),
                        phone = $('#billing_phone').val(),
                        email = $('#billing_email').val();
                        
                    $(".woocommerce-billing-fields__field-wrapper").html(xhr.fragments[".woocommerce-billing-fields"]);
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_first_name"]').val(first_name);
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_last_name"]').val(last_name);
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_phone"]').val(phone);
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_email"]').val(email);
                    $('.woocommerce-billing-fields__field-wrapper').unblock();
                });
            });
			
			  
		
		</script>


		<?php
	}
}

И CSS:

<style type="text/css">
1
/* Add your CSS code here.
2
​
3
For example:
4
.example {
5
    color: red;
6
}
7
​
8
For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp
9
​
10
End of comment */ 
11
​
12
.woocommerce-billing-fields__field-wrapper .woocommerce-billing-fields__field-wrapper {
13
  display: flex;
14
    justify-content: space-between;
15
    flex-wrap: wrap;
16
}
17
#customer_details h3, #billing_country_field, #billing_city_field {
18
  order: -1;
19
}
20
p.nm-shipping-th-title, .woocommerce-shipping-totals.shipping th {
21
  display: none;
22
}
23
ul#shipping_method {
24
    padding: 20px;
25
    background: #fafafa;
26
}
27
.form-row {
28
    width: 100%;
29
}
30
.form-row-first, .form-row-last {
31
  width: 48% !important;
32
}
33
.woocommerce-billing-fields__field-wrapper table {
34
  width: 100%;
35
}
</style>

Answer 1

[Дмитрий Дмитриев]

Ну раз пока,что ни кто не предложил более изящного решения,то вставлю я свои 5 копеек:
Привет...
Ну как вариант переписать шаблоны Woocommerce
Шаблоны Woocommerce хранятся в папке плагина Woocommerce : wp-content/plugins/woocommerce/templates
В твоём случаи нас интересуют шаблоны wp-content/plugins/woocommerce/templates/checkout
Вижу ты создал дочернюю тему для своей темы.
1)Так в этой дочке создаёшь такую же структуру т.е. папку woocommerce , в ней папку checkout , БЕЗ папки templates!
2) В папку checkout т.е. ( shopkeeper-child/woocommerce/checkout ) копируешь нужные файлы из плагина т.е. из ( wp-content/plugins/woocommerce/templates/checkout ) , в твоём случаи это файлы:
review-order.php и form-billing.php . Эти два шаблона и придётся подправить.
3) В файле review-order.php нужно будет забрать(вырезать) кусок кода .В моём редакторе начало куска на строке №70 и окончание на строке №78 ...
Вот этот кусок:

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
    <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
        <?php wc_cart_totals_shipping_html(); ?>
    <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
<?php endif; ?>

4) Вырезать и вставить его в фаил form-billing.php
Вставляем получается сразу после заголовка "ОПЛАТА И ДОСТАВКА"
В моём редакторе он на строке №33 ,вот так он выглядит :

<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>

Только не тупо вставить а поместить в теги <table></table>
В общем после

<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>

Вставляем :

<table class="pilot_cafe_custom_show_shipping">
<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
    <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
          <?php wc_cart_totals_shipping_html(); ?>
    <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
<?php endif; ?>
</table>

5) В дочерней теме в файле style.css можно добавить стили:

table.pilot_cafe_custom_show_shipping th { display: none; }

исчезнет надпись "Доставка".
Всё выше сказанное на лету работает в теме storefront,
думаю и у тебя сработает.
Теперь немного "БОЛИ":
Wordpress постоянно обновляется и как следствие Wocommerce вместе с ним.
Поэтому не исключено ,что когда-то и шаблоны эти ( review-order.php и form-billing.php )
тоже подправят. А значит у шаблона будет новая версия.
В самом начале эти шаблоны имеют такую шапку :
* @package WooCommerce/Templates
* @version 3.3.0
Вот и номер версии...в общем если WooCommerce обновился,то лезем в плагин
находим эти шаблоны,смотрим номер версии и сравниваем с номером версии ,когда-то
скопированных в нашу дочернюю тему. Если номер версии отличается, то исправляем в наших скопированных
шаблонах на новый номер. Проверям...
работает?Круть...радуемся!
НЕ работает?Хреново...опять go to toster.ru

Comments

[vyacheslav_babenko]

Круто! Спасибо, пока нашел другой выход, но если понадобится, этим воспользуюсь. Еще есть вопрос по поводу страницы checkout. Можно будет как-то связаться с тобой?

[Дмитрий Дмитриев]

vyacheslav_babenko,
Для связи напиши ссылку на тебя в ВК !

[GlowRider]

@Dmitryev
Спасибо за инфу.
Сделал так же, все отлично. А вот фича с уведомлением по выбраному методу не корректно работает.. Вот мой вопрос. Буду презнателен, если будет какая то подсказка или совет.

Answer 2

[theboban]

У меня получилось так:

Код:

<?php
/*
 * Добавляем часть формы к фрагменту
 */

add_filter( 'woocommerce_update_order_review_fragments', 'awoohc_add_update_form_billing', 99 );
function awoohc_add_update_form_billing( $fragments ) {

	$checkout = WC()->checkout();
	ob_start();
	
	
	echo '<div class="woocommerce-billing-fields__field-wrapper">';
	$content = "<h3>Детали оплаты</h3>";
	echo $content;
	
	echo '<table >';
			
			    do_action( 'woocommerce_review_order_before_shipping' );
			          wc_cart_totals_shipping_html();
			    do_action( 'woocommerce_review_order_after_shipping' );
	echo '</table>';
	

	$fields = $checkout->get_checkout_fields( 'billing' );
	foreach ( $fields as $key => $field ) {
		if ( isset( $field['country_field'], $fields[ $field['country_field'] ] ) ) {
			$field['country'] = $checkout->get_value( $field['country_field'] );
		}
		woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
	}

	echo '</div>';

	$art_add_update_form_billing              = ob_get_clean();
	$fragments['.woocommerce-billing-fields'] = $art_add_update_form_billing;

	return $fragments;
}

/*
 * Убираем поля для конкретного способа доставки
 */
add_filter( 'woocommerce_checkout_fields', 'awoohc_override_checkout_fields' );
function awoohc_override_checkout_fields( $fields ) {
   // получаем выбранные метод доставки
   $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
	
   // проверяем текущий метод и убираем не ненужные поля
   if ( 'local_pickup:13' === $chosen_methods[0] ) {
	   
      unset( $fields['billing']['billing_company'] );
      unset( $fields['billing']['billing_address_1'] );
      unset( $fields['billing']['billing_address_2'] );
      unset( $fields['billing']['billing_city'] );
      unset( $fields['billing']['billing_postcode'] );
      //unset( $fields['billing']['billing_country'] );
      unset( $fields['billing']['billing_state'] );
	  
   }
	
	if ( 'omniva_parcel_machines_ee' === $chosen_methods[0] ) {
      unset( $fields['billing']['billing_company'] );
      unset( $fields['billing']['billing_address_1'] );
      unset( $fields['billing']['billing_address_2'] );
      unset( $fields['billing']['billing_city'] );
      unset( $fields['billing']['billing_postcode'] );
      //unset( $fields['billing']['billing_country'] );
      unset( $fields['billing']['billing_state'] );
   }
	
	if ( 'edostavka-package-door:12:137' === $chosen_methods[0] ) {
      unset( $fields['billing']['billing_company'] );
      //unset( $fields['billing']['billing_address_1'] );
      unset( $fields['billing']['billing_address_2'] );
      //unset( $fields['billing']['billing_city'] );
      unset( $fields['billing']['billing_postcode'] );
      //unset( $fields['billing']['billing_country'] );
      unset( $fields['billing']['billing_state'] );
   }
   
   return $fields;
}

add_action( 'wp_footer', 'awoohc_add_script_update_shipping_method' );
function awoohc_add_script_update_shipping_method() {
	if ( is_checkout() ) {
		?>
		<!--Выполняем обновление полей при переключении доставки-->
		<script>
            jQuery(document).ready(function ($) {

                $(document.body).on('updated_checkout updated_shipping_method', function (event, xhr, data) {
                    $('input[name^="shipping_method"]').on('change', function () {
                        $('.woocommerce-billing-fields__field-wrapper').block({
                            message: null,
                            overlayCSS: {
                                background: '#fff',
                                'z-index': 1000000,
                                opacity: 0.3
                            }
                        });
                    });
                    var first_name = $('#billing_first_name').val(),
                        last_name = $('#billing_last_name').val(),
                        phone = $('#billing_phone').val(),
                        email = $('#billing_email').val();
                        
                    $(".woocommerce-billing-fields__field-wrapper").html(xhr.fragments[".woocommerce-billing-fields"]);
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_first_name"]').val(first_name);
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_last_name"]').val(last_name);
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_phone"]').val(phone);
                    $(".woocommerce-billing-fields__field-wrapper").find('input[name="billing_email"]').val(email);
                    $('.woocommerce-billing-fields__field-wrapper').unblock();
                });
            });
			
			  
		
		</script>


		<?php
	}
}

CSS:

.woocommerce-billing-fields__field-wrapper .woocommerce-billing-fields__field-wrapper {
  display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#customer_details h3, #billing_country_field, #billing_city_field {
  order: -1;
}
p.nm-shipping-th-title, .woocommerce-shipping-totals.shipping th {
  display: none;
}

ul#shipping_method {
    padding: 20px;
    background: #fafafa;

}
.form-row {
    width: 100%;
}

.form-row-first, .form-row-last {
  width: 48% !important;
}

.woocommerce-billing-fields__field-wrapper table {
  width: 100%;
}

Comments

[pyotrgerasimov]

Здравствуйте - сделал аналогично вашей инструкции - но есть одна проблема - если сначала выбираешь доставку отличную от дефолтной - а потом применяешь купон - доставка скидывается на дефолтную ((

Посоветуйте пожалуйста что делать?

[pyotrgerasimov]

проблема решена - дело было в службе доставки - а не в приведенным коде

[cajka-d]

pyotrgerasimov, а как решили? У меня похожая ситуация.