admin管理员组文章数量:1410682
After reading through the WooCommerce documentation for hooks, I can't find the right hook to place things after the checkout sidebar. Can someone tell me which hook do I need to use in that spot. Please see attached image below
So far I tried woocommerce_after_checkout_form and woocommerce_checkout_after_order_review and my coupon field is still not getting placed in the right spot. I don't know what to use or search for
After reading through the WooCommerce documentation for hooks, I can't find the right hook to place things after the checkout sidebar. Can someone tell me which hook do I need to use in that spot. Please see attached image below
So far I tried woocommerce_after_checkout_form and woocommerce_checkout_after_order_review and my coupon field is still not getting placed in the right spot. I don't know what to use or search for
2 Answers
Reset to default 2There are some important things to point out that will help you get somewhere hopefully close.
First, the coupon code entry is a form separate from the checkout form. You cannot place one form inside another as that would conflict the submission process (essentially, you'd be submitting the wrong data to the wrong handling process).
Your approach of trying to handle it with action hooks is a good initial step. However, you probably will need to go the extra step of creating a checkout template that better suits your wishes.
A nice feature of WooCommerce is that you're not "locked in" to a specific layout. There are customizable templates for just about every aspect of layout in WC, including this one - the checkout form.
The template for the checkout form is form-checkout.php.
The first thing to do is determine if your theme is already applying a custom template. Look for the following in your theme's root folder: /woocommerce/checkout/form-checkout.php.
If your theme has this file, great. Use that. If not, you'll need to set up your own custom template from the original that WC packages. WC's default templates are located in the WooCommerce plugin folder: /templates/checkout/form-checkout.php
Copy that to your theme as `/woocommerce/checkout/form-checkout.php'
Hopefully, you're using a child theme to store any and all customizations.
There is additional information on working with WC templates here: https://docs.woocommerce/document/template-structure/
Once you've set up a custom checkout template, then you can go about the business of working on your layout. You'll notice that the template (if you're starting from the default) will contain the actions you were talking about (and a few more):
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review_heading
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- woocommerce_checkout_after_order_review
- woocommerce_after_checkout_form
On one hand, you should not only leave these in there, but make certain they are included because plugins and WooCommerce itself uses these to apply elements to the form. But on the other hand, there is not a specific requirement for you to keep them where they are in the default template. If you need to adjust the HTML markup to get what you want, you can move these as needed and/or apply HTML in the template as needed.
Ultimately, I think that's the answer to your question. You will need to work directly with the HTML in the template (and any CSS edits/changes/additions) to work out your specific layout. And that's exactly what templates are there for.
You can not use form with in form. beacuse apply coupon functionality is a form itself so you can not place coupon filed in checkout form. if you want to move coupon field below place order button you have to use alter solution. you can take reference from this link. here is example of How to move the woocommerce coupon. place below code in your active theme's functions.php file. You can design popup using CSS as per your theme.
I have tested and it is working fine. popup link : https://prnt.sc/qa69cw coupon popup : https://prnt.sc/qa69g4
1. enqueue jQuery UI js and css for popup
function ttp_scripts() {
wp_enqueue_style( 'wp-jquery-ui-dialog' );
wp_enqueue_script('jquery-ui-dialog');
}
add_action('wp_enqueue_scripts', 'ttp_scripts');
2. Add coupon filed in popup
/**
* Processing before the checkout form to:
* 1. Hide the existing Click here link at the top of the page.
* 2. Instantiate the jQuery dialog with contents of
* form.checkout_coupon which is in checkout/form-coupon.php.
* 3. Bind the Click here link to toggle the dialog.
**/
function ttp_wc_show_coupon_js() {
/* Hide the Have a coupon? Click here to enter your code section
* Note that this flashes when the page loads and then disappears.
* Alternatively, you can add a filter on
* woocommerce_checkout_coupon_message to remove the html. */
wc_enqueue_js('$("a.showcoupon").parent().hide();');
/* Use jQuery UI's dialog feature to load the coupon html code
* into the anchor div. The width controls the width of the
* modal dialog window. Check here for all the dialog options:
* http://api.jqueryui/dialog/ */
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: {}});');
/* Bind the Click here to enter coupon link to load the
* jQuery dialog with the coupon code. Note that this
* implementation is a toggle. Click on the link again
* and the coupon field will be hidden. This works in
* conjunction with the hidden close button in the
* optional CSS in style.css shown below. */
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', 'ttp_wc_show_coupon_js', 10);
3. use woocommerce_review_order_after_payment for place link below place order button
/**
* Show a coupon link below the place order section.
* This is the 'coupon-anchor' div which the modal dialog
* window will attach to.
**/
function ttp_wc_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 code</a>.</p><div id="coupon-anchor"></div>';
}
}
# use this hook for place link below place order button
add_action('woocommerce_review_order_after_payment', 'ttp_wc_show_coupon', 10);
本文标签： Which WooCommerce hook do I need to use to place the coupon field after the checkout sidebar
版权声明：本文标题：Which WooCommerce hook do I need to use to place the coupon field after the checkout sidebar 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744906594a2631661.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论