Woocommerce 將送貨地址復制到賬單地址

Question

我有一家 Woocommerce 花店。 由於人們傾向於向其他人送花，我通過將 form-checkout.php 復制到我的子主題文件夾並將運輸部分移至頂部來更改賬單和運輸字段的順序。 但是，我還想包括一個按鈕/復選框，使用戶能夠將運輸信息復制到賬單字段。 Woocommerce 提供與此選項相反的選項（將帳單信息復制到運費），但我需要此選項的相反版本。 任何幫助將不勝感激。

Answer 1

您可以為此使用 jQuery。 這是您可以使用的代碼的一部分

  $("#copy_to_billing").on("click", function(){
    if (this.checked) {
      $("[name='first_name']").val($("[name='shipping_first_name']").val());
      $("[name='last_name']").val($("[name='shipping_last_name']").val());
      $("[name='billing_address_1']").val($("[name='shipping_address_1']").val());
      $("[name='billing_address_2']").val($("[name='shipping_address_2']").val());
      $("[name='billing_city']").val($("[name='shipping_city']").val());
      $("[name='billing_state']").val($("[name='shipping_state']").val());
      $("[name='billing_zip']").val($("[name='shipping_zip']").val());
      $("[name='billing_country']").val($("[name='shipping_country']").val());
    }
  });

然后你只需要添加一個按鈕來觸發這樣的代碼：

<button id="copy_to_billing">Copy shipping details</button>

Answer 2

如上所述，我進行了一些更改，並且這些代碼對我來說很好用

使用復選框而不是按鈕，我將帳單地址字段值處理為送貨地址字段。

//Paste this code in your theme js file
jQuery(document).on('change', '#copy_to_billing', function() {
        if(this.checked) {
            jQuery("[name='shipping_first_name']").val(jQuery("[name='billing_first_name']").val());
            jQuery("[name='shipping_last_name']").val(jQuery("[name='billing_last_name']").val());
            jQuery("[name='shipping_address_1']").val(jQuery("[name='billing_address_1']").val());
            jQuery("[name='shipping_address_2']").val(jQuery("[name='billing_address_2']").val());
            jQuery("[name='shipping_city']").val(jQuery("[name='billing_city']").val());
            jQuery("[name='shipping_state']").val(jQuery("[name='billing_state']").val());
            jQuery("[name='shipping_postcode']").val(jQuery("[name='billing_postcode']").val());
            jQuery("[name='shipping_country']").val(jQuery("[name='billing_country']").val());
        }
    });

轉到 your-theme/woocommerce/checkout/form-shipping.php（如果文件不存在，則從 woocommerce 復制到主題文件夾下的同一路徑中）。 並使用具有相同 ID 'copy_to_billing' 的復選框字段

<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( 'Shpping address is same as billing', 'woocommerce' ); ?></span>

Answer 3

在 WooCommerce 中，帳單地址和送貨地址是結帳頁面上的單獨字段。 但是，您可以創建一個 JavaScript function 以在客戶選中復選框或單擊按鈕時自動將送貨地址字段復制到賬單地址字段。

/*
In WooCommerce, the billing and shipping addresses are separate fields on the checkout page. However, you can create a JavaScript function to automatically copy the shipping address fields to the billing address fields when the customer checks a checkbox or clicks a button.
*/

function copyShippingToBilling() {
    document.getElementById("billing_first_name").value = document.getElementById("shipping_first_name").value;
    document.getElementById("billing_last_name").value = document.getElementById("shipping_last_name").value;
    document.getElementById("billing_address_1").value = document.getElementById("shipping_address_1").value;
    document.getElementById("billing_address_2").value = document.getElementById("shipping_address_2").value;
    document.getElementById("billing_city").value = document.getElementById("shipping_city").value;
    document.getElementById("billing_state").value = document.getElementById("shipping_state").value;
    document.getElementById("billing_postcode").value = document.getElementById("shipping_postcode").value;
    document.getElementById("billing_country").value = document.getElementById("shipping_country").value;
}
/*
You can then trigger this function by adding an "onclick" event to a checkbox or button on the checkout page, like this:
*/

<input type="checkbox" onclick="copyShippingToBilling()">Copy shipping address to billing address