How can I detect that Remove button/link clicked to remove the coupon from the checkout page in woocommerce.
You can use jQuery to live detect when "remove coupon" is clicked this way:
add_action( 'wp_footer', 'coupon_removed_script' );
function coupon_removed_script() {
if( is_cart() || ( is_checkout() && ! is_wc_endpoint_url() ) ):
?>
<script type="text/javascript">
jQuery(function($){
$('a.woocommerce-remove-coupon').on( 'click', function(){
console.log('click remove coupon');
alert('click remove coupon');
});
})
</script>
<?php
endif;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
And you can also use the following code to do something when coupon is removed (where $coupon_code is the removed coupon code argument):
add_action("woocommerce_removed_coupon", 'coupon_removed_action');
function coupon_removed_action( $coupon_code ) {
// Do something
}
Code goes in function.php file of your active child theme (or active theme).
Related
How can I hide a specific button, based on the stock status of my product?
The plugin is creating this class:
function wdm_pefree_init() {
// phpcs:ignore WordPress.NamingConventions.ValidFunctionName.FunctionNameInvalid
if ( ! class_exists( 'Product_Enquiry_For_Woocommerce', false ) ) {
include_once WDM_PE_PLUGIN_PATH . '/includes/class-product-enquiry-for-woocommerce.php';
}
Product_Enquiry_For_Woocommerce::instance();
}
I only want to display this button the single product page of every product that is in backorder, but I can't get my code to work.
I'm not that great with PHP, so I'm trying to adapt some other code I have on my functions.php file, but without any luck.
Any help would be great, thanks!
I've tried this code:
add_filter('woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2);
function wcs_custom_get_availability($availability, $_product) {
// Remove Enquiry Button
if (!$_product->is_in_stock()) {
remove_action('Product_Enquiry_For_Woocommerce');
}
return $availability;
}
I also see that the css class for the button is .pe-show-enq-modal, but I can't do a conditional "visibility: hidden" that only works for backorder products.
What you are looking for is this:
add_action( 'woocommerce_single_product_summary', 'remove_enquiry_button_if_out_of_stock', 30 );
function remove_enquiry_button_if_out_of_stock() {
global $product;
if ( ! $product->is_in_stock() ) {
remove_action( 'woocommerce_single_product_summary', array( Product_Enquiry_For_Woocommerce::instance(), 'enquiry_button' ), 25 );
}
}
Or Via CSS :
.product.out-of-stock .pe-show-enq-modal {
display: none;
}
The only way I got this (kinda) working was by using this JS:
function remove_enquiry() {
?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
if($(".in-stock").length)
$(".pe-show-enq-modal").hide();
});
})(jQuery);
</script>
<?php
}
add_action('wp_head', 'remove_enquiry');
You can see it here.
But if you notice, it has a delay executing the JS, because when the page loads, the button still shows up for a brief moment (otherwise it seems to be working ok).
I use a code that changes the text and style of the "Add to Cart" button for a product if the item is already in the cart. Many thanks to 7uc1f3r for this.
/* for single product */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'single_product_button_text' );
function single_product_button_text( $text ) {
if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) {
$text = 'Product in cart';
}
return $text;
}
/* for archive/category pages */
add_filter( 'woocommerce_product_add_to_cart_text', 'products_button_text', 20, 2 );
function products_button_text( $text, $product ) {
if(
$product->is_type( 'simple' )
&& $product->is_purchasable()
&& $product->is_in_stock()
&& WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) )
) {
$text = 'Product in cart';
}
return $text;
}
function action_wp_footer() {
?>
<script>
jQuery(document).ready(function($) {
var selector = '.add_to_cart_text:contains("Product in cart")';
// Selector contains specific text
if ( $( selector ).length > 0 ) {
$( selector ).addClass( 'product-is-added' );
} else {
$( selector ).removeClass( 'product-is-added' );
}
});
</script>
<?php
}
add_action( 'wp_footer', 'action_wp_footer' );
After adding a product to the cart, I have to refresh the page each time to get new text and button style.
UPDATE
I also used Relabel "add to cart" button after add to cart in WooCommerce 2nd function code to change the text and style of the button using AJAX. The text changes, but all styles break.
Unfortunately, adding styles on the echo '<div class="add_to_cart_text">' . $new_text . '</div>'; line doesn't work.
Any help?
As your website shop and archives pages are very custom (doesn't have the default WooCommerce html structure) you need a very custom jQuery code made for your website.
Your Ajax add to cart button has by default this output html example:
<a href="?add-to-cart=1234" rel="nofollow" data-quantity="1" data-product_id="1234" class="add-to-cart-grid btn-link nasa-tip add_to_cart_button ajax_add_to_cart product_type_simple nasa-tiped" data-product_sku="AB123" data-tip="Add to Cart">
<span class="add_to_cart_text">Add to Cart</span>
<i class="cart-icon pe-7s-cart"></i>
</a>
And you need on Ajax added to cart to have the following output html (example):
<a href="?add-to-cart=1234" rel="nofollow" data-quantity="1" data-product_id="1234" class="add-to-cart-grid btn-link nasa-tip add_to_cart_button ajax_add_to_cart product_type_simple nasa-tiped" data-product_sku="AB123" data-tip="Product in cart">
<span class="add_to_cart_text product-is-added">Product in cart</span>
<i class="cart-icon pe-7s-cart"></i>
</a>
So know we can manage the jQuery code that is needed for your custom Ajax add to cart buttons on shop and archive pages…
Try the following that will change the text on your custom Ajax add to cart button on added_to_cart WooCommerce jQuery event:
add_action( 'wp_footer', 'ajax_button_text_js_script' );
function ajax_button_text_js_script() {
$text = __('Product in cart', 'woocommerce');
?>
<script>
jQuery(function($) {
var text = '<?php echo $text; ?>', $this;
$(document.body).on('click', '.ajax_add_to_cart', function(event){
$this = $(this); // Get button jQuery Object and set it in a variable
});
$(document.body).on('added_to_cart', function(event,b,data){
var buttonText = '<span class="add_to_cart_text product-is-added">'+text+'</span><i class="cart-icon pe-7s-cart"></i>';
// Change inner button html (with text) and Change "data-tip" attribute value
$this.html(buttonText).attr('data-tip',text);
});
});
</script>
<?php
}
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
I have something similar implemented on a website.
What might help is
.on('input change', function() { // Your code here }).change();
this updated my product page in real time and I believe you should be able to find a way to implement it to change the text on the add to cart button.
I am new to JavaScript so please bear with me and I hope my answer was at least a little helpful.
In Woocommerce checkout form im trying to hide billing_city and billing_address_1 fields first and after I fill the fields postcode and housenumber the other fields (address_1 and city) has to show.
This is the script, but I does not work well and I dont know what I do wrong:
?>
<script type="text/javascript">
jQuery('input#billing_housenumber').change(function(){
if (this.checked) {
jQuery('#billing_city').fadeIn();
jQuery('#billing_city input').val('');
} else {
jQuery('#billing_city').fadeOut();
}
});
</script>
<?php
Any help is appreciated.
Update 2
There is some errors, mistakes and missing things in your code. Also you should hooked it in a function (or register it as an external file).
I have added at the end a function that add the billing "housenumber" field in checkout (just for testing purpose)…
In the code below I am using some CSS inline styles to hide the billing city and address_1 fields and to show them when they have an additional selector class "on".
Here is a hooked function that will enable this code in checkout only:
add_action( 'wp_footer', 'custom_checkout_script' );
function custom_checkout_script() {
// Only checkout page
if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;
// CSS Styles (Hidding fields)
?>
<style>
#billing_city_field, #billing_address_1_field { display:none !important;}
#billing_city_field.on ,#billing_address_1_field.on { display:block!important;}
</style>
<?php
// Jquery script
?>
<script type="text/javascript">
jQuery( function($){
var a = 'input#billing_housenumber',
b = 'input#billing_postcode',
c = '#billing_city_field,#billing_address_1_field';
// On start
if( $(a).val() != '' && $(b).val() != '' && ! $(c).hasClass('on') ){
$(c).css('display','none !important').addClass('on').show();
console.log('start');
}
// On change: If housenumber and postcode fields are filled, we display other hidden fields
$(a+','+b).on( 'change', function(){
if ( $(a).val() != '' && $(b).val() != '' && ! $(c).hasClass('on') ) {
$(c).css('display','none !important').addClass('on').show( 500 );
console.log('change - in');
} else if( ( $(a).val() == '' || $(b).val() == '' ) && $(c).hasClass('on') ) {
$(c).hide( 200, function(){
$(c).removeClass('on').css('display','block')
});
console.log('change - out');
}
});
});
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
This code has been tested with this temporary additional code, that generates the checkout "housenumber" text field (just for testing purpose):
// Add custom checkout field
add_action( 'woocommerce_billing_fields', 'my_custom_checkout_field' );
function my_custom_checkout_field( $fields ) {
$fields['billing_housenumber'] = array(
'class' => array('form-row-wide'),
'label' => __('Housenumber ?'),
'required' => false,
'clear' => true
);
return $fields;
}
Code goes in function.php file of your active child theme (or active theme).
Related: Show or hide html element on chosen shipping method change in Woocommerce
There is one step left. I don't see the housenumber (after a customer purchase a product). So you don't see the housenumber in the mail or in invoice.
This is in the e-mail but I don't see more detail for address:
/**
* #hooked WC_Emails::customer_details() Shows customer details
* #hooked WC_Emails::email_address() Shows email address
*/
do_action( 'woocommerce_email_customer_details', $order, $sent_to_admin, $plain_text, $email );
In Woocommerce, is there a way to display a message to a customer when they add the first item to the basket?
I want to warn customers that they have 30 minutes to shop before their cart is emptied.
This is not so simple as you have:
NORMAL "Add to cart" buttons (Not AJAX)
AJAX enabled "Add to cart" buttons (If it's enabled in Woocommerce settings)
So below you will find 2 hooked functions for both (where you will set your message):
// For NORMAL add to cart
add_filter( 'woocommerce_add_to_cart_validation', 'custom_message_add_to_cart', 20, 3 );
function custom_message_add_to_cart( $passed, $product_id, $quantity ) {
if( WC()->cart->is_empty() ){
$message = __("1st cart item message here", "woocommerce");
wc_add_notice( $message, 'notice' );
}
return $passed;
}
// For AJAX add to cart (if enabled)
add_action( 'woocommerce_shortcode_before_product_cat_loop', 'custom_print_message', 11 );
add_action( 'woocommerce_before_shop_loop', 'custom_print_message', 11 );
add_action( 'woocommerce_before_single_product', 'custom_print_message', 11 );
function custom_print_message() {
if( WC()->cart->is_empty() ){
$message = __("1st cart item message here", "woocommerce");
// HERE BELOW, replace clothing' with your product category (can be an ID, a slug or a name)
echo '<div class="woocommerce-info hidden" style="display:none;">' . $message . '</div>';
}
?>
<script type="text/javascript">
jQuery( function($){
$('body').on('added_to_cart', function(){
$('.woocommerce-info.hidden').show('fast');
});
});
</script>
<?php
}
Code goes in function.php file of the active child theme (or active theme). Tested and Works.
Which file do I need to edit if I don’t want user to click the link to apply the coupon code?
In simple, I want no LINK to be clicked on.
I want the apply coupon appear below the text "Have a coupon?" so that user can ALWAYS see the section.
Updated
This can be done very easily using dedicated woocommerce_checkout_coupon_message filter hook:
add_filter( 'woocommerce_checkout_coupon_message', 'custom_checkout_coupon_message', 20, 1 );
function custom_checkout_coupon_message( $message ) {
?>
<script type='text/javascript'>
jQuery(document).ready( function($){
setTimeout(function(){
$('form.checkout_coupon').css('display','block');
}, 300);
});
</script>
<?php
// HERE your custom message
return __( 'Have a coupon?', 'woocommerce' ) . ' <a class="showcoupon-off">' . __( 'Below you can enter your coupon code', 'woocommerce' ) . '</a>';
}
Code goes in function.php file of the active child theme (or active theme). Tested and works.