I'm developing a site with WooCommerce and have used the plugin Product Addons to add extra fields of text to the item being purchased (name, email address, phone number, etc). When someone clicks on "Add to Cart", the site currently adds the product to the cart, refreshes the page, but the previous data remains in the fields. I want to reset all the fields and make them empty after the product has been added.
I tried using this function:
( function($) {
$( document.body ).on( 'added_to_cart', function() {
$('input').val(''); }
);
} ) ( jQuery );
Any suggestions?
If the page literally refreshes itself then it is not at all standard. It was done just to update the mini cart at the top right corner of your menu and products are being added through ajax. In this case you can't empty all fields on some event because the page is being refreshed, what you have to do is write you code under document.ready function, perform $.each function on the common class or input and empty the input fields.
Try this action hook in your plugin or theme functions.php file
add_filter( 'woocommerce_checkout_get_value', 'misha_clear_checkout_fields_vals' );
function misha_clear_checkout_fields_vals($input){
return '';
}
Related
We want to hide "Have a coupon? Add one..." on WooCommerce checkout, if a coupon is already added OR when a customer add a coupon on the checkout page.
Currently we habe this code below and it works when a customer enters a coupon on the cart page and then navigate to the checkout page. In this case, the "Have a coupon? Add one..." message is not visible. If no coupon in added on the cart page the message is visible.
This is working fine! But it does not work when a customer adds a coupon on the checkout page.
1.) We get the message "Coupon added" But the coupon message to add one is still visible AND also the coupon is not calculated in the order table. => After a page refresh is everything correctly.
2.) When a coupon is removed by the customer on checkout, then we get the message that the coupon is removed, but the discount is still visible in the order table. => After a page refresh it displays everything right again.
So now I'm trying to refresh the page after a coupon was added or removed. But I have problems to get the right event. I guess we must do this via js? Or is there a PHP approach?
add_filter( 'woocommerce_coupons_enabled', 'woocommerce_coupons_enabled_checkout' );
function woocommerce_coupons_enabled_checkout( $coupons_enabled ) {
global $woocommerce;
if ( ! empty( $woocommerce->cart->applied_coupons ) ) {
return false;
}
return $coupons_enabled;
}
Your code should be like this
add_filter( 'woocommerce_coupons_enabled', 'woocommerce_coupons_enabled_checkout' );
function woocommerce_coupons_enabled_checkout( $coupons_enabled ) {
if(is_checkout()){
global $woocommerce;
if ( ! empty( $woocommerce->cart->get_applied_coupons() ) ) {
$coupons_enabled = false;
}
}
return $coupons_enabled;
}
Edit: okay you need to check if page is checkout or cart then run the script. I have added condition in code.
Objective:
I would like the customer to click on a button, add an item with quantity = 1 to cart, and route to checkout page automatically.
What I did:
I'm using Elementor to add a button with a href value of:
https://fakeurl.com/checkout/?add-to-cart=59
Problem:
Once I click the button, it will route to the checkout page, however it will add 2 quantity instead of one to the cart.
What I've tried:
Explicitly specify the quantity count in the href:
https://fakeurl.com/checkout?add-to-cart=59&quantity=1
But I'm getting the same results.
My checkout page is just simple page with 2 shortcodes namely woocommerce_cart & woocommerce_checkout:
Any idea why? Do I need to empty the cart before the aforementioned button is pressed?
Use your link structure as you already do > ?add-to-cart=59&quantity=1 and add below code in functions.php in your theme to just do checking
the only thing this peace of code do is to loop your cart to see if this product is already there .. and if it is - it sets $valid var on false
function is_product_in_cart( $valid, $product_id, $quantity) {
global $woocommerce;
if($woocommerce->cart->cart_contents_count == 0) return true;
foreach ( $woocommerce->cart->get_cart() as $key => $values ) {
$_product = $values['data'];
$id = $_product->id ;
if( $product_id == $id ) $valid = false;
}
return $valid;
}
add_filter( 'woocommerce_add_to_cart_validation', 'is_product_in_cart', 10, 3 );
Woocommerce default flow is that it will add the quantity to the cart whenever you add an item that is already in the cart.
Empty your cart whenever a new product is added to the cart so that only one remains in the cart.
In most cases the quantity is doubled because you are being redirected.
So the quantity is added and after the redirect the quantity is added again.
The reasons for this could be a couple of the things.
Theme or wordpress permalinks setting are adding or removing // in the links
Your checkout page is not set in woocommerce settings (woocommerce->advanced settings->Page settings)
How to check if you are being redirected (chrome)
At the top of Chrome's inspector (in the Network tab) is a checkbox which says Preserve log. Enable this option. Now it doesn't matter at all how the page navigates, the inspector will keep all log history -- including the redirect response.
(found here: See full redirect path and HTTP status code in Chrome)
Possible solutions
“Enable AJAX add to cart buttons on archives” (WooCommerce –> Settings –> Products -> General)
found here (https://www.businessbloomer.com/woocommerce-custom-add-cart-urls-ultimate-guide/)
This sometimes help when having custom pages for cart and checkout.
Disable "Redirect to the cart page after successful addition" under WooCommerce > Settings > Products.Because you are linking to the checkout page, this wil redirect you again to the cart page.
I've added a couple new fields to the date-picker.php template in WooCommerce Bookings and need to trigger the AJAX recalculation of the booking cost on the product page when these fields are updated.
Currently this recalculation is triggered when the standard fields in date-picker.php are updated. However, I will be using the additional fields to recalculate the duration and booking cost so I need this AJAX recalculation triggered when updates are made to the new fields as well.
How can I trigger the AJAX recalculation? I have tried simply triggering a change event on one of the standard fields, but that doesn't seem to work.
I had the same issue. If it helps someone in the future, heres my work around :
Go to
/wp-content/plugins/woocommerce-bookings/templates/single-product/add-to-cart/booking.php
This is the template for the single product booking form.
You can then move one of the actions such as <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?> (or create your own action) within the <div id="wc-bookings-booking-form"/>.
Now add a custom field or code to this action (I used wc-fields-factory). When you change a field value within the booking form the AJAX recalculation is triggered.
You can hook into this trigger in your functions.php file (within your theme) to alter the cost based on the custom fields you have added like so :
add_filter( 'booking_form_calculated_booking_cost', 'my_booking_cost', 10, 3 );
function my_booking_cost( $booking_cost, $booking, $posted ) {
/* use fields here to show a new booking cost*/
$my_time = $posted[ <name of custom field> ]; //access field within booking form
$booking_cost = 1; //whatever your calc is
return $booking_cost;
}
I have a custom page that displays a product with variations, a custom field and add to cart button.
I need to trigger some validation in javascript when the add to cart button is clicked, but if the form doesn't validate, then add to cart can't be performed.
I'd like to know if it's possible to achieve.
First I tried to do as explained here :
WooCommerce add to cart validation: prevent add to cart
It's working great and I'd like to be able to use this code but for me it can't be because :
- I'm using a custom page and not the usual woocommerce product page
- This means that after validation, I'm redirected to the standard woocommerce page which is blank
That's why I really need to use Javascript to perform this:
- javascript or jquery function triggered on the add to cart click
- then the function checks it everything is ok
- if yes, then product can be added to cart
- if no, an alert is displayed and the user remains on the same page, nothing added to cart.
I tried to be as clear as possible.
Hoping I can get some help.
Thanks a lot.
Please try this way:
function so_validate_add_cart_item( $passed, $product_id, $quantity, $variation_id = '', $variations= '' ) {
<script>
jQuery(function($){
jQuery(document).on('click', '.single_add_to_cart_button', function (e) {
e.preventDefault();
// your validation here
});
});
</script>
}
add_filter( 'woocommerce_add_to_cart_validation', 'so_validate_add_cart_item', 10, 5 );
I need to create a contact form (to enquire about the product) right before the add-to-cart button on the single product page.
However WooCommerce removes my form's form tags from it making it impossible to use. How to prevent WooCommerce to do so?
some plugin maybe? Or maybe the editor strips out certain tags by default. You can use a plugin that allows you to insert html through shortcodes
You can try this plugin to insert html as shortcodes
You would create a shortcode corresponding to form. And insert it into your post
http://wordpress.org/plugins/insert-html-snippet/
I ended up adding my extra form fields inside the existing form then successfully submitting those fields using the following jQuery code:
$( '#my_form input[type=submit]' ).click(function() {
var params = $( '#my_form' ).find( 'input' ).serialize();
jQuery.ajax({
url: x,
type: 'POST',
data: params,
success: function (data) {
jQuery( '#some_div' ).html(data);
}
});
});
As for when submitting the existing, normal form, then those fields are simply not taken into account by WooCommerce, so no issue here.