my product has two variation attributes. The variations are different combinations of the attributes, but not all combinations are available. Some customers want to order different variations of the same product. Currently, they always have to click on the “clear” button in the product page, so they can start choosing again.
I have currently no AJAX active, the page is reloading after pressing “Add to basket” but the selected variation in the product page still stays active.
Is there a possibility to automatically clear the variation attributes after the product was added to the cart so my default value “choose an option” is shown again, and the customer can choose the next variation?
I didn’t find any easy solutions for that, so I thought about a code snippet as a possible solution with calling “woocommerce_reset_variations_link” after the successful “add to cart”, but unfortunately I’m no programmer. If that solution would be feasible, could someone please provide the correct code snippet?
Thank you very much.
jQuery solution where after reload will click on clear link.
(function ($) {
$( document ).ready(function(){
setTimeout(function() {
$('.reset_variations').trigger('click');
},10);
});
})(jQuery);
Related
I have created a product page using Woocommerce elementor widgets and I would like to better control the behaviour of the “add to cart” button (class="single_add_to_cart_button button alt wp-element-button").
Since I only have 1 product to sell, I placed the products and the cart widgets on the same page.
What I would like is that when I press on “add to cart” (ajouter au panier, in french), the user gets redirected to the bottom of the page (where the cart is). I have placed an Elementor menu anchor there (with CSS ID #shop) but I can't redirect the button to the anchor.
I believe I will need to write a PHP function but my understanding is way too limited unfortunately.
Thanks for your support,
C.
I tried using the "WooCommerce Add to Cart Custom Redirect" plugin (as suggested in this thread), which works such that the user gets redirected to the cart but by reloading the page. What I want is that the user stays on the same page and pressing on "Add to Cart" just slides down to the bottom of the page.
My advice would be to use jQuery, and a click handler with scrollIntoView(). The code could be inserted everywhere after the 'add to cart' button and the jQuery link tag, even to the bottom of the page as a simple script tag. It would look something like this:
$(document).ready(function(){
// binding a click event to the button remotely
$(".single_add_to_cart_button").click(function(){
// scrolling to element '#shop'
$("#shop")[0].scrollIntoView();
});
});
PS: for adding the script, you can easily add it using Elementor's html- or custom code blocks.
EDIT: If the above solution does not work, then the problem might relates to Woocommerce constantly changing its DOM everytime a JS event runs that has something to do with the said part. Because of this, binding click handlers will not (or rather, not always) work, and setting a handler for the EVENT itself seems to be a better way:
jQuery(document.body).on("added_to_cart", function() {
jQuery("#shop")[0].scrollIntoView();
});
The Javascript/jQuery events can be found here.
Important disclaimer, when the above code don't work out of the box:
For others who might experience the same issue, by default Woocommerce does a full page reload upon add-to-cart event, hence the JS event never takes place. If you enable add-to-cart with AJAX in WC settings, you'll get the JS event too.
(source at the comments)
First post here so I'll try to make it as good as possible.
For a WooCommerce / WordPress project, I'm trying to achieve the following. When the cart is empty, there should be a button displayed with the text "Return to store".
Now the button isn't the problem, I've added this with Elementor, now usually I use the JetEngine Dynamic Visibility option to show/hide things.
I've also done this with stock status. There I used the _stock option to only display when there are 5 or more in stock left.
So I'm trying something similar with the cart, whenever there are 1 or more items in the cart, this button needs to be hidden because whenever someone has 1 item in their cart we want them to proceed to the checkout and not return to the shop, because the average product bought per order is 1 for this particular shop.
But the one thing I can figure out is, what key do I need to use to check items in the cart?
I've been trying several options I found online but none seem to work.
Does anyone know how to do this?
Thanks!
First off: Iam only familiar with HTML and CSS. My PHP is reduced to max. "understand" it.
For my workplace Iam working on a WordPress with a WooCommerce ajax based b2b shop.
For our merchants, the prices of the products needs to be visible all the time. But if they choose to show the product to their customer, they don't want to show them the merchant prices, so they need a switch (button-like) to hide all prices. Basically a catalogue mode on a frontend button in the header e.g.
As soon as you press it, all prices should hide, even after you click on a product and you go to the detail page.
So I tried to use my basic php understandings and found this on google:
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
I tied it to a button and it worked. The page reloads and after it, all prices are hidden. But it's just for that page. As soon as you go to the next page, reload it, or want to see the details, they're there again.
So I need a solution, to make this permanent till you press the button again. Ideally, the page doesn't even have to reload to hide the prices.
I'd be very happy if someone could help me here!
Ok - trying to slowly work my way through this - bear with me! Will try to describe what I'm doing here.
Using Woocommerce with theme called Flatsome - but this problem seems to relate to how Woocommerce updates the cart on the cart page.
So I am trying to bend Woocommerce to suit - so when client gets to Cart page - they do not move onto Checkout - instead I am giving them a Button to Request a Quotation - button when click opens a modal with a GravityForm in it.
I've been able to get the product list, quantities, price and SKU passed fine into the form ok using a 3rd party plugin ....
but boy oh boy - can I easily pass through the most recent TOTAL from woocommerce??
Not as easy as I'd hoped!
I had originally written this function into my functions.php
// Send the page url to parameter called 'gdcarttotal' for use in gravity forms
add_filter("gform_field_value_gdcarttotal", "populate_gd_carttotal");
function populate_gd_carttotal(){
global $woocommerce;
$totalamount = $woocommerce->cart->cart_contents_total;
return $totalamount;
}
And yes that seemed to pass through the Total of the Cart ok.
The problem arises if the quantities are updated whilst on that Cart page.
So if I update the quantity of a product - the totals etc all update fine on the Woocommerce cart page total BUT if I then click the launch Quotation form - the value for the Cart Total remains the value of the original total when user landed on that page. So it takes a full page refresh on the cart page to flush it and update it to the correct value.
Someone mentioned to me, Ajax which is beyond my capabilities.
Really just reaching out - and asking what is best way - or how could I write a function whilst on the cart page that will always give me the most updated TOTAL to pass through into a field on a form.
I've got a couple of screenshots but since my first time on here... I'm not sure if I can post or not. Hopefully this description tells the story.
Basically looking to know - whilst on the Woocommerce Cart page, how to pass the most recent TOTAL calculation to a form or page etc...
Thanks guys!!
Gareth
Your base issue is with the language you're using to solve the problem. You've written PHP, which is server-side (i.e., not real-time).
The WooCommerce cart is AJAX, a hybrid of JavaScript and XML, and it's processed client-side (i.e., in the browser) in real-time. That's how you are able to update the quantity and cart totals without a full page reload, and it's how the website is able to see how many items you have in the cart without reloading the page. Because of this, your solution needs to be client-side using JavaScript, I believe.
I'm not a pro developer, so I don't have the exact code to give you, but hopefully this gets you on the right track. You can also read more about AJAX here: https://www.w3schools.com/whatis/whatis_ajax.asp
I want to add a checkbox for the product to indicate if needs assemble or not,if yes, then more money will be charged. My products are shown as grouped style, like:
I am using a plugin called woocommerce extra product options, which can add the checkbox before "add to cart" button. As:
But I want to add the checkbox to each line of the simple products under the grouped product instead of only one; like:
I checked the documentaion, it says use following to hook the extra item in the code/page you want.
function my_custom_function(){
do_action("woocommerce_tm_epo");
}
add_action( 'woocommerce_before_add_to_cart_button','my_custom_function');
But I tried, it always shows only one before add to cart button regardless how many time "add_action('woocommerce_before_add_to_cart_button','my_custom_function');" it is called. How can I achieve my goal? Thanks in advance.
I also tried do_action("woocommerce_tm_epo"); only, but it is not showing anything. If I use do_action("woocommerce_tm_epo"), from screen I can see the space for the checkbox, but just showing the blank. I checked the firebug, I can see the checkbox is there, but for some reason is being hidden. I checked the corresponding CSS, find one place Visbility:hidden; after I changed it to visbility:visable. Still shows blank. Already sitting on the chair for this more than 13 hours, hope someone can help or provide helpful advices.