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

时间：2015-06-30 11:51:34

标签： jquery ajax wordpress wordpress-plugin woocommerce

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

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

  

首先是结算地址

enter image description here

现在我需要更改它，如发货地址显示，当我选中复选框，它显示我的帐单地址。见下图。

  

首先发货地址

enter image description here

我需要这个更改而不更改主题文件夹中的任何woocommerce文件意味着还需要验证和jquery效果。

任何人都可以帮助我做到吗??

提前谢谢

代码段：这不是解决方案，因此plz不会写这个，因为它改变了地方而不是功能和复选框。请看我发布的截图。

  

首先是结算地址

 KeyPairGenerator g = KeyPairGenerator.getInstance("EC");
 ECGenParameterSpec kpgparams = new ECGenParameterSpec("secp256r1");
 g.initialize(kpgparams);

 KeyPair pair = g.generateKeyPair();
 // Instance of signature class with SHA256withECDSA algorithm
 Signature ecdsaSign = Signature.getInstance("SHA256withECDSA");
 ecdsaSign.initSign(pair.getPrivate());

 System.out.println("Private Keys is::" + pair.getPrivate());
 System.out.println("Public Keys is::" + pair.getPublic());

JsonWebKeySet jsonWebKeySet = new JsonWebKeySet();
PrivateKey privateKey = pair.getPrivate();
JsonWebKey webKey = new  JsonWebKey(privateKey) {

    @Override
    public String getKeyType() {
        // TODO Auto-generated method stub
        return "EC";
    }

    @Override
    protected void fillTypeSpecificParams(Map<String, Object> params,
            OutputControlLevel outputLevel) {
        params.put("use", "sig");
        params.put("key_ops", "sign");
        params.put("alg", "ES256");
        params.put("kid", "kukuPrivateKey");

    }
};
jsonWebKeySet.addJsonWebKey(webKey);
System.out.println("aaaa"+jsonWebKeySet.toJson());
  

首先发货地址

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

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

4 个答案:

答案 0 :(得分：4)

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

步骤进行：

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>

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

答案 1 :(得分：3)

您的要求也是独特的，具有挑战性和棘手的。所以尝试了一个代码来达到目的。

要实现这种功能已经完成了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();
});

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

答案 2 :(得分：1)

如果您已经知道如何使用woocommerce模板，则最简单的方法是制作三个woocommerce模板的副本以进行修改，而不必重新编写所有后端代码，而不必重写jquery。 这是对默认woocommerce模板的修改。

checkout> form-checkout.php

结帐> form-b​​illing.php

结帐> form-shipping.php

对每个模板进行的更改：

checkout> form-checkout.php

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

现在，在其他两个模板上，将进行一些代码交换。

从结帐> 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中。 不要在checkout> 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行，然后在77行中粘贴到checkout> form-shipping.php中。

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

最后一步是更改复选框输入中的文本，如果您严格遵循的话，现在应该在checkout> 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">

答案 3 :(得分：0)

如果有人感兴趣

在您的主题中的 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>

在将送货地址复制到帐单邮寄地址中设置复选框enter image description here

相关问题
最新问题