Self-certification checkbox can not be checked

The self-certification box is a simple checkbox. If it can’t be ticked, perhaps something on the checkout page is blocking it. It could be an invisible element overlapping the field, some script or CSS disabling it.

We verified that this is not an glitch in the EU VAT Assistant itself. Since, right now, we don’t have any detail about the issue, the next step we would suggest would be the usual approach of going by exclusion, disabling other plugins one by one, and switching to a basic theme. That should allow to find out if any of them introduces some element on the checkout page that could interfere with the checkbox.

In bootstrap (see e.g. https://getbootstrap.com/docs/4.5/components/forms/), it seems that

 
<span style="position: relative;margin-bottom: 0;vertical-align: top;"
 class="self_certification_label custom-control-label">
   I am established, have my permanent address, or usually reside within 
    <strong>Germany</strong>.
</span>

should have the custom-control-label class, so effectively:

<span style="position: relative;margin-bottom: 0;vertical-align: top;"
 class="self_certification_label custom-control-label custom-control-label">
   I am established, have my permanent address, or usually reside within 
    <strong>Germany</strong>.
</span>

I can not easily add that.

• This reply was modified 3 years, 8 months ago by thevalueengineers.

I’m not sure what the custom-control-label does (it’s a custom class, not part of WooCommerce). You can add your own custom classes by implementing a filter for woocommerce_checkout_fields and altering the class attrubute. This is outside the scope of our support service, but you can find the official documentation here: https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

However, in your first example, the class that you deem required is already there. In the second example, it’s duplicated.

First example:

<span style=”position: relative;margin-bottom: 0;vertical-align: top;” class=”self_certification_label custom-control-label“>

Second example (class duplicated):

<span style=”position: relative;margin-bottom: 0;vertical-align: top;”
class=”self_certification_label custom-control-label custom-control-label“>

Due to that, it seems unlikely that the absence of the custom-control-label class is the cause of the issue.