【问题标题】:Move coupon field after checkout payment in Woocommerce?在 Woocommerce 中结帐付款后移动优惠券字段?
【发布时间】:2017-10-30 09:22:03
【问题描述】:

我想在结帐付款后移动优惠券文件。这是我已经尝试过的一切准备就绪:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form');
add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form' );

现在是结帐表格之后。

谢谢!

【问题讨论】:

  • 我想把它加到@LoicTheAztec的总数下面

标签: php wordpress woocommerce hook-woocommerce


【解决方案1】:

你应该试试这个:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form' );

但不确定它是否能正常工作……您还需要自定义 Woocommerce 模板 checkout/form-coupon.php via your active theme...

【讨论】:

    【解决方案2】:

    优惠券代码是单独的形式,因此您需要按照以下步骤操作:

    为了实现这一举措,我将使用 jQuery UI 对话框库来帮助我实现对话框功能。在functions.php中,添加以下代码(在这种情况下,如果您的网站还没有包含jQuery UI Dialog库)。

    function cw_scripts() {
        wp_enqueue_script('jquery-ui-dialog');
    }
    add_action('wp_enqueue_scripts', 'cw_scripts');
    

    接下来,创建一个包含优惠券代码所有内容的 jQuery 模型对话框实例。定位模型对话框,使其锚定到结帐表单内的 HTML 元素。使用现有的 WooCommerce 过滤器(或操作)将 HTML 元素放置在结帐表单中的所需位置。 在 functions.php 中,添加以下代码:

    function cw_show_coupon_js() {
        wc_enqueue_js('$("a.showcoupon").parent().hide();');
        wc_enqueue_js('dialog = $("form.checkout_coupon").dialog({
                           autoOpen: false,
                           width: 500,
                           minHeight: 0,
                           modal: false,
                           appendTo: "#coupon-anchor",
                           position: { my: "left", at: "left", of: "#coupon-anchor"},
                           draggable: false,
                           resizable: false,
                           dialogClass: "coupon-special",
                           closeText: "Close",
                           buttons: {}});');
        wc_enqueue_js('$("#show-coupon-form").click( function() {
                           if (dialog.dialog("isOpen")) {
                               $(".checkout_coupon").hide();
                               dialog.dialog( "close" );
                           } else {
                               $(".checkout_coupon").show();
                               dialog.dialog( "open" );
                           }
                           return false;});');
    }
    add_action('woocommerce_before_checkout_form', 'cw_show_coupon_js');
    

    接下来,要在表单中显示优惠券字段,请添加“单击此处输入您的代码链接”。此代码将添加客户详细信息和订单详细信息部分之间的链接。为了查看此链接的其他位置,您可以查看结帐页面上的其他 WooCommerce 操作和过滤器(woocommerce_checkout_fields 或 woocommerce_before_checkout_billing_form)。如果您找不到正确的过滤器或方法,您可以覆盖默认的 WooCommerce 结帐页面模板并在您想要的位置找到链接。

    function cw_show_coupon() {
        global $woocommerce;
    
        if ($woocommerce->cart->needs_payment()) {
            echo '<p style="padding-bottom: 5px;"> Have a coupon? <a href="#" id="show-coupon-form">Click here to enter your coupon code</a>.</p><div id="coupon-anchor"></div>';
        }
    }
    add_action('woocommerce_checkout_after_customer_details', 'cw_show_coupon');
    

    【讨论】:

    • 谢谢你的回答,但我已经准备好了,我想把它加到总数下面
    • 我尝试实现这个,但是 Chrome Inspector 报告 ncaught TypeError: $(...).dialog is not a function at HTMLDocument. ((index):1309) at i (jquery .js?ver=1.12.4:2) 在 Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2) 在 Function.ready (jquery.js?ver=1.12.4:2) 在HTMLDocument.K (jquery.js?ver=1.12.4:2) 第 1309 行是 dialog = $(function () { $("form.checkout_coupon").dialog({
    猜你喜欢
    • 2021-02-17
    • 2021-04-17
    • 2020-11-03
    • 2016-02-25
    • 2014-09-08
    • 2017-07-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多