Afterpay message won’t show on Elementor’s product pages and Mini Cart

Hi @artby276

Can you provide a sample of what custom code you have written?

If Elementor is triggering the same actions as Woocommerce does then this shouldn’t be a problem.

I’ll have to check the code to confirm which action the plugin listens for when outputting Afterpay and the payment buttons.

There is a shortcode you can use as well. I know Elementor supports adding a shortcode.

Kind regards

Hi,

I just tried to integrate the coding provided by Stripe on their website, but it didn’t work for me… and I am not a pro: https://stripe.com/docs/payments/afterpay-clearpay/site-messaging

The “Uncaught IntegrationError” I copied/pasted on the previous message is the result of the present plugin, not my attempt at coding – which I had disabled and deleted by then.

You say there is a shortcode I could use. I did not find it in the documentation. Can you provide me the shortcode please? Elementor allow me to insert shortcodes, Html code and custom css. Otherwise I can always add php through snippets.

Thanks in advance for your time.

Hi @artby276,

The shortcode is wc_stripe_payment_buttons. I believe the reason you don’t see the Afterpay messaging is because the plugin uses the selector '.summary .price'.

So you must ensure your Elementor product page has a div with the “price” css class just like WooCommerce does it.

Kind Regards,

Thank you for your response.

I made sure that the wc price widget was indeed identified as a wc product price CSS Class. But nothing has changed… No afterpay message.

The browser identifies the same Error: “The selector you specified (#wc-stripe-afterpay-product-msg) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount(). […]”

Very strange.

I have identified another person who had the same problem 4 months ago, but his case was a little different: https://www.ads-software.com/support/topic/clearpay-afterpay-messaging/

Just so you know, on Elementor’s side, my ticket has escalated to the tech3 level. Waiting for a tech3 to have a look into this integration issue…

I look forward to hearing from you.

Thanks!

Hi @artby276,

The reason for this issue is you’re missing the parent element with the class summary. Per my previous reply, you need a parent element with a class of “summary” so that the selector .summary .price works.

Simply add a class called “summary” to one of the elements above the “price” class and it will work.

Kind Regards,

Oh, thank you.

Yes, it worked when I called the “wc product price” widget a CSS class “summary price”. It is the only way that has worked. Thank you. The Afterpay Message has appeared.

Now, if I may ask you another question, it looks like the Afterpay message inherits all the styling of the price widget (font, color, spacing, etc.). How do we call this element (the Afterpay message precisely) for me to work on its styling with css?

I should also mention that as soon as I call a widget a CSS class “summary”, the element’s width automatically becomes very narrow (like narrower than my “add to cart” button). It does this only on desktop – not mobile or tablet.

(For info, the GPay button also appears very narrow, and it sticks at the right of the “add to cart” button – instead of under – without any padding separating the buttons. But that’s another issue that we’ll keep for another time).

All my attempts at widening this “.summary” effect / “.summary .price” / and at styling the .afterpay_message (or .afterpayclearpaymessage or .wc_stripe_payment_buttons or .afterpay_clearpay, or .wc-stripe-afterpay-product-msg, etc.) have failed. So I guessed you might be able to help me by pointing me the right selectors I should call.

Thanks in advance for your time and kindness.

The html container ID is wc-stripe-afterpay-product-msg so you can use that to change the appearance. That along with the options available in the After Pay Settings page of the plugin should work.

I should also mention that as soon as I call a widget a CSS class “summary”, the element’s width automatically becomes very narrow (like narrower than my “add to cart” button). It does this only on desktop – not mobile or tablet.

That’s not the Stripe plugin, you will need to adjust the styling of your theme affect the appearance.

So I guessed you might be able to help me by pointing me the right selectors I should call.

The key is to create css that has a more specific selector than your theme, that way you override the default styling.

Kind Regards,

Many thanks for all your prompt responses. You have been very helpful and generous.
??

I have build a custom product single page. I want to show the after pay message using a shortcode. It shows in checkout and cart page. But don’t show in single product page as its build custom. So any shortcode would work for me. Let me know if you have any shortcode for this to show it.