I've styled the class woocommerce_message and continued on with developing my theme. I needed to add wp_footer(); to the bottom of my code to make the lightbox functionality work and now when I click "add to cart" what appears is added_to_cart underneath the add to cart button. Also if I add a product with stock quantity 1 twice it will give me the desired woocommerce_error but it opens in the unavailable products page and I want to know how to put it back/why it happened.
When I take wp_footer(); out it fixes the problem but I need it to make lightbox work.
I'm developing it locally so I can't share site link but I've put a zip file containing all the theme code here https://www.dropbox.com/s/57m63w98ntds1or/Vintage%20Then%20Today.zip?dl=0
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)
I'm currently working on a product page in Wordpress.
The current theme I'm using allows my product image to be sticky throughout the webpage browsing.
However, the "Add to cart" and a "Price table" is located all the way at the bottom of the page.
I'm looking for a way to change that block over to underneath my sticky product image, so people could constantly see the price changing as they're choosing their options in the page.
I'm currently using Metro as a theme as YITH WooCommerce Add-ons & Extra Add-ons to display my product options.
Appreciate all the help I could get!
Image at the bottom of the product page
I've tried to look for the specific block on the Parent Theme of Metro and I've came to a conclusion:
I don't understand PHP enough to identify the exact block that's calling the price table & add-to-cart button.
Even if I thought I found something that could be it, I tinkered with the codes a bit, but there were absolutely no changes to the site, which led to my assumption that I'm editing the wrong one due to the different layouts the theme has.
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>
Hello i'm on my first webshop project, and mostly been doing normal wordpress websites in the past. I am making the shop with woocommerce and the storefront theme.
On the website the owner want the customers to be able to see the "available on backorder" message that i linked in the first image to where the red line is on the second image.
The first image is from the shopping cart page, and the second is on the checkout page.
Picture one of the shopping cart page and Picture of the checkout page
So the problem is i dont really know how to add the code for showing it on the individual product on the checkout page.
Since im still pretty new to the add_filter or function coding, i dont really have anything to show other than the two related pictures I hope the question makes sense, since english isnt my first language.
Ive been strugling with removing a "read more" or "beri dalje" button from my website. The website in question is www.fotroviciliji.si .
I can locate it and hide it in chrome investigator but not via global css or using php in functions.php.
The button has a class name btn border-grey product_type_simple. I tried to hide it via global css code. Display none does nothing, visibility hidden hides all the buttons including add to cart which I want to keep.
Then I tried to hide it with a php snippet from woocommerce: https://docs.woocommerce.com/document/hide-loop-read-more-buttons-for-out-of-stock-items/ which actually hid all the correct buttons but messed up the add to cart function which then reloaded the whole page everytime I added something to cart. I added some unrelated code to functions.php.
I also tried this Remove product button if out of stock from Woocommerce shop and archives and it removes all the buttons including add to cart.
Please help Ive been at this for a couple of days and its driving me mad.
add this CSS
.outofstock a.btn {
display: none !important;
}
This CSS was only remove read more who is out of stock product.