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();
}
});
Related
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
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'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 '';
}
I have use a custom button for uploading images to wordpress media. But I dont want the "mediaLibraryTitle" in the popup. I have done this by using this code snippet.
function remove_medialibrary_tab($tabs) {
if ( current_user_can( 'administrator' ) ) {
unset($tabs["mediaLibraryTitle"]);
}
return $tabs;
}
add_filter('media_view_strings', 'remove_medialibrary_tab');
But when i test it is only removing the tab title, But i want remove the tab completely. Also i want to select the "Upload Files" tab by default. Is there any custom function to remove the tab or it can be possible by wp.media function in JS. If yes can you give any idea.
Thank you.
I searched a lot but didn't find any solution that work for me.
I am developing a plugin for wordpress that will work only with woocommerce. So i want that when my order status is in pending state i want to hide complete action shortcut on orders listing page.
In the above picture i want to hide middle button when my order is in pending state. I want to do it in plugin.
Any suggestion.
Thanks in advance.
Yes this can be done using 'woocommerce_admin_order_actions' filter and adding a function to a filter.
Code to be added in you plugin:
add_filter('woocommerce_admin_order_actions','wdm_verify_product_limitation',5,2);
function wdm_verify_product_limitation( $actions, $the_order ){
if ( $the_order->has_status( array( 'pending','on-hold') ) ) {
unset($actions['complete']);
}
return $actions;
}
Here i am checking if the order is in 'pending' or 'on-hold' state then don't show the Complete button for that order.(in your case remove 'on-hold' from the code )
Have tested the same. Do let me know if this works for you