优惠券代码是单独的形式,因此您需要按照以下步骤操作:
为了实现这一举措,我将使用 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');