Payment Request button is not compatible with Elementor Pro

[DanReyLop]

We have (at least) 2 tickets reported already for the same issue.

The Google Pay / Apple Pay button doesn't render on the Product page when Elementor Pro is active. See the tickets for screenshots.

One of the merchants has reported that the same problem is present in the Stripe extension. Elementor already sent them our way, so it's unlikely they'll ever fix it on their end.

4182429-zen 4177003-zen

[dwainm]

Closing since no activity and we don't officially support it.

[sverleis]

Seeing this on a new set of tickets, so it would be worth the team at Elementor to look into it.

5443576-zen

[sverleis]

5430966-zen 5447711-zen https://wordpress.org/support/topic/apple-pay-failed-payments/

[nicdwilson]

For anyone finding this, here is an older thread on Elementor's Github repository in which a number of CSS solutions are offered for the same problem with the Stripe gateway.

https://github.com/elementor/elementor/issues/10617

[nicdwilson]

Merchant in 5443576-zen has provided the following fix

form.cart {
flex-wrap: wrap;
justify-content: flex-start;
}

form.cart .quantity {
width: 50%;
flex-basis: 50%;
display: block;
}

form.cart .quantity input[type="number"]{
display: block;
width: 100%;
}

form.cart #wcpay-payment-request-wrapper {
width: 100%;
padding-top: 10px;
}

form.cart #wcpay-payment-request-button-separator {
display: none !important;
}

form.cart .single_add_to_cart_button {
display: none;
width: 100%;
margin: 10px 0 0 0;
}

[sverleis]

For mobile fixes, there is also a code snippet added by here by another user: https://github.com/elementor/elementor/issues/10617#issuecomment-808617625

.woocommerce-variation-add-to-cart {
    display: block !important;
}
div.quantity, div.quantity input.qty {
    min-width: 100%;
}
button.single_add_to_cart_button {
    margin-top: 10px !important;
    min-width: 100%;
    padding: 20px !important;
}

This was tested on the Stripe Extension, but should also work for WooCommerce Payments.

[csmcneill]

6311575-zen may be facing this issue.

The PRBs are loading, but they are just loading as a single pixel:

This is because of the display: flex property used in the following elements:

:is(.elementor-widget-woocommerce-product-add-to-cart,.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart,.elementor-widget-wc-add-to-cart,.woocommerce div.product .elementor-widget-wc-add-to-cart) form.cart.variations_form .woocommerce-variation-add-to-cart

Changing this to almost anything else (e.g., display: inherit) resolves the issue:

[jessy-p]

This issue impacts International Expansion, In-Person Payments, Local Payment Methods, and Additional Payment Methods (including Apple Pay / Google Pay), so assigning to Fusion (based on team responsibilities Pc2DNy-3z-p2) @anu-rock. Assigning as part of Gamma Triage process PcreKM-yM-p2.

[anu-rock]

Given this issue is low-priority, pinging @frosso from Heisenberg who are the new owners for Local and Additional Payment Methods.

[pierorocca]

Is this is still an issue given two recent changes to the PRB css #6327, #7550, and https://github.com/Automattic/woopay/issues/1854 which placed the PRBs in their own container separate from the qty picker and add to cart buttons?

[frosso]

I haven't been able to test this out with Elementor Pro, yet. Elementor does seem to be showing the PRBs, but it looks like the issue is specific to the "Pro" theme. Having some trouble logging into their site.

[csmcneill]

I activated the Elementor Pro plugin and the Hello Elementor theme on one of my test sites. I also used one of the built-in templates. You can check out how that appears here: https://wcpay-avatax.mystagingwebsite.com/product/wooden-tea-set/

A couple of notes:

• I use a darkmode browser extension 😎 so your experience may differ slightly.
• The account is in dev mode, so Apple Pay won't render.

I see that display: flex is still used for the same element in the theme, but PRBs render separately:

[pierorocca]

Thanks @frosso and @csmcneill. This does look significantly better since we made the changes to the product (and cart) page.

@bborman22 had tested the changes with PayPal https://github.com/Automattic/woocommerce-payments/pull/6985#issuecomment-1697486272 and it had spacing between WooPayments and PayPal. Any insights into the lack of spacing with Elementor before we close this out?

[pierorocca]

PS This is a huge win. #6985 keeps paying dividends.

[csmcneill]

Adding a margin-bottom: 1em to the wrapper (there's a margin-top: 1em in place already) does the trick on the above site, but I don't know if this is the best solution.

[pierorocca]

It works with 2 gateways. With 1 it may add too much space between the PRBs as the SKU and installments copy. Tricky.

Since the main issue of this ticket is solved by #6985, closing.