code

Woocommerce 체크아웃 페이지에 배송지 주소가 먼저 표시되고 청구지 주소가 표시됩니까?

starcafe 2023. 2. 27. 23:26
반응형

Woocommerce 체크아웃 페이지에 배송지 주소가 먼저 표시되고 청구지 주소가 표시됩니까?

Woocommerce의 체크아웃 페이지에서 주소의 기능을 변경해야 합니다. 즉, 배송지 주소 필드, 청구지 주소 필드가 필요합니다.

아래 체크박스를 켜면 먼저 청구서가 표시되고 다음으로 배송이 표시됩니다.이미지를 참조해 주세요.

청구처 주소 우선

여기에 이미지 설명 입력

이제 배송지 주소 표시와 같이 변경해야 합니다. 청구처 주소를 표시하는 체크박스를 켜면 됩니다.아래 이미지를 참조하십시오.

배송지 주소 우선

여기에 이미지 설명 입력

테마 폴더에 있는 woocommerce 파일 수단을 변경하지 않고 이 변경이 필요합니다.또한 검증과 jquery 효과도 필요합니다.

누가 내가 그것을 만드는 것을 도와줄 수 있나요?

감사의 말을 전하다

코드 스니펫: 이것은 솔루션이 아니므로, 기능이나 체크박스가 아닌 장소를 변경하기 때문에 쓰지 마십시오.제가 투고하는 스크린샷을 참조해 주세요.

청구처 주소 우선

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

배송지 주소 우선

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

이 문제는 아직 해결되지 않았습니다.체크 아웃은 ajax로 실행되며 검증도 되기 때문에 jquery는 이에 대한 좋은 해결책이 아닙니다.좋은 해결책을 가진 사람이 있다면 다른 사람이 여기서 도울 수 있도록 제공하세요.

어린이 테마를 사용하면 쉽게 할 수 있습니다.

순서:

1) 복사form-checkout.php부터wp-content->plugins->woocommerce->templates->checkout안에 붙여서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>

메모: 이 솔루션은 하위 테마에서만 작동합니다.

당신의 요구는 독특하고 도전적이고 까다로웠습니다.그래서 목적을 달성하기 위해 코드를 시도했다.

이러한 기능을 구현하려면 먼저 jQuery에서 모든 코딩을 수행했으므로 먼저 콘솔에서 동일한 작업을 시도한 후 동일한 작업을 성공적으로 수행한 후 체크 아웃 페이지에 로딩되는 js에 코드를 추가하거나 체크 아웃 페이지에 on 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();
});

이번 호에서 보내드린 제 시간과 작업이 제대로 작동하여 귀사의 요구 사항을 충족시키기를 바랍니다.

이미 woocommerce 템플릿을 사용하는 방법을 알고 있는 경우 모든 백엔드 코드를 재작성하거나 jquery를 다시 작성할 필요가 없는 가장 쉬운 방법은 변경을 위해 3개의 woocommerce 템플릿을 복사하는 것입니다.이는 기본 woocommerce 템플릿을 변경하기 위한 것입니다.

[ checkout ]> [ form - relay ]를 선택합니다.php

[ checkout ]> [ form - relay ]를 선택합니다.php

[ checkout ]> [ form - relay ]를 선택합니다.php

각 템플릿에서 변경할 내용:

[ checkout ]> [ form - relay ]를 선택합니다.php

<?php do_action( 'woocommerce_checkout_billing' ); ?>하여 40으로 이동합니다.<?php do_action( 'woocommerce_checkout_shipping' ); ?>40.44로.

이제 나머지 2개의 템플릿에서는 몇 가지 코드 스와핑이 이루어집니다.

[ checkout ]> [ Form - relay ]에서 선택합니다.php

의 변경 29 의 변경<?php _e( 'Billing &amp; Shipping', 'woocommerce' ); ?>로로 합니다.<?php _e( 'Shipping &amp; Billing', 'woocommerce' ); ?>

변경 33회선<?php _e( 'Billing details', 'woocommerce' ); ?>로로 합니다.<?php _e( 'Shipping details', 'woocommerce' ); ?>

여기서 코드 교환이 이루어집니다.

이제 27~35줄을 자르고 checkout > form-backet에 붙여넣습니다.php는 25행입니다.체크 아웃 > 폼 배송 시 라인에서 자리를 놓치지 마십시오.php 25 ~ 33 행을 잘라 checkout > form-paste에 붙여넣어야 합니다.php는 27번째 줄에 있습니다.

메모: 두 템플릿 모두 코드 교환

.<?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?>> > > > > >> > > > > > > > > > > > > > > > > ><?php do_action( 'woocommerce_before_checkout_shipping_form', $checkout ); ?>" " " " > " " " " "php 를 참조해 주세요.

이제 체크아웃 > 폼빌링부터 시작하겠습니다.php 55 ~82 행을 잘라내고 checkout > form-pasting에 붙여넣습니다.php는 77행입니다.

이제 체크아웃 > 폼 배송부터 시작합니다.php 52 ~ 54 행을 잘라내고 checkout > form-pasting에 붙여넣습니다.53행의 php.이것은 기본 템플릿의 52행과 53행 사이에 있어야 합니다.

마지막 단계는 checkout > form-billing.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>

체크박스에서 필드를 표시하는 woocomme jquery의 마지막 메모

는 다음 는 checkout > 35jquery® checkout > form-billing 입니다.php 35면 되다 <div class="shipping_address">

관심 있는 사람이 있으면

main.js in your teme ex: 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());
     }
});

그리고 (테마에서) 형식-timeout.form-프로세서 형식으로

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

배송지 주소를 청구지여기에 이미지 설명 입력 주소로 복사하는 체크박스를 켜다

언급URL : https://stackoverflow.com/questions/31137508/woocommerce-checkout-page-show-shipping-address-first-then-billing-address

반응형