{"id":11974813,"date":"2019-09-27T11:20:26","date_gmt":"2019-09-27T11:20:26","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/modify-html-on-checkout-page\/"},"modified":"2019-09-27T11:20:26","modified_gmt":"2019-09-27T11:20:26","slug":"modify-html-on-checkout-page","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/modify-html-on-checkout-page\/","title":{"rendered":"Modify html on checkout page?"},"content":{"rendered":"<p>Hi,<\/p>\n<p>I&#8217;m trying to wrap &#8216;some&#8217; of the fields of the checkout page in a div and inject some buttons because I am implementing some address validation. <\/p>\n<p>Basically to start with I need a wrapper around company, address line 1, address line 2, town and postcode so I can show\/hide them but I can&#8217;t seem to get anything to work. Here&#8217;s what I&#8217;ve tried &#8211; <\/p>\n<p>In my filters file:<\/p>\n<pre><code>\nfunction change_woocommerce_field_markup($field, $key, $args, $value){\n    if($key === &#039;billing_company&#039;) {\n        $field = &#039;&lt;div class=&quot;address-wrapper&quot;&gt;&#039;.$field;\n    }\n    else if ($key === &#039;billing_postcode&#039;) {\n        $field = $field.&#039;&lt;\/div&gt;&#039;;\n    }\n    else {\n        $field = $field;\n    }\n    return $field;\n}\nadd_filter(&#039;woocommerce_form_field&#039;, &#039;\\App\\change_woocommerce_field_markup&#039;, 10, 4);\n<\/code><\/pre>\n<p>So I&#8217;m prepending and appending the relevant fields with the html that opens and closes the wrapper. However the resultant HTML looks like this:<\/p>\n<pre><code>\n&lt;div class=&quot;address-wrapper&quot;&gt;&lt;\/div&gt;\n&lt;p class=&quot;form-row form-row-first validate-required&quot; id=&quot;billing_first_name_field&quot;....\n&lt;p class=&quot;form-row form-row-last validate-required&quot; id=&quot;billing_last_name_field&quot;....\n<\/code><\/pre>\n<p>So it&#8217;s putting the wrapper at the top of the container! I don&#8217;t get it, what&#8217;s going on with this?<\/p>\n<p>Thanks<br \/>\nKevin<\/p>\n","protected":false},"template":"","class_list":["post-11974813","topic","type-topic","status-publish","hentry","topic-tag-checkout"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/11974813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/11974813\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=11974813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}