Trigger event after change of variation WooCommerce - wordpress

I have a price block for every single product page in the WooCommerce project. Like Cash Price, COD Price, PayPal, Stripe, etc.
Here what I want is to change this pricing based on the selected variation.
Ex: I have capacities like 32GB, 64GB, 128GB. So, change this price block based on the selected variation.
Therefore I tried to add an action where I can trigger the event when variations were added. But I can't see that action is working. This is my action code to trigger when variation is selected and price changes. But I can't see this alert in firing.
function change_pricing_block() {
?>
<script>
$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
alert('variation');
});
</script>
<?php
}
add_action( 'wp_footer', 'change_pricing_block' );
Can anybody help me with this?
Thanks in advance

Related

Refreshing mini-cart when following the link to checkout/order-received

Auto-updating the cart on the site using this action works well:
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").removeAttr("disabled").trigger("click");
});
</script>
<?php
endif;
}
The cart and the ordering page have been united into one (just "cart")
When switching from the "cart" page to the "checkout/order-received" page, the mini-cart does not become zero. Only updating manually makes the mini-basket null. (Basically, you have already finished with the order, getting thanked for your order, yet the miniature is still not refreshed.)
Is there any way to fix it? I use WooCommerce 6.5.1. Payment is disabled on the site.

Woocommerce show/hide add_to_cart button for different variations

My client has variable products where only some of the variations are purchasable.
Simple example:
Red tshirt:
small (purchasable)
medium (not purchasable)
large (not purchasable)
The catch is we can't use the stock level or price to control whether it's purchasable or not.
I've created a custom checkbox purchasable_variation which is attached to each variation.
I'm stuck at how to use this field to show/hide the add to cart button.
Thanks in advance.
Figured it out. You can then use JS to listen for a variation change, and then test for the custom checkbox value.
$( '.single_variation_wrap' ).on( 'show_variation', function ( event, variation ) {
if ( variation['purchasable_variation'] === 'yes' ) {
$('.add_to_cart_button').show();
} else {
$('.add_to_cart_button').hide();
}
});

WooCommerce - Open the new product that the category is selected

I've been searching all over the internet for hours how to automatically assign a category to new products. When you open the new product that the category is selected.
I have two product categories (Books and FIlms) and I would like that every time we open a new product, Books are selected. In this way it will directly show the custom fields of that product category and we will speed up the creation process.
It's possible?
thanks
UPDATE
I found a code that seems to work with the posts. Any idea how I can adapt the code for products and where should I put the category I care about?
https://wordpress.stackexchange.com/questions/243462/automatically-select-categories-on-new-post-based-on-get-value
When it comes to the checkbox that should already be checked when creating a new product, you can use jQuery
Replace in-product_cat-15 with in-product_cat-{YOUR-CAT-ID}
// Define the admin_head callback
function action_admin_head() {
global $post, $pagenow;
// Only on new product pages
if( $pagenow != 'post-new.php' ) return;
?>
<script>
jQuery(function($){
$( '#in-product_cat-15' ).attr( 'checked', true );
});
</script>
<?php
}
add_action( 'admin_head', 'action_admin_head', 10, 0 );
In product categories click the Make default action of your desired category to make it as default category. For more details refer the image:
You can visit this page using this URL (replace the domain with your domain):
www.example.com/wp-admin/edit-tags.php?taxonomy=product_cat&post_type=product

javascript woocommerce form validation on add to cart buton before adding to cart

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 );

How to reset all fields when adding to WooCommerce Cart

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 '';
}

Resources