Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

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

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

Home Forums Support Floating button Add to cart button on single product page

Viewing 10 posts - 31 through 40 (of 40 total)
  • Author
    Posts
  • #1515837
    nik9

    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?

    #1515970
    David
    Staff
    Customer Support

    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.

    #1605113
    nik9

    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

    #1606053
    David
    Staff
    Customer Support

    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.

    #1606134
    nik9

    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

    #1606342
    David
    Staff
    Customer Support

    Try adding this CSS:

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

    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…

    #1606680
    David
    Staff
    Customer Support
    #1606693
    nik9

    haha Thanks David,

    You was 1 minute faster than me 😎

    #1606719
    David
    Staff
    Customer Support

    Glad to be of help πŸ™‚

Viewing 10 posts - 31 through 40 (of 40 total)
  • You must be logged in to reply to this topic.