web-dev-qa-db-ja.com

Woocommerceのチェックアウトページには、最初に配送先住所が表示され、次に請求先住所が表示されますか？

Woocommerceのチェックアウトページで、住所の機能を変更する必要があります。つまり、最初に配送先住所フィールドが必要で、次に請求先住所フィールドが必要です。

以下のようにチェックボックスをオンにすると、請求が最初に表示され、次に送料が表示されます。画像を参照してください。

最初の請求先住所

enter image description here

チェックボックスをオンにすると、最初に配送先住所が表示されるように変更する必要があります。請求先住所が表示されます。下の画像を参照してください。

最初の配送先住所

enter image description here

woocommerceファイルを変更せずにこの変更が必要です。つまり、テーマフォルダー内の検証とjquery効果も必要です。

誰かが私がそれを作るのを手伝ってくれる？

事前の感謝

コードスニペット：これは解決策ではないため、plzは機能ではなく場所とチェックボックスを変更するため、これを記述しません。plzは私が投稿したスクリーンショットを参照してください。

最初の請求先住所

<?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はこれに対する適切なソリューションではありません。誰かが良い解決策を持っているなら、他の人がここから助けることができるように提供してください。

jqueryajaxwordpresswordpress-pluginwoocommerce
14
Mukesh Panchal

あなたの要件は独特で、挑戦的でトリッキーでもありました。そこで、目的を達成するためのコードを試しました。

この種の機能を実現するには、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
WisdmLabs

Woocommerceテンプレートの使用方法をすでに知っている場合は、すべてのバックエンドコードを作り直したり、jqueryを書き直したりせずにこれを実現する最も簡単な方法は、変更のために3つの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行目に移動します。

他の2つのテンプレートでは、コードの交換が行われます。

チェックアウトから> form-b​​illing.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行目を切り取り、25行目のcheckout> form-shipping.phpに貼り付けます。行の場所を失わないでくださいチェックアウト> form-shipping.phpで25行目を切り取る必要があります。 33を介して、27行目のcheckout> form-b​​illing.phpに貼り付けます。

注：両方のテンプレートでのこのコード交換

チェックアウト> form-b​​illing.phpテンプレートではこの<?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?>の上にあり、チェックアウト> form-shipping.phpテンプレートでは<?php do_action( 'woocommerce_before_checkout_shipping_form', $checkout ); ?>の上にある必要があります。

次に、checkout> form-b​​illing.phpから55行目から82行目を切り取り、checkout> form-shipping.phpを77行目に貼り付けます。

次に、checkout> form-shipping.phpから52行目から54行目を切り取り、チェックアウト> 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は、次の要素を処理しています。これらの要素は、checkout> form-b​​illing.phpの35行目にあるはずです。<div class="shipping_address">

1
Rudy Lister