Product required fields error messages – Mini cart not working

[triplensalon]

Hello,

I have a problem with a plugin that I am using. I already contacted the plugin support but they said the problem is coming from the theme I am using as it is not present with other themes or with the default WordPress theme.

The plugin is for appointments booking by https://bookingwp.com/ . It allows me to add a calendar to my products and the clients can book from there. There is an option for add-ons to these products. Now these add ons can be optional or required fields. If the client has filled all required add-ons from the very first start of booking then ‘book now’ directs them to the mini cart which is perfect.
However if the client doesn’t select anything from them and clicks on ‘book now’ then an error message is displayed. This is great, then they can scroll back and see what they have missed and click on the required field. But this does not clear the error message and when the client then clicks ‘book now’, noting happens. They have to manually refresh the page and then the booked appointment is in their cart. However, this is not a good client experience as I imaging people will start clicking on the ‘book now’ multiple times and they may not realize they have to manually refresh the page.
The problem becomes worse if the required fields are 2+ but the client fixes only one. Then the error messages stack up one after the other, without clearing the first one.

I tried disabling the mini cart and redirecting the client to the basket page from WooCommerce- Settings- Products, however this does not work on mobile devices. The client doesn’t even get an error message if they have missed a field, they just press the ‘book now’ and nothing happens.

I had a developer look into this and he couldn’t figure out how to fix it. Can you help me, please?

Thank you for your time,

Nikol Nikolova

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Nikol,

Thank you for choose our theme.

The issue because plugin doesn’t support Ajax add to cart. You can disable Ajax add to cart in WooCommerce > Settings > Products > Add to cart behavior and uncheck 2 last fields.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[triplensalon]

Thank you for the quick response,

However, I did this but this does not fix the problem (just creates a new one). As mentioned above, when you are going to the website from a mobile device, if you skip a required field and just press the ‘book now’ nothing happens – no error message, no page refresh, no auto scroll to your missed field. So the client wouldn’t know why they cant book.

If they are from a desktop, a message ‘You must chose an option’ would be displayed but this does not show on mobile devices.

And if the plugin did not support ajax,wouldn’t  that mean that the mini cart wont open at all? It works fine if the client has completed all fields from the start of their booking process. The bug is just if they have missed filling in a required field.

 

Please, see how the plugin demo page works on mobile https://demo.bookingwp.com/woocommerce-appointments/product/tattoo/?date=2019-11-14&time=1800&staff=51       vs how it works on my website (both ajax checkboxes are unticked at the moment) https://triplensalon.co.uk/book_now/basic-treatments/gel-polish-manicure/

 

Nikol

[Harry]

Hi,

I tried default theme twenty ninneteen on your site on mobile it also doesn’t show the required fields like the demo of plugin.

Please try deactivate plugin one by one and check again.

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[triplensalon]

Hi Harry,

Okay, so I talked to the plugin support and they said ‘Yes, you can’t use ajax add-to-cart button on archive pages to add an appointment to the cart because you have to select the slot first. But having ‘ajax add to cart’ enabled still works ok. I have it on all my testing sites and our clients also use it for other (non-appointable) products without any problems. The theme should not assume that all products can be simply added to the cart in the archive via ajax. I think that the official Booking plugin from WooCommerce also doesn’t allow that because you also have to select the slot before adding to the cart.’

 

I did some testing. I disabled all plugins but it still wasn’t working.

Then, I created a brand new website with Twenty-Nineteen theme and installed only woocommerce and the booking plugin. I unchecked the ajax in woocommerce – settings – products. It worked fine. When you miss a field, you get a message and you scroll back fix your mistake and click ‘book now’. Then the page refreshes and you get a message ‘“Test Product” has been added to your cart.’

Then I installed Claue. Now if you miss a field the missed field message is not displayed. When you fix the problem and click ‘book now’ it refreshes the page, the appointment is in the basket, however the message ‘“Test Product” has been added to your cart.’ is not displayed as well.

I found a solution and just wanted to share it in case someone in the future gets this problem. Go to Claue and add this to custom css:

.woocommerce .woocommerce-message {
display:block !important;
}
.woocommerce .woocommerce-error{
display:block !important;
}

 

 

So now the ‘book now’ refreshes the page and displays the ‘“Test Product” has been added to your cart.’. Perfect, but can we have the page refreshed but with the mini cart open as well, as if someone clicked on it? Or is that not possible?

 

Thank you so much for your time,

Nikol

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Nikol,

Can you send me the link of test product.

Perfect, but can we have the page refreshed but with the mini cart open as well, as if someone clicked on it? Or is that not possible?

It can’t open cart when you refresh page. The user have to click on cart icon to open cart.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts