Woocommerce 结帐页面先显示送货地址，然后显示帐单地址？

Question

在 Woocommerce 的结帐页面中，我需要更改地址的功能意味着首先我需要送货地址字段，然后是帐单地址字段。

如果选中复选框，则首先显示帐单，然后显示发货，如下图所示。

账单地址优先

现在我需要更改它，例如当我选中复选框时首先显示送货地址，它会显示帐单地址。见下图。

送货地址优先

我需要在不更改任何 woocommerce 文件的情况下进行此更改，这意味着在主题文件夹中还需要验证和 jquery 效果。

谁能帮我做一下？？

提前谢谢

code sn-ps：这不是解决方案，所以请不要写这个，因为它改变了地方而不是功能和复选框。请看我发布的截图。

账单地址优先

<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>

送货地址优先

<?php do_action( 'woocommerce_checkout_shipping' ); ?>
<?php do_action( 'woocommerce_checkout_billing' ); ?>

这个问题仍然没有解决，jquery 不是很好的解决方案，因为 checkout 也作为 ajax 和验证运行。如果有人有好的解决方案，那么请提供其他人可以从这里提供帮助。

Answer 1

如果您使用的是子主题，则可以轻松完成。

步骤：

1) 从wp-content->plugins->woocommerce->templates->checkout 复制form-checkout.php 并将其粘贴到wp-content\themes\your_theme\woocommerce\myaccount 中。

2) 改变这个

<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>

到

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

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

注意：此解决方案仅适用于子主题。

Answer 2

您的要求是独特的、具有挑战性的和棘手的。于是尝试了一段代码来达到目的。

为了实现这种功能，已经在 jQuery 中完成了所有编码，因此请确保您首先在控制台中尝试相同的操作，然后在成功运行相同的操作后，将代码添加到结帐页面上加载的任何 js 中或添加您的 js结帐页面。

jQuery('.shipping_address').css('display','block');

var bigHtml = jQuery(".woocommerce-billing-fields").children().not("h3, .create-account").detach();
var smallHtml = jQuery('.shipping_address').detach();
jQuery('.woocommerce-billing-fields').append(smallHtml);
jQuery('#order_comments_field').before(bigHtml);

jQuery('.woocommerce-billing-fields h3').text('Shipping Details');
jQuery('h3#ship-to-different-address').replaceWith('<h3 id="ship-to-billing-different-address"><label for="ship-to-billing-different-address-checkbox" class="checkbox">Ship to billing address?</label><input id="ship-to-billing-different-address-checkbox" class="input-checkbox" name="ship_to_different_billing_address" value="1" type="checkbox"></h3>');
jQuery(".woocommerce-shipping-fields").children().not("h3,#order_comments_field").hide();

jQuery("#ship-to-billing-different-address-checkbox").click(function(event) {
    if (jQuery(this).is(":checked"))
        jQuery(".woocommerce-shipping-fields").children().not("h3,#order_comments_field").show();
    else
        jQuery(".woocommerce-shipping-fields").children().not("h3,#order_comments_field").hide();
});

我希望我在本期发送的时间和工作能够满足您的要求。

Answer 3

如果您已经知道如何使用 woocommerce 模板，那么无需重新编写所有后端代码且无需重写 jquery 的最简单方法就是复制三个 woocommerce 模板进行修改。 这是为了修改默认的 woocommerce 模板。

结帐> form-checkout.php

结帐 > form-b​​illing.php

结帐 > form-shipping.php

对每个模板进行的更改：

结帐> form-checkout.php

将第 40 行的 <?php do_action( 'woocommerce_checkout_billing' ); ?> 移动到第 44 行 并将第 44 行的 <?php do_action( 'woocommerce_checkout_shipping' ); ?> 移动到第 40 行。

现在在其他两个模板上会有一些代码交换。

从结帐> form-b​​illing.php

在第 29 行将 <?php _e( 'Billing & Shipping', 'woocommerce' ); ?> 更改为 <?php _e( 'Shipping & Billing', 'woocommerce' ); ?>

在第 33 行将 <?php _e( 'Billing details', 'woocommerce' ); ?> 更改为 <?php _e( 'Shipping details', 'woocommerce' ); ?>

这就是代码交换的用武之地：

现在剪切第 27 到 35 行并将其粘贴到 checkout > form-shipping.php 的第 25 行。 不要在行中丢失您的位置 在结帐 > form-shipping.php 您需要剪切第 25 到 33 行并将其粘贴到结帐 > 第 27 行的 form-b​​illing.php 中。

注意：这两个模板上的代码交换

结帐时应高于此<?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?> > form-b​​illing.php 模板，结帐时应高于<?php do_action( 'woocommerce_before_checkout_shipping_form', $checkout ); ?> > form-shipping.php 模板。

现在从结帐 > form-b​​illing.php 剪切第 55 到 82 行并粘贴到结帐 > 第 77 行的 form-shipping.php。

现在从 checkout > form-shipping.php 剪切第 52 到 54 行并粘贴到 checkout > form-b​​illing.php 的第 53 行。这必须介于默认模板的第 52 和 53 行之间。

最后一步是更改复选框的输入中的文本，该复选框现在应该在结帐时 > form-b​​illing.php 第 31 行，如果你严格遵守的话。

您可以复制第 31 行并将其替换为以下内容：

<input id="ship-to-different-address-checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" <?php checked( apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 ), 1 ); ?> type="checkbox" name="ship_to_different_address" value="1" /> <span><?php _e( 'Bill to a different address?', 'woocommerce' ); ?></span>

关于使字段显示在复选框中的 woocommerce jquery 的最后说明

jquery 正在使用以下元素，该元素现在应该在结帐 > form-b​​illing.php 第 35 行。<div class="shipping_address">

Answer 4

如果有人感兴趣

在您的主题中的 main.js 中，例如：Leto: main.js (js/main.js)

//将运费复制到帐单

jQuery(document).on('change', '#copy_to_billing', function() {
    if(this.checked) {
        jQuery("#billing_first_name").val(jQuery("#shipping_first_name").val());
        jQuery("#billing_last_name").val(jQuery("#shipping_last_name").val());
        jQuery("#billing_address_1").val(jQuery("#shipping_address_1").val());
        jQuery("#billing_address_2").val(jQuery("#shipping_address_2").val());
        jQuery("#billing_city").val(jQuery("#shipping_city").val());
        jQuery("#billing_state").val(jQuery("#shipping_state").val()).change();
        //alert(jQuery("#shipping_state").val());
        //alert(jQuery("#shipping_state :selected").text());
        jQuery("#billing_postcode").val(jQuery("#shipping_postcode").val());
        jQuery("#billing_country").val(jQuery("#shipping_country").val());
        jQuery("#billing_company").val(jQuery("#shipping_company").val());
     }
});

在 form-shipping.php 中（在您的主题中）

<h3 id="ship_to_billing">
    <label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
        <input id="copy_to_billing" type ="checkbox" name="copy_to_billing" value ="1" class="copy_billing woocommerce-form__input woocommerce-form__input-checkbox input-checkbox"><span><?php esc_html_e( 'Billing address is same as shipping (be sure to enter email and phone)', 'woocommerce' ); ?></span>
    </label>
</h3>

在将送货地址复制到帐单地址 时有复选框