[ad_1]
I am having an issue with the checkout newsletter opt-in button made by “Mailchimp for WooCommerce”. The tick box that changes when you click on it appears on a line above the label and there is an empty, unclickable box next to the label.
I think the input element and label element are the wrong way around.
This is what the element HTML looks like:
<p class="form-row form-row-wide mailchimp-newsletter"><input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="mailchimp_woocommerce_newsletter" type="checkbox" name="mailchimp_woocommerce_newsletter" value="1" checked="checked"> <label for="mailchimp_woocommerce_newsletter" class="woocommerce-form__label woocommerce-form__label-for-checkbox inline"><span>Subscribe to our newsletter.</span></label></p>
But when modifying the HTML element manually I manage to get it to look correct by putting the label before the input:
<p class="form-row form-row-wide mailchimp-newsletter woocommerce-validated"><label for="mailchimp_woocommerce_newsletter" class="woocommerce-form__label woocommerce-form__label-for-checkbox inline"><input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="mailchimp_woocommerce_newsletter" type="checkbox" name="mailchimp_woocommerce_newsletter" value="1" checked="checked"><span>Subscribe to our newsletter.</span></label></p>
This behaviour still occurs when disabling all plugins (except Woocommerce and Mailchimp for WooCommerce), removing all custom CSS/code, and switching themes.
I would be very grateful for any help to fix this issue.