Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to select the first h3 (without class or id) inside a div with the .woocommerce-billing-fields class with vanilla javascript?

The idea is to change the <h3>
content when the page loads

<div class="woocommerce-billing-fields">
   <h3>Detalhes de faturamento</h3>
   <div class="woocommerce-billing-fields__field-wrapper">
      <p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10"><label for="billing_first_name" class="">Nome&nbsp;<abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Brunno" data-qa-id="Nome" autocomplete="given-name"></span></p>
      <p class="form-row form-row-last validate-required" id="billing_last_name_field" data-priority="20"><label for="billing_last_name" class="">Sobrenome&nbsp;<abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value="Vert" data-qa-id="Sobrenome" autocomplete="family-name"></span></p>
      <p class="form-row form-row-wide validate-required validate-email" id="billing_email_field" data-priority="30"><label for="billing_email" class="">Endereço de e-mail&nbsp;<abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="email" class="input-text " name="billing_email" id="billing_email" placeholder="" value="[email protected]" data-qa-id="Endereço de e-mail" autocomplete="email username"></span></p>
      <p class="form-row form-row-wide address-field update_totals_on_change validate-required" id="billing_country_field" data-priority="40">
         <label for="billing_country" class="">País&nbsp;<abbr class="required" title="obrigatório">*</abbr></label>
         <span class="woocommerce-input-wrapper">
            <select name="billing_country" id="billing_country" class="country_to_state country_select " data-qa-id="País" autocomplete="country" data-placeholder="Selecione um país…">
               <option value="">Selecione um país…</option>
               <option value="AF">Afeganistão</option>
               <option value="ZA">África do Sul</option>
               <option value="AL">Albânia</option>
               <option value="DE">Alemanha</option>
               <option value="AD">Andorra</option>
               <option value="AO">Angola</option>
               <option value="AI">Anguilla</option>
               <option value="AQ">Antártica</option>
               <option value="AG">Antígua e Barbuda</option>
               <option value="SA">Arábia Saudita</option>
               <option value="DZ">Argélia</option>
               <option value="AR">Argentina</option>
               <option value="AM">Armênia</option>
               <option value="AW">Aruba</option>
               <option value="AU">Austrália</option>
               <option value="AT">Áustria</option>
               <option value="AZ">Azerbaijão</option>
               <option value="BS">Bahamas</option>
               <option value="BD">Bangladesh</option>
               <option value="BB">Barbados</option>
               <option value="BH">Barém</option>
               <option value="PW">Belau</option>
               <option value="BE">Bélgica</option>
               <option value="BZ">Belize</option>
               <option value="BJ">Benim</option>
               <option value="BM">Bermudas</option>
               <option value="BY">Bielorrússia</option>
               <option value="BO">Bolívia</option>
               <option value="BA">Bósnia e Herzegovina</option>
               <option value="BW">Botsuana</option>
               <option value="BR" selected="selected">Brasil</option>
               <option value="BN">Brunei</option>
               <option value="BG">Bulgária</option>
               <option value="BF">Burquina Fasso</option>
               <option value="BI">Burúndi</option>
               <option value="BT">Butão</option>
               <option value="CV">Cabo Verde</option>
               <option value="CM">Camarões</option>
               <option value="KH">Camboja</option>
               <option value="CA">Canadá</option>
               <option value="QA">Catar</option>
               <option value="KZ">Cazaquistão</option>
               <option value="TD">Chade</option>
               <option value="CL">Chile</option>
               <option value="CN">China</option>
               <option value="CY">Chipre</option>
               <option value="SG">Cingapura</option>
               <option value="CO">Colômbia</option>
               <option value="KM">Comores</option>
               <option value="MP">Comunidade das Ilhas Marianas Setentrionais</option>
               <option value="CG">Congo (Brazzaville)</option>
               <option value="CD">Congo (Kinshasa)</option>
               <option value="KP">Coréia do Norte</option>
               <option value="KR">Coréia do Sul</option>
               <option value="CR">Costa Rica</option>
               <option value="CI">Costa do Marfim</option>
               <option value="HR">Croácia</option>
               <option value="CU">Cuba</option>
               <option value="CW">Curaçao</option>
               <option value="DK">Dinamarca</option>
               <option value="DJ">Djibouti</option>
               <option value="DM">Dominica</option>
               <option value="EG">Egito</option>
               <option value="SV">El Salvador</option>
               <option value="AE">Emirados Árabes Unidos</option>
               <option value="EC">Equador</option>
               <option value="ER">Eritreia</option>
               <option value="SK">Eslováquia</option>
               <option value="SI">Eslovenia</option>
               <option value="ES">Espanha</option>
               <option value="US">Estados Unidos</option>
               <option value="EE">Estônia</option>
               <option value="ET">Etiópia</option>
               <option value="FJ">Fiji</option>
               <option value="PH">Filipinas</option>
               <option value="FI">Finlândia</option>
               <option value="FR">França</option>
               <option value="GA">Gabão</option>
               <option value="GM">Gâmbia</option>
               <option value="GH">Gana</option>
               <option value="GE">Geórgia</option>
               <option value="GI">Gibraltar</option>
               <option value="GD">Granada</option>
               <option value="GR">Grécia</option>
               <option value="GL">Groenlândia</option>
               <option value="GP">Guadalupe</option>
               <option value="GU">Guam</option>
               <option value="GT">Guatemala</option>
               <option value="GG">Guernsey</option>
               <option value="GY">Guiana</option>
               <option value="GF">Guiana Francesa</option>
               <option value="GN">Guiné</option>
               <option value="GQ">Guiné Equatorial</option>
               <option value="GW">Guiné-Bissau</option>
               <option value="HT">Haiti</option>
               <option value="NL">Holanda</option>
               <option value="HN">Honduras</option>
               <option value="HK">Hong Kong</option>
               <option value="HU">Hungria</option>
               <option value="YE">Iémen</option>
               <option value="BV">Ilha Bouvet</option>
               <option value="CX">Ilha Christmas</option>
               <option value="HM">Ilha Heard e Ilhas McDonald</option>
               <option value="NF">Ilha Norfolk</option>
               <option value="IM">Ilha de Man</option>
               <option value="MF">Ilha de São Martinho (República Francesa)</option>
               <option value="AX">Ilhas Aland</option>
               <option value="KY">Ilhas Cayman</option>
               <option value="CC">Ilhas Cocos</option>
               <option value="CK">Ilhas Cook</option>
               <option value="FO">Ilhas Feroe</option>
               <option value="GS">Ilhas Geórgia do Sul e Sandwich do Sul</option>
               <option value="FK">Ilhas Malvinas</option>
               <option value="MH">Ilhas Marshall</option>
               <option value="UM">Ilhas Menores Distantes, Estados Unidos da América (EUA)</option>
               <option value="PN">Ilhas Pitcairn</option>
               <option value="SB">Ilhas Salomão</option>
               <option value="TC">Ilhas Turcas e Caicos</option>
               <option value="VI">Ilhas Virgens (EUA)</option>
               <option value="VG">Ilhas Virgens Britânicas</option>
               <option value="IN">Índia</option>
               <option value="ID">Indonésia</option>
               <option value="IR">Irã</option>
               <option value="IQ">Iraque</option>
               <option value="IE">Irlanda</option>
               <option value="IS">Islândia</option>
               <option value="IL">Israel</option>
               <option value="IT">Itália</option>
               <option value="JM">Jamaica</option>
               <option value="JP">Japão</option>
               <option value="JE">Jersey</option>
               <option value="JO">Jordânia</option>
               <option value="KW">Kuweit</option>
               <option value="LA">Laos</option>
               <option value="LV">Látvia</option>
               <option value="LS">Lesoto</option>
               <option value="LB">Líbano</option>
               <option value="LR">Libéria</option>
               <option value="LY">Líbia</option>
               <option value="LI">Liechtenstein</option>
               <option value="LT">Lituânia</option>
               <option value="LU">Luxemburgo</option>
               <option value="MO">Macao</option>
               <option value="MK">Macedônia do Norte</option>
               <option value="MG">Madagascar</option>
               <option value="MY">Malásia</option>
               <option value="MW">Malawi</option>
               <option value="MV">Maldivas</option>
               <option value="ML">Mali</option>
               <option value="MT">Malta</option>
               <option value="MA">Marrocos</option>
               <option value="MQ">Martinica</option>
               <option value="MU">Maurício</option>
               <option value="MR">Mauritânia</option>
               <option value="YT">Mayotte</option>
               <option value="MX">México</option>
               <option value="FM">Micronésia</option>
               <option value="MZ">Moçambique</option>
               <option value="MD">Moldávia</option>
               <option value="MC">Mônaco</option>
               <option value="MN">Mongólia</option>
               <option value="ME">Montenegro</option>
               <option value="MS">Montserrat</option>
               <option value="NA">Namíbia</option>
               <option value="NR">Nauru</option>
               <option value="NP">Nepal</option>
               <option value="NI">Nicarágua</option>
               <option value="NE">Níger</option>
               <option value="NG">Nigéria</option>
               <option value="NU">Niue</option>
               <option value="NO">Noruega</option>
               <option value="NC">Nova Caledónia</option>
               <option value="NZ">Nova Zelândia</option>
               <option value="OM">Omã</option>
               <option value="BQ">Países baixos Caribenhos</option>
               <option value="PA">Panamá</option>
               <option value="PG">Papua-Nova Guiné</option>
               <option value="PK">Paquistão</option>
               <option value="PY">Paraguai</option>
               <option value="PE">Peru</option>
               <option value="PF">Polinésia Francesa</option>
               <option value="PL">Polônia</option>
               <option value="PR">Porto Rico</option>
               <option value="PT">Portugal</option>
               <option value="KE">Quênia</option>
               <option value="KG">Quirguistão</option>
               <option value="KI">Quiribáti</option>
               <option value="GB">Reino Unido (UK)</option>
               <option value="CZ">República Checa</option>
               <option value="DO">República Dominicana</option>
               <option value="CF">República da África Central</option>
               <option value="MM">República da União de Myanmar</option>
               <option value="RE">Reunião</option>
               <option value="RO">Romênia</option>
               <option value="RW">Ruanda</option>
               <option value="RU">Rússia</option>
               <option value="EH">Saara Ocidental</option>
               <option value="SX">Saint Martin (parte Holandesa)</option>
               <option value="PM">Saint-Pierre e Miquelon</option>
               <option value="WS">Samoa</option>
               <option value="AS">Samoa Americana</option>
               <option value="SM">San Marino</option>
               <option value="SH">Santa Helena</option>
               <option value="LC">Santa Lúcia</option>
               <option value="BL">São Bartolomeu</option>
               <option value="KN">São Cristóvão e Nevis</option>
               <option value="ST">São Tomé e Príncipe</option>
               <option value="VC">São Vicente e Granadinas</option>
               <option value="SN">Senegal</option>
               <option value="SL">Serra Leoa</option>
               <option value="RS">Sérvia</option>
               <option value="SC">Seychelles</option>
               <option value="SY">Síria</option>
               <option value="SO">Somália</option>
               <option value="LK">Sri Lanka</option>
               <option value="SZ">Suazilândia</option>
               <option value="SD">Sudão</option>
               <option value="SS">Sudão do Sul</option>
               <option value="SE">Suécia</option>
               <option value="CH">Suiça</option>
               <option value="SR">Suriname</option>
               <option value="SJ">Svalbard e Jan Mayen</option>
               <option value="TH">Tailândia</option>
               <option value="TW">Taiwan</option>
               <option value="TJ">Tajiquistão</option>
               <option value="TZ">Tanzânia</option>
               <option value="IO">Território Britânico do Oceano Índico</option>
               <option value="PS">Território Palestino</option>
               <option value="TF">Território das Terras Austrais e Antárcticas Francesas</option>
               <option value="TL">Timor-Leste</option>
               <option value="TG">Togo</option>
               <option value="TK">Tokelau</option>
               <option value="TO">Tonga</option>
               <option value="TT">Trinidad e Tobago</option>
               <option value="TN">Tunísia</option>
               <option value="TM">Turcomenistão</option>
               <option value="TR">Turquia</option>
               <option value="TV">Tuvalu</option>
               <option value="UA">Ucrânia</option>
               <option value="UG">Uganda</option>
               <option value="UY">Uruguai</option>
               <option value="UZ">Uzbequistão</option>
               <option value="VU">Vanuatu</option>
               <option value="VA">Vaticano</option>
               <option value="VE">Venezuela</option>
               <option value="VN">Vietnã</option>
               <option value="WF">Wallis e Futuna</option>
               <option value="ZM">Zâmbia</option>
               <option value="ZW">Zimbábue</option>
            </select>
      <noscript><button type="submit" name="woocommerce_checkout_update_totals" value="Atualizar país">Atualizar país</button></noscript></span></p>
      <p class="form-row form-row-wide validate-required validate-phone" id="billing_phone_field" data-priority="50"><label for="billing_phone" class="">Telefone&nbsp;<abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="tel" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value="(11) 99664-4255" data-qa-id="Telefone" autocomplete="tel"></span></p>
      <p class="form-row form-row-wide address-field validate-required validate-postcode" id="billing_postcode_field" data-priority="60" data-o_class="form-row form-row-wide address-field validate-required validate-postcode"><label for="billing_postcode" class="">CEP&nbsp;<abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_postcode" id="billing_postcode" placeholder="" value="06706-062" data-qa-id="CEP" autocomplete="postal-code"></span></p>
      <p class="form-row form-row-wide address-field validate-required woocommerce-validated" id="billing_address_1_field" data-priority="70" style="display: block;"><label for="billing_address_1" class="">Endereço&nbsp;<abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_address_1" id="billing_address_1" placeholder="Nome da rua e número da casa" value="Rua Antônio de Camargo" data-qa-id="Endereço" autocomplete="address-line1"></span></p>
      <p class="form-row form-row-wide address-field woocommerce-validated" id="billing_address_2_field" data-priority="80" style="display: block;"><label for="billing_address_2" class="screen-reader-text">Apartamento, suíte, unidade, etc. (opcional)&nbsp;<span class="optional">(opcional)</span></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_address_2" id="billing_address_2" placeholder="Apartamento, suíte, unidade, etc. (opcional)" value="São Paulo II" autocomplete="address-line2"></span></p>
      <p class="form-row form-row validate-required" id="billing_billing_number_field" data-priority="90"><label for="billing_billing_number" class="">Número&nbsp;<abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_billing_number" id="billing_billing_number" placeholder="" value="" data-qa-id="Número"></span></p>
      <p class="form-row form-row-wide address-field validate-required woocommerce-validated" id="billing_city_field" data-priority="100" data-o_class="form-row form-row-wide address-field validate-required" style="display: block;"><label for="billing_city" class="">Cidade&nbsp;<abbr class="required" title="obrigatório">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_city" id="billing_city" placeholder="" value="Cotia" data-qa-id="Cidade" autocomplete="address-level2"></span></p>
      <p class="form-row form-row-wide address-field validate-required validate-state woocommerce-validated" id="billing_state_field" data-priority="110" data-o_class="form-row form-row-wide address-field validate-required validate-state" style="display: block;">
         <label for="billing_state" class="">Estado&nbsp;<abbr class="required" title="obrigatório">*</abbr></label>
         <span class="woocommerce-input-wrapper">
            <select name="billing_state" id="billing_state" class="state_select " data-qa-id="Estado" autocomplete="address-level1" data-placeholder="Selecione uma opção…" data-input-classes="">
               <option value="">Selecione uma opção…</option>
               <option value="AC">Acre</option>
               <option value="AL">Alagoas</option>
               <option value="AP">Amapá</option>
               <option value="AM">Amazonas</option>
               <option value="BA">Bahia</option>
               <option value="CE">Ceará</option>
               <option value="DF">Distrito Federal</option>
               <option value="ES">Espírito Santo</option>
               <option value="GO">Goiás</option>
               <option value="MA">Maranhão</option>
               <option value="MT">Mato Grosso</option>
               <option value="MS">Mato Grosso do Sul</option>
               <option value="MG">Minas Gerais</option>
               <option value="PA">Pará</option>
               <option value="PB">Paraíba</option>
               <option value="PR">Paraná</option>
               <option value="PE">Pernambuco</option>
               <option value="PI">Piauí</option>
               <option value="RJ">Rio de Janeiro</option>
               <option value="RN">Rio Grande do Norte</option>
               <option value="RS">Rio Grande do Sul</option>
               <option value="RO">Rondônia</option>
               <option value="RR">Roraima</option>
               <option value="SC">Santa Catarina</option>
               <option value="SP" selected="selected">São Paulo</option>
               <option value="SE">Sergipe</option>
               <option value="TO">Tocantins</option>
            </select>
         </span>
      </p>
   </div>
</div>

I know it’s not a good practice, but it’s a temporary solution

Thank you very much!

Tags:

2

Answers


  1. 0 
    document.querySelector('.woocommerce-billing-fields > h3:first-child').innerHTML = 'text you want to display';

    The above code uses vanilla javascript to select the first h3 found within the first container with class woocommerce-billing-fields. You can then manipulate its contents by updating its innerHTML property.

    The syntax of the selector used in querySelector matches the same way you would scope that field in CSS. More info on querySelector here:

    https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

    Login or Signup to reply.
  2. 0

    You can use the selector:
    '.woocommerce-billing-fields > h3:first-of-type'

    The > is a child combinator. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Basically, it looks only at first-level descendants.

    The h3:first-of-type selects the first element of its type (which in this case is h3) among a group of sibling elements.

    So the selector '.woocommerce-billing-fields > h3:first-of-type' will select amongst the first-level descendants of your containing div (.woocommerce-billing-fields), the first h3 it finds.

    References:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search