首页 文章

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

提问于
浏览 次
13

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

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

首先是结算地址

enter image description here

现在我需要更改它像发货地址显示我检查复选框它显示我的账单地址 . 见下图 .

先送货地址

enter image description here

我需要这个改变而不改变主题文件夹中的任何woocommerce文件意味着验证和jquery效果也是需要的 .

可以任何一个PLZ帮助我做到吗？

提前谢谢

code snippets: this is not solution so plz do not write this because it change place not functionality and check box. plz see screenshot that i post.

首先是结算地址

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

jquery ajax wordpress wordpress-plugin woocommerce

3 回答

  • 3

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

    脚步：

    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>

    NOTE ：此解决方案仅适用于子主题 .

    回复于
  • 4

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

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

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

    回复于
  • 1

    如果您已经知道如何使用woocommerce模板，那么最简单的方法就是在不必重新编写所有后端代码而不必重写jquery的情况下实现这一点，就是制作三个woocommerce模板的副本进行修改 . This is for modifications to the default woocommerce templates.

    checkout> form-checkout.php

    checkout> form-billing.php

    checkout> form-shipping.php

    Changes to make on each template:

    checkout> form-checkout.php

    将第40行的 <?php do_action( 'woocommerce_checkout_billing' ); ?> 移至第44行，并将第44行的 <?php do_action( 'woocommerce_checkout_shipping' ); ?> 移至第40行 .

    Now on the other two templates there will be some code swapping.

    来自checkout> form-billing.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' ); ?>

    This is where the swapping of code comes in:

    现在切割第27行到第35行并将其粘贴到第25行的checkout> form-shipping.php . Do not loose your place on lines on checkout> form-shipping.php您将需要剪切第25行到第33行并将其粘贴到checkout> form-billing.php在第27行 .

    NOTE: this exchange of code on both templates

    应该在checkout> form-billing.php模板上方 <?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?> 之上，在checkout> form-shipping.php模板上方 <?php do_action( 'woocommerce_before_checkout_shipping_form', $checkout ); ?> 之上 .

    现在从checkout> form-billing.php剪切第55到第82行并粘贴到第77行的checkout> form-shipping.php .

    现在从checkout> form-shipping.php剪切第52行到第54行并粘贴到第53行的checkout> form-billing.php. This must be between what is on line 52 and 53 of the default template.

    最后一步是更改输入中的文本，该复选框现在应该在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>

    Last note about the woocommerce jquery that makes the fields appear from the checkbox

    jquery正在使用以下元素，现在应该在checkout> form-billing.php第35行. <div class="shipping_address">

    回复于

相关问题