Floating button Add to cart button on single product page

Hi David,

This is working fine! But we just noticed that if a product has a long short description, that the floating button is also available on desktop. This should only be the case on tablet and mobile. We do not need this on desktop. I tried already to hide this on desktop with display: none or give them the class hide-on-desktop. But this does not work.

Can we do that in the script somewhere?

Wrap the CSS for fixing the button inside a media query so it only applies to the smaller devices:

@media(max-width: 769px) {

    /* CSS goes here */

}

You can increase the max-width to max-width: 1024px if you want it to apply to the larger tablet devices.

Hallo David,

First Happy New Year! :)

Now we also work with product variation in our shop. So far so good, but now we are facing a ugly problem because of the floating button add to cart. The product variation are also included in the form. (See URL in note)

=> This problem only occurs on mobile devices!

I already tried to change the position from the variation in order to hack this 😎 But no success, I get a fatal error. But maybe this is the wrong approach.

/* Add this to your theme's functions.php to move the variation description display to a different location
 * on the product page.
 */
 
 add_action('plugins_loaded', 'move_variation_description', 50);
 
function move_variation_description(){ 
  // Remove the hook from the original location
  remove_action( 'woocommerce_single_product_summary', array( WC_Variation_Description::get_instance()->frontend, 'add_variation_description' ), 25 );

  // Re-add the hook to where you want it to be
  add_action( 'woocommerce_before_single_product_summary',  array( WC_Variation_Description::get_instance()->frontend, 'add_variation_description' ), 25 );
}

One other solutions would be to exclude the <span class="findit"></span> hook from this special product. But this would be afterwards a huge admin maintenance. Furthermore we would like to keep the floating add to cart button on every product page to make it consistent.

Did you have a idea how this can be solved?

Cheers

Happy New Year.

Simplest thing would be to update the CSS used to fix the Add to Cart form - you would change this:

.findit:not(.is-found)+form.cart {
    position: fixed;
    bottom: -35px;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: #fff;
    padding: 5px 20px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

to this:

.findit:not(.is-found)+form.cart:not(.variations_form) {
    position: fixed;
    bottom: -35px;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: #fff;
    padding: 5px 20px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

This will exclude the Variations Form from becoming fixed.

Hi David,

Perfect! One last thing. We use a plugin called "WooCommerce Custom Product Addons (Free)" in order to give the customer the ability to personalize gifts. But this is only needed on a few product. But when we activated the plugin we get a white space in the floating button Add to cart button div. You can see this on this product in the notes when you enable mobile view. When we disable this plugin, the big space is removed. So I guess this happened because they add something in that Div there.

Can we somehow make sure that the floating button Add to cart button div only displays the quantity and button without this space?

P.s: it sould be this div class wcpa_form_outer

Cheers

Try adding this CSS:

.findit:not(.is-found)+form .wcpa_form_outer {
    margin: 0;
}

I was able to fix this. It was a margin applied to the class wcpa_form_outer and set this margin to 0. Now is looks nice again!

But not sure if this is the best solution...

That works - see my comment above yours:

https://generatepress.com/forums/topic/floating-button-add-to-cart-button-on-single-product-page/page/3/#post-1606342

:)

haha Thanks David,

You was 1 minute faster than me 😎

Glad to be of help :)