Ad
Add Dropdown List On WooCommerce Checkout Page When Coupon Is Applied
I created a function to add a drop-down field before payment info at checkout page.
The following is working when i tried the add_action
function.
add_action('woocommerce_review_order_before_payment', 'add_store_selection');
function add_store_selection() {
$content .= '<div id="store-pickup-select">';
$content .= '<select><option selected="selected">Choose one</option>';
/* Here i will get a list of option value from another function */
$content .= '</select>';
$content .= '</div>';
echo $content;
}
But what I need is I only want this drop-down to show when coupon code is applied. I remove the add_action('woocommerce_review_order_before_payment', 'add_store_selection');
Then I tried this:
function add_store_list() {
do_action( 'woocommerce_review_order_before_payment');
}
add_action( 'woocommerce_applied_coupon', 'add_store_list');
The drop-down list appeared on top of billing details, not the in woocommerce_review_order_before_payment
position
How can I make the drop-down appear at before payment section when coupon code is clicked?
Ad
Answer
You can use a checkout JS event in the WooCommerce frontend, in this case
$( document.body ).trigger( 'applied_coupon_in_checkout' );
$( document.body ).trigger( 'removed_coupon_in_checkout' );
So you get:
function action_woocommerce_review_order_before_payment() {
$content = '<div id="store-pickup-select">';
$content .= '<select>';
$content .= '<option selected="selected">Choose one</option>';
$content .= '<option value="my-option">My option</option>';
$content .= '</select>';
$content .= '</div>';
echo $content;
}
add_action( 'woocommerce_review_order_before_payment', 'action_woocommerce_review_order_before_payment', 10, 0 );
// jQuery code
function action_wp_footer() {
if ( is_checkout() && ! is_wc_endpoint_url() ) {
?>
<script type="text/javascript">
jQuery(function($) {
// Default
$( '#store-pickup-select' ).hide();
$( document.body ).on( 'applied_coupon_in_checkout removed_coupon_in_checkout', function( event ) {
// With no parameters, the .toggle() method simply toggles the visibility of elements:
$( '#store-pickup-select' ).toggle();
});
});
</script>
<?php
}
}
add_action( 'wp_footer', 'action_wp_footer' );
Ad
source: stackoverflow.com
Related Questions
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → when i send data with ajax(jquery) i don't find the values in controller without form in laravel 5.1
- → DropzoneJS & Laravel - Output form validation errors
- → Knockout JS - How to return empty strings for observable fields
- → How to replace *( in a string
- → Get the calling element with vue.js
- → Sent Variable to Controller via Ajax in Blade
- → AJAX folder path issue
- → Onclick with argument causes javascript syntax error
- → KNockout JS - Automatic reload of ajax call
Ad