[Resolved] Floating button Add to cart button on single product page

[nik9]

Hello David,

I was inspired from this topic (https://generatepress.com/forums/topic/floating-button-on-mobile/) here but we want to have this for WooCommerce single product page for the Add to Cart button.
We already use the “Banner” Add to cart when a user scrolls down. But it would be nice if we can do something that the Add and quantity button or let’s say the class="cart" would be there when a user opens a single product page on mobile like this here: https://www.wehkamp.nl/anytime-lang-gewatteerde-jas-donkergroen-16507877/

It’s the same topic but the difference is, that we want to have this for on a product page.

Cheers

[David]

Hi there,

you can’t use both that script and the Add to cart panel as they will conflict.
The Add to Cart Panel listens out for when the Button is no longer in the viewport.
With the script in that linked topic the Button will always be in view so the Add to cart script won’t do its thing

[nik9]

Hi David,

Okey, I see.

Tha plan was that we have the Add and quantity buttons available when a user is at the top of a page. When the user reach the position, where the buttons are placed they stay there. When a user scrolls further down, then the stick add to cart banner kicks in.

So you mean that’s not possible?

[David]

Not sure – could do something like this:

const findEl = document.querySelector('.findit');
const observer = new window.IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    // add is-found class if visible
    entry.target.classList.add('is-found');
    return
  }
  // Scroll out of viewport
  if (entry.boundingClientRect.top > 0) {  
    // remove is-found if above viewport
    entry.target.classList.remove('is-found');
  } else {
    // do things if below
  }
}, {
  root: null,
  threshold: 0,
});

if (findEl) {
    observer.observe(findEl)
}

You will need to hook in an element immediately above the Add to Cart Form with a class of findit
e.g
<span class="findit"></span>

When the element enters the viewport it will be given a class of is-found
So it becomes:

<span class="findit is-found"></span>

We can then use this to manipulate the Add to cart which is immediately after it with CSS:

.findit:not(.is-found) + form.cart {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

Which simply fixes the form cart if our findit element isnt found.

[nik9]

Hi david,

thanks.

Now i add the following code to GP element as a hook element and choose WP_footer and display on all products.

const findEl = document.querySelector('.findit');
const observer = new window.IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    // add is-found class if visible
    entry.target.classList.add('is-found');
    return
  }
  // Scroll out of viewport
  if (entry.boundingClientRect.top > 0) {  
    // remove is-found if above viewport
    entry.target.classList.remove('is-found');
  } else {
    // do things if below
  }
}, {
  root: null,
  threshold: 0,
});

if (findEl) {
    observer.observe(findEl)
}

CSS is in the Customizer.

So now I only have to add <span class="findit"></span> or hook in that. But how?

[David]

Try this:

1. Create a new Hook Element to add that HTML.
2. Select the woocommerce_single_product_summary and set the priority to 29
3. Set the display rules to Products.

[nik9]

Thanks. But its not working 🙁

This are my settings. May I made a config error…

https://ibb.co/GJCkQrS
https://ibb.co/nkJPpn2
https://ibb.co/2hghb9Y
https://ibb.co/fpTZFB4

[David]

For the Script it needs to be added inside script tags:

<script>
// Add script here
</script>

The other hook for the findit element looks correct.

[nik9]

Arggg.. haha.. Sometime i’m a idiot^^

Okey.. now it seems that the script is loaded and also the hooked in html element.

<span class="findit is-found"></span>

But the Add & quantity buttons are not floating. Is the hooked in html element at the right place? Its above the stock value. (URL in private note)

[David]

Yeah thats a pain – how is the Discount Info box being added ? As thats hooked in exactly where we need it ( we could use that as the our ‘findit’ element – but i noticed its not on every product )

[nik9]

Hi David,

I guess comes from a Discount rule plugin. (https://docs.flycart.org/en/collections/2195266-discount-rules-2-0?utm_source=woo-discount-rules-v2&utm_campaign=doc&utm_medium=text-click&utm_content=documentation)

But I do not know what hook they use for this. 🙁

[David]

Try selecting a Custom Hook instead and adding this:

woocommerce_before_add_to_cart_button

[nik9]

Hi David

Yep, better.. now the html element should be at the right place. But the Add & quantity buttons are not sticky when a user is at the top of a page.

[David]

Nope – still wrong hook lol – try:

woocommerce_before_add_to_cart_form

Set the Priority to 30

[nik9]

Hi David, Yes! Now its there. But the button is at the top of the page and not sticky. Guess we need more css. After that it should work.

[Author]

Posts