CODEWITHSUNDEEP
phpcsswordpresswoocommercecheckout
eMikkelsen
eMikkelsen

Reputation: 411

WooCommerce Checkout Fields are not showing the correct error message

I get vague error messages in my WooCommerce checkout because I have removed all labels. Is there a way to display the correct error message while hiding labels with PHP? Or is there a way to hide the checkout labels with CSS, but without having to hide all labels, seeing as some of them are relevant (Terms and conditions, Newsletter etc).

We use the following code to hide labels:

// Fjern labels fra checkout
add_filter('woocommerce_checkout_fields','custom_wc_checkout_fields_no_label');

// Our hooked in function - $fields is passed via the filter!
// Action: remove label from $fields
function custom_wc_checkout_fields_no_label($fields) {
    // loop by category
    foreach ($fields as $category => $value) {
        // loop by fields
        foreach ($fields[$category] as $field => $property) {
            // remove label property
            unset($fields[$category][$field]['label']);
        }
    }
     return $fields;
}

Alternatively CSS can work

Upvotes: 2

Views: 4342

Answers (2)

Dhaval Shah
Dhaval Shah

Reputation: 375

[Update 1] -- added some more information on how errors are generated.

[Update 2] -- explained how to get specific language locale activated for WooCommerce

[Update 3] -- added CSS rules as original question was modified.

The errors are generated inside validate_posted_data function of class-wc-checkout.php.

The Field names that you see in errors such as First Name in "Billing First Name is a required field." are in fact labels. So if your checkout fields' array don't have ['label']property set for any of the fields than you won't get correct complete errors.

In current scenario, I assume you have removed the ['label'] properties to hide labels on front-end and only show ['placeholders']. If you want to hide Labels in front-end use CSS styles for that.

/*
 * CSS Styles are from .visuallyhidden rule of
 * HTML5Boilerplate for proper accessibility. 
 * 
 * @Link: https://github.com/h5bp/html5-boilerplate/blob/6.0.1/dist/doc/css.md#visuallyhidden
 */
.woocommerce-shipping-fields__field-wrapper label,
.woocommerce-billing-fields__field-wrapper label {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

This rule will only and only target Billing & Shipping Field labels.

I am using code from .visuallyhidden utility class of HTML5Boilerplate. This is the most accessible way to hide content visually but not for screen readers or other assisting technologies.

Why your approach is wrong?

Best way to localize WooCommerce is not by filtering output and replacing the English text to your language. Danish seems to be near 100% done both for Wordpress and WooCommerce

If you have selected the install language as Danish, you should not be required to add Danish placeholders as you are doing right now.

Follow steps in this link to have Danish localization for WooCommerce: https://docs.woocommerce.com/document/woocommerce-localization/#section-4

Upvotes: 1

LoicTheAztec
LoicTheAztec

Reputation: 254378

Instead you could try using a specific CSS rule to hide the billing <label> tags using:

.woocommerce-billing-fields label{
    display:none;
}

This goes on styles.css file of your active child theme (or active theme)…

It should work. This way you will get the correct error messages.

Upvotes: 1

Related Questions