[Resolved] Paypal Buy Now button floating over sticky menu on scroll (Woocommerce)

[SCIP]

Hi Tom and the team!

Any ideas about this issue? It occurs on single product pages.

I guess it is to do with Z index for the button or the sticky menu, but am not sure how to fix.

I haven’t used a page builder for the Woocommerce aspect of the site, just Woocommerce out the box with a little CSS for fonts, but no Paypal moderation.

Thanks for any advice.

[Leo]

Hi there,

I just check the page you linked but don’t see a Paypal buy now button.

It’s not something added by GP.

Let me know what I’m missing 🙂

[SCIP]

Hi Leo,

Paypal Buy Now buttons are added by default by Woocommerce on standard Woocommerce plugin installs. My issue is that the Paypal Buy Now button is moving above instead of behind the Generatepress sticky menu on scroll.

Are you sure that the big yellow Paypal button is not displaying under Add to Basket on this link? It displays on all browsers for me.

[Leo]

Hmm looks like the button is added by add-on plugin:
https://en-ca.wordpress.org/plugins/woocommerce-gateway-paypal-express-checkout/

and not the standard WooCommerce default plugin:
https://en-ca.wordpress.org/plugins/woocommerce/

Anyways, give this CSS a shot:

#zoid-paypal-button-ae1d8c0e30 > .zoid-outlet > iframe.zoid-component-frame {
    z-index: 10;
}

[SCIP]

Thanks for trying, Leo. Sadly that CSS did not work.

I haven’t added any Woocommerce plugins apart from the standard one. WooCommerce PayPal Checkout Gateway Version: 1.6.5 did auto install along with it. If I disable it, the yellow button vanishes, and the PayPal payment method vanishes at checkout. So I can’t do that! I am also not 100% sure that this is the same plugin you are referencing.

Sigh. I can’t think of anything unusual which I have done with sticky menu to encourage this behaviour on the part of a simple, built-into Woocommerce (via an apparently essential, self-installing plugin) button. I have deliberately not customised Woocommerce to keep it clean and simple.

I’m surprised no one else has this issue, am I missing something obvious? I wouldn’t have thought Woocommerce required one to seek out one’s own payment gateway, that’s kind of the point. And I know many, many GP users use Woocommerce out of the box. Very odd.

[Leo]

Hmm try this CSS and clear your caching plugin:

body #sticky-navigation {
    z-index: 200 !important;
}

Also you shouldn’t need that PayPal button in order to have PayPal as a payment option.

For example, this site has no yellow button but the PayPal option still shows in checkout:
https://roseandpurl.com/product/1-3-years-tiny-hearts-oatmeal-and-raspberry/
http://www.screencast.com/t/6hgPbLpOEqB

[SCIP]

Thank you very much Leo, that CSS works a treat. You can see the results live at the link I provided.

Regarding the plugin button’s neccessity, I will have to delve deeper into the world of Woocommerce at some stage, and for my own satisfaction of curiosity work out how to remove it and still have a payment gateway.

I was hoping for an easy life with just 9 products on a little shop!

I really appreciate your help.

[Leo]

Glad I could help.

Maybe check out their documentation page: https://docs.woocommerce.com/document/paypal-standard/

[Author]

Posts