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

Posted 2023-03-25

【中文标题】Woocommerce 结帐页面先显示送货地址，然后显示帐单地址？

【英文标题】：Woocommerce checkout page show shipping address first then billing address?

【发布时间】：2015-09-17 04:54:59

【问题描述】：

在 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 和验证运行。如果有人有好的解决方案，那么请提供其他人可以从这里提供帮助。

【问题讨论】：

你在使用子主题吗？

是的，我使用子主题

谁能帮我解决这个问题？

重写模板并为复选框添加自己的JS函数有什么问题？

我告诉我需要在主题模板中制作请检查问题

【参考方案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>

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

【讨论】：

这不是一个答案，它只是改变了地址。我需要复选框和所有使用 ajax 的验证

同意 Mukesh，这并不能解决问题

【参考方案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();
);

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

【讨论】：

感谢您的回复，并给予时间帮助，我会检查并回复。使用后表单验证是否有效？还复选框存储检查值或否所以它存储是因为当我点击提交时它重新加载页面所以工作与否？

【参考方案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">

【讨论】：

这个答案似乎很棒。由于 WooCommerce 已经多次更新这些文件，以至于行号不再匹配，因此有点失落。如果您可以用图像替换确切的剪辑位置，那就太棒了。谢谢！

@JosephL。 +1 我同意。

【参考方案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>

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