Woocommerce Error Messages

Support
#1

Good afternoon,

I am noticing a number of notifications/errors appearing in response to e-commerce actions. By default these are not styled consistently and look awful. Please take a look at the following screenshots:

  1. Cannot Add: https://prnt.sc/k42idv
  2. Required: https://prnt.sc/k42jq3
  3. Cart Addition: https://prnt.sc/k42obq

These are the messages/errors I have found so far. Why are these not all styled the same way? How can we achieve that? You will also notice on the following screenshot the page functionality and margin is broken when you remove all products from the cart. Can these be fixed?

  1. Margin and Message: https://prnt.sc/k42oj0

Thank you,
J

#2

Hi J,

The screenshots you showed are the actual styling of the messages in the theme. The styling is like the Alert element that we have in the builder.

That is your opinion which the style is awful, but actually, there is a lot of research behind that styling that shows it is the best way to show the messages to be as simple as possible.

You are free to use CSS coding to change those styling if you are interested in customizing the theme. To get started I suggest that you check the tutorials below:

https://www.youtube.com/watch?v=wcFnnxfA70g

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

#3

Hello,

I understand what you are saying but have two follow-ups:

The final screenshot I provided (https://prnt.sc/k42oj0) was not for alert messages but actually for an issue in terms of functionality where half the screen disapepars off-page. Please take a look at that one again: https://prnt.sc/k42oj0.

  1. I will work on customizing the alerts. Could you kindly help by providing instructions on one of them? I am still learning and sometimes have a hard time finding the code to target, but an example is super helpful. If not, I understand.

Thank you!

#4

Hi J,

  1. Please note that the latest Supported version of Woocommerce is Version 3.4.2

Kindly downgrade to that version and see if that fixes the issue with half screen

https://github.com/woocommerce/woocommerce/archive/3.4.2.zip

  1. You can add thie in Theme Options > CSS 
.x-alert-danger, .buddypress #message.error, .bbp-template-notice.error {
    border-color: #eb5439;
    color: #eb5439;
}

.woocommerce-validated input {
    color: #2ecc71;
    border-color: #2ecc71;
}

Change the colors as you like.

Hope that helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.