How to move the "Shipping" item on the payment page in WordPress?

Question

WordPress

Tell me how to move the "delivery" item above so that it is not in the table, but before filling in the delivery fields? Woocommerce plugin, website on vp.
This item is to be

moved here:

Answer 1

Well, since no one has suggested a more elegant solution yet, I'll put in my 5 cents:
Hello...
Well, as an option to rewrite Woocommerce templates Woocommerce
templates are stored in the Woocommerce plugin folder: wp-content/plugins/woocommerce/templates
In your case we are interested in templates wp-content/plugins/woocommerce/templates/checkout
I see you have created a child theme for your theme.
1) So in this daughter you create the same structure i.e. woocommerce folder, checkout folder in it, WITHOUT the templates folder!
2) To the checkout folder i.e. ( shopkeeper-child/woocommerce/checkout ) copy the necessary files from the plugin i.e. from ( wp-content/plugins/woocommerce/templates/checkout ) , in your case these are the files:
review-order.php and form-billing.php . These two templates will have to be corrected.
3) In the review-order.php file, you will need to pick up (cut out) a piece of code. In my editor, the piece starts on line 70 and ends on line 78 ...
Here is this piece:

<?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) Cut and paste it into the form-billing.php file.
Paste it right after the heading "PAYMENT AND DELIVERY"
In my editor, it is on line No. 33, this is how it looks:
Just don’t stupidly insert it, but place it in tags In general, after<table></table>
Insert:

<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) In the child theme in the style.css file, you can add styles:
"Shipping" will disappear.
Everything said above works on the fly in the storefront theme,
I think it will work for you too.
Now for a little "PAIN":
Wordpress is constantly updated and, as a result, Wocommerce along with it.
Therefore, it is possible that someday these templates ( review-order.php and form-billing.php )
will also be corrected. So the template will have a new version.
At the very beginning, these templates have the following header:
* @package WooCommerce/Templates
* @version 3.3.0
Here is the version number... in general, if WooCommerce has been updated, then we climb into the plugin
, find these templates, look at the version number and compare with the version number , once
copied to our child theme. If the version number is different, then we fix it in our copied
templates to the new number. Let's check ... does it
work? Cool ... rejoice!
Doesn't work? It sucks... again go to toaster.ru

Answer 2

I got it like this:

Code:

<?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%;
}