Support » Plugin: WooCommerce Stripe Payment Gateway » ApplePay button stays on top of a popup window

  • Resolved paulwessiack

    (@paulwessiack)


    If you go to the product detail page:
    https://www.magped.com/shop/magped-sport2/?lang=en
    and click the green button “ADD TO CART” when using a Safari browser with Apple Pay enabled, the black “Buy with ApplePay” button will stay on top and therefore overlaps the opened pop-window which shows the cross selling articles.

    The ApplePay button should have a z-index value of 0 …

    Thanks for your support

    :: Paul

    • This topic was modified 1 month, 3 weeks ago by paulwessiack.
    • This topic was modified 1 month, 3 weeks ago by paulwessiack.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support tijosh

    (@tijosh)

    Hi there @paulwessiack,

    I’m not able to reproduce the problem. See the screenshot here.

    Is there a similar screenshot you can share?

    Hi Thanks for your replay!

    Please press the button “ADD TO CART” not the “Pay with Apple Pay” button.
    This will open a different pop up window.

    greetings

    :: Paul

    Plugin Support Joey Ricketts

    (@jricketts4)

    Hi @paulwessiack – this one has been a bit tough to figure out, since neither the Apple Pay button or the add to cart popup are responding to most positioning or z-index (depth) styling.

    Ultimately, I was able to get the desired results by changing the positioning of the add to cart container from position: absolute; to position: fixed;:

    div.pp_pic_holder { position: fixed; }

    I actually think this looks a bit better, as scrolling the page keeps the add to cart popup at the center of the page consistently.

    If that doesn’t work at first, you can try adding an !important tag, though I tend to try not to if possible:

    div.pp_pic_holder { position: fixed!important; }

    You’ll want to try these CSS snippets by going to: WP Dashboard > Appearance > Customize > ‘Additional CSS’ – then you can simply copy/paste one at a time until the results look good on your end.

    Let me know if you have any issues!

    many thanks!

    div.pp_pic_holder { position: fixed; }

    does the job perfect!!

    greetings

    :: Paul

    Plugin Support Joey Ricketts

    (@jricketts4)

    Thanks for letting us know, @paulwessiack! 😁

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.