Duplicate #place_order buttons in classic checkout

  • Resolved cproetti

    (@cproetti)


    2 months, 1 week ago

    I have identified a HTML standards compliance issue in this WooCommerce PayPal plugin which is preventing this plugin from playing nicely with other plugins or JavaScript components on the checkout page.

    The PayPal plugin appears to be creating a clone of the <button#place_order> at the time of the page loading and merely adding few classes to the cloned button. The cloned button is placed inside a <div#ppcp-hosted-fields> container, the problem being that the button’s ID is not changed, resulting in duplicate buttons with the same ID.

    According to HTML standards, each ID must be unique within a document. The presence of duplicate IDs causes issues with other JavaScript functionalities, particularly those that manipulate or interact with the checkout button based on its ID. For instance, other plugins attempting to modify the checkout button text based on the selected payment method fail to properly identify the correct button due to these duplicated IDs. This just being one example of many potentially unforeseen issues.

    If the PayPal plugin is going to clone elements then make sure that it changes the ID to something unique.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Krystian from Syde

    (@inpsydekrystian)

    Hello @cproetti

    Thanks for reaching out to us, we’re here to help.

    I will pass this on to our development team for further investigation. We will make sure to update you accordingly once we have more information or a solution available.

    Thank you for your patience and for reporting this.

    Kind Regards,
    Krystian

    Kind regards,
    Krystian

    Plugin Support Krystian from Syde

    (@inpsydekrystian)

    Hello @cproetti

    We’ve discussed the issue with our development team, and while they agree that having duplicate IDs is not ideal according to HTML standards, they have made this design choice to ensure consistency in styling for the “Place order” button. Changing the ID might result in inconsistent button styles across different themes, which could lead to widespread user concerns about the appearance of the checkout page.

    The issue you’ve identified is valid and can be seen in the browser console. However, at this point, it is considered more of a theoretical issue rather than a practical one. We have not received reports of real-world problems directly caused by this behavior.

    That said, if you or others can provide specific examples of how this is affecting the functionality of your site, we will definitely revisit the issue and consider implementing a fix. For now, the priority is to avoid styling issues for users.

    We appreciate your understanding and welcome any further feedback.

    Kind Regards,

    Krystian

    Plugin Support Krystian from Syde

    (@inpsydekrystian)

    Hello @cproetti

    Since we have not received any further communication from you, we mark this thread as resolved.

    If you still have any questions or if a new problem arises, don’t hesitate to open a new thread.

    Kind regards,
    Krystian

    Thread Starter cproetti

    (@cproetti)

    For anyone reading this thread and see’s it is marked as “Resolved,” this is not true. We still have this PayPal plugin setup in our test environment and can confirm the issue has not be resolved.

    As of yet, there has been no solution provided by this plugin, rather we abandoned the plugin in favour of another PayPal plugin.

    Plugin Support Krystian from Syde

    (@inpsydekrystian)

    Hello @cproetti

    We mark all outdated threads as resolved when there is no further communication from the user. From what I can see in my previous response, I raised a question about a specific example of how this problem was affecting the functionality of your site, but we did not receive a response. Therefore, my conclusion was quite straightforward, assuming the issue was resolved. If that was incorrect, I apologize.

    Please feel free to contact us privately, and we can take another look at this case or create a new thread. Here’s how you can request support:?Request Support. Please make sure to include the URL of this thread in your ticket for reference.

    Thank you in advance for your understanding.

    Kind Regards,

    Krystian

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