Support » Plugin: Extra product options For WooCommerce | Custom Product Addons and Fields » If a required field is empty, user can’t see the error

  • Resolved Tareq Jamal

    (@hesamz)


    Hi
    Thank you for this great plugin.
    There is a UX/UI problem. As screenshot below when user forgets to select required options and clicks the “Add to cart” button, Error “X is a required field.” displays top of product images and user can’t see why product not added to Card, especially on mobile. Is there any solution (like scroll to top to see error) to tell the user “this is the problem that product not added to cart”?

    https://imgur.com/uGibjuB

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author ThemeHigh

    (@themehigh)

    We have checked in our local environment and ensure that when we click on the Add to cart button without providing values in the required field then the page gets reloaded and show the error message.

    Can you please share us with your product URL so that we can verify from our side?

    Thank you!

    Thread Starter Tareq Jamal

    (@hesamz)

    If you click Add to cart in Ajax mode, so there is no page reload and user couldn’t see the error.
    I setup plugin on a temporary test website:
    https://taraztools.ir/product/test-product-with-extra-product-options/

    Please check the website on mobile size to see what exactly I mean.

    Thank you

    Plugin Author ThemeHigh

    (@themehigh)

    Due to the Ajax add to cart the page is not scrolling to the top when an error occurs. You can add the scrolling by adding custom JavaScript. You need to add the JavaScript based on the ajax add to cart result(if an error occurred).

    Please note that you only need to add this for the mobile view by checking the width.

    Sample code for scrolling is given below:

    $('html, body').animate({scrollTop:($('.single-product .woocommerce-error').offset().top-100)}, 1000);

    Note: You need to adjust it based on your requirement.

    We hope this will help.

    Thank you!

    Thread Starter Tareq Jamal

    (@hesamz)

    Thank you. I put your code in <script> tag and add it before </head> on theme Header.php but it doesn’t work (not do anything). Sorry for that Can you please help me?

    Console:
    Uncaught TypeError: Cannot read property ‘top’ of undefined

    • This reply was modified 1 year, 1 month ago by Tareq Jamal.
    Plugin Author ThemeHigh

    (@themehigh)

    Please add the above code in the footer template before closing the body tag.

    You need to modify the code based on your requirement.

    Thank you!

    Thread Starter Tareq Jamal

    (@hesamz)

    I used Pop-up Notices for WooCommerce to handle error display and its perfect, A great match with Extra Product Options (Product Addons)
    Thank you for support

    Plugin Author ThemeHigh

    (@themehigh)

    Great!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘If a required field is empty, user can’t see the error’ is closed to new replies.