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)
Related
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);
I am working on a WooCommerce site with Ajax enabled on all pages. I've also added a custom Direct Checkout button as part of the checkout form. However, after I got everything Ajaxified, the direct checkout link only works on single product pages. On archive pages, the link redirects to the single product page instead of adding the product to the cart and taking the user to the checkout page.
I'm accomplishing the "Buy Now" button with a function that hooks into the end of the cart form on the single products page. That code works perfectly and looks like this:
add_action('woocommerce_after_add_to_cart_form', 'buy_now');
function buy_now() {
echo '<button class="buy-now-btn">Buy now</button>';}
This is the code I have on the archive pages, which is incorrectly redirecting to the single product page:
<button class="buy-now-btn btn-shop">Buy now</button>
The HTML output for the above code looks like this in my browser:
<button class="buy-now-btn btn-shop">Buy now</button>
When I copy and paste this path behind my URL in the browser, it behaves as expected. It adds the product to the cart and redirects to the checkout page.
I have tried the following with the same results:
Hooking into the after add to cart button on all pages and adding the same code from the function I'm currently using above. With a different function name, of course.
Copying and pasting the function code and converting into HTML directly on the page
Disabling AJAX on the archive pages (the buy now button was working before I added AJAX)
I feel like it might be something that will need a JS fix OR it's something super simple that I've overlooked. Help is appreciated.
So hours of staring at this really threw me I guess. All I had to do was place the a tags inside the button tags on in my archive page loop and now all is well.
This is the code that worked.
<button class="buy-now-btn btn-shop">Buy now</button>
I have combined cart and checkout on one page and are moving things around in the layout but cannot properly move Place order button on the checkout from file payment.php to cart.php. The button shows is clickable but not able to pas the checkout as it gives an error: "We were unable to process your order, please try again."
Followed this guide below on removing and adding the button:
WooCommerce checkout layout
thanks in advance!
There are 2 things you need to understand. payment.php template is a part of form-checkout.php and it is residing inside tag. Also on the cart.php page , you can found that there is also all the data resides inside the <form> tag.
You need to place your place order button including with other page information that needed for the checkout inside the form tag with proper form name and action to make it worth on the cart page.
I need to identify the add to cart button and disabled it (js and php) based on product id(this is not the real aim of the question, the bold is the real one)
Since I haven't found any solution I have thought to let the admin press the button in the admin section dedicated tomy extension and capture the button information with js and then save them later.
To do so I would like to display the main body of the product page and the one of a category for each theme in the design section.
This is how I retrieve the themes and packages:
//Main package/theme
Mage::getStoreConfig('design/package/name')
//Reegex theme
$ob=unserialize(Mage::getStoreConfig('design/package/ua_regexp'));
foreach($ob as $key)
echo $key['value'];
My main concern is about the bold part, is if it is possible? How do I do it?
Just to be clear: I need only the red rectangle:
Above it there is the breadcrumbs and on the right the sidebar
MORE DETAILS
When the admin creates/edit a product, it can select or not the countries where the item can be selled.
What happens: when a page load the system check if the item is merchantable in the costumers country otherwise it removes the button.
Now this bring some problems:
Wide theme support: I'm not sure the button html is the same of the default one
In the same page can exist merchantable and not-merchantable products: identify the button of the correct item in the category page where there are multiple of them, to do so I check the button behaviour: usually it contains: /checkout/cart/ plus the product id in the onlick attribute or the button submits a form, I think that if the admin "shows" me what happens and, after an analysis, I will be able to identify the button and replace it using the id (secure) or class ( not so certain), since not all the stores use the default btn-cart class
Cache/FPC system that fetch the page: I don't know if they will catch the js that disable the button or if the customer has disbaled any script (probably it can't even use the site), however usualy the add to cart block is not cached by those programs (sometimes if the item is not available the button is hidden)
SEO problem: guest aren't forced to select a country, but I try to identify it with some external service using the ip, so probably it will also detect the bots as users, I don't know if it will be a problem (I don't think so), otherwise I have to use JS to do an AJAX call and then hide the button
I would like to avoid any edit to any template file and create a very simple way for the user to set up the module( click a button is less complicated than the whole procedure to create an attribute, the relatives options and associate it to the sets)
Basically: How can I display the product and category page in the backend?
What about using next logic for removing button from product page:
Add new attribute (for example: hide_button, type Yes/No) to products in Catalog > Attributes > Manage Attributes. By default it will be 'no', so all products has the button. Admin can set attribute to 'Yes' for needed products.
Create observer which will catch catalog_product_load_after event:
public function checkProduct(Varien_Event_Observer $observer){
Mage::register('hide_button', $observer->getEvent()->getProduct()->getData('hide_button'));
return $this;
}
Create observer which will catch controller_action_layout_generate_blocks_after event and inject your js code to all themes:
public function injectScript(Varien_Event_Observer $observer){
if (Mage::registry('hide_button' == 1) {
$head = $observer->getEvent()->getLayout()->getBlock('head');
$head->addItem('js', 'hide-button.js');
}
return $this;
}
Create file js/hide-button.js which will remove buttons with class 'btn-cart' from page:
Event.observe(window, 'load', function() {
$$("button.btn-cart").remove();
});
I didn't test the code, it's just an idea.
Description : Hello I am developing Online food ordering site. I have almost completed the project but i am stuck at shopping cart..
Problem: I am facing problem when i delete the item from the cart which i have selected the page is scrolling up when i delete item from the cart.. I am using AJAX to add and delete items from the cart.
What will be the possible solution so that page do not scroll up when i delete the item from cart.??
You can check out here is the link : http://gogaily.com/restaurant_details.php?hotel_id=14 after page redirects click on MENU tab to view Menu items ... When u click on Menu items Cart will be displayed ,once u delete the item from cart Page scroll up.. How to avoid the page getting scrolled up.
That’s because you are using a link element with href="#" – the empty hash gets treated as “scroll to top” by browsers.
You simple have to suppress the “normal” link functionality after executing your JS code – keywords are event.preventDefault or return false (the latter for “traditional” event handling.
I think you have used anchor tag in delete button. ie.
<a href="#" ...>Delete</a>
something like this. Do it with
Delete
or use button i.e.
<button ...>Delete</button>
Hope you problem will be solved.
Replace href="#" with href="javascript:void();"