JavaScript – Manipulação de Elementos no DOM

A manipulação do DOM (Document Object Model) com JavaScript é um aspecto fundamental do desenvolvimento web. O DOM é uma representação da estrutura hierárquica de elementos HTML em uma página da web, e JavaScript permite que você acesse, modifique e manipule esses elementos dinamicamente. Neste artigo veremos alguns conceitos e técnicas básicas para a manipulação do DOM com JavaScript:

Selecionar elementos do DOM:

Podemos selecionar elementos HTML usando os métodos:

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

document.querySelector()

document.querySelectorAll()

Selecionando um elemento pelo ID

const element = document.getElementById(‘meuElemento’);

Selecionando elementos por classe

const elements = document.getElementsByClassName(‘minhaClasse’);

Seleciona elementos por tag

const elementos = document.getElementsByTagName(‘p’);

Seleciona o primeiro elemento que corresponde a um seletor CSS

const elemento = document.querySelector(‘.minhaClasse’);

Seleciona todos os elementos que correspondem a um seletor CSS

const elementos = document.querySelectorAll(‘p.minhaClasse’);

Modificar o conteúdo e os atributos:

Podemos alterar o conteúdo de elementos e atributos usando propriedades como:

innerHTML,  textContent, e setAttribute()

Por exemplo:

const element = document.getElementById(‘meuElemento’);

element.innerHTML = ‘Novo conteúdo’;

element.textContent = ‘Texto de conteúdo’;

element.setAttribute(‘id’, ‘novoID’);

Adicionar e remover elementos

Você pode adicionar novos elementos ou remover elementos existentes do DOM. Por exemplo:

Criar um novo elemento

const novoElemento = document.createElement(‘div’);

Adicionar o novo elemento como filho de outro elemento

const container = document.getElementById(‘container’);

container.appendChild(novoElemento);

Remover um elemento

const elementoParaRemover = document.getElementById(‘elementoParaRemover’);

elementoParaRemover.parentNode.removeChild(elementoParaRemover);

Eventos

O JavaScript permite que a atribuição de eventos a elementos HTML para responder a ações do    usuário, como cliques, mouseovers, etc.

Por exemplo:

const botao = document.getElementById(‘meuBotao’);

botao.addEventListener(‘click’, function() {

alert(‘Botão clicado’);

});

Manipulação de classes CSS:

Podemos adicionar, remover ou alternar classes CSS em elementos para controlar sua aparência e comportamento.

Por exemplo:

const elemento = document.getElementById(‘meuElemento’);

elemento.classList.add(‘minhaClasse’);

elemento.classList.remove(‘outraClasse’);

elemento.classList.toggle(‘classeAlternada’);

Essas são apenas algumas das muitas maneiras de manipular o DOM com JavaScript. A manipulação do DOM é uma habilidade essencial para criar aplicativos web interativos e dinâmicos.

READ MORE

Pontuação, Hierarquia e Sequência dos Seletores CSS

Pontuação entre ID, classe e tag

No CSS, a pontuação entre o ID, a classe e a tag é usada para especificar a especificidade de um seletor. A qual determina qual estilo será aplicado a um elemento quando há conflito entre regras CSS. A regra geral é que seletores mais específicos têm prioridade sobre os seletos menos específicos. Aqui está como a pontuação funciona:

Tag: Um seletor de tag, como “p” para parágrafos ou “div” para divisões, tem a menor especificidade e, portanto, a menor pontuação. Ele é representado como “0,0,0,1” na contagem de especificidade.

Classe: Um seletor de classe, como “.classe”, tem uma especificidade maior do que um seletor de tag e é representado como “0,0,1,0”. A diferença é que agora temos “1” na segunda posição.

ID: Um seletor de ID, como “#id”, tem a maior especificidade e é representado como “0,1,0,0”. Neste caso, temos “1” na terceira posição.

A contagem de especificidade é representada por quatro números, que indicam a importância dos seletores na seguinte ordem: IDs, classes e atributos, seletores de elementos e seletores universais.

Aqui está um exemplo para ilustrar como a especificidade funciona:

#minhaId { /* Especificidade: 0,1,0,0 */
  color: red;
}
.classe { /* Especificidade: 0,0,1,0 */
  color: blue;
}
p { /* Especificidade: 0,0,0,1 */
  color: green;
}

Se você tiver um elemento com a classe “.classe” e um ID “#minhaId”, a cor será vermelha, porque o seletor de ID tem uma especificidade maior do que o seletor de classe.

Em casos de conflito, o seletor com a maior especificidade terá prioridade. É importante ter em mente a especificidade ao escrever regras CSS para garantir que os estilos sejam aplicados conforme desejado.

Hierarquia dos Seletores

A hierarquia dos seletores CSS, também conhecida como cascata, é o princípio pelo qual o navegador decide quais estilos aplicar a um elemento quando vários seletores se aplicam a ele. A hierarquia é baseada na especificidade e na ordem de declaração das regras CSS. Aqui está a hierarquia dos seletores em ordem de prioridade:

Importância do Estilo: A regra de importância mais alta é a que tem maior precedência. Isso pode ser definido usando a propriedade “!important”. Quando uma regra tem “!important”, ela sempre prevalecerá, independentemente da especificidade ou da ordem de declaração.

.exemplo {
  color: red !important;
}

.exemplo {

  color: red !important;

}

Especificidade: A especificidade dos seletores é a próxima consideração. Seletor com maior especificidade terá prioridade sobre os seletores com menor especificidade. A hierarquia de especificidade é geralmente representada como “a,b,c,d”, onde “a” é o número de IDs, “b” é o número de classes, atributos e pseudo-classes, “c” é o número de seletores de elementos e “d” é o número de seletores universais.

#meuId {

  color: blue; /* Maior especificidade (0,1,0,0) */

}

.classe {

  color: green; /* Menor especificidade (0,0,1,0) */

}

p {

  color: red;

}

Ordem de Declaração: Se dois seletores têm a mesma especificidade, o último declarado no arquivo CSS terá precedência. A ordem de declaração segue a regra do último seletor encontrado.

.exemplo {

  color: red;

}

.exemplo {

  color: blue; /* Este estilo será aplicado, pois é o último */

}

Herança: Se nenhum dos fatores acima decidir o estilo de um elemento, o navegador recorre à herança. Isso significa que o elemento herdará o estilo de seu pai, a menos que haja uma regra mais específica para ele.

Seletores de Descendência e Filhos: Seletores de descendência (espaço em branco) e seletores de filho direto (“>”) também têm uma hierarquia. Por exemplo, um seletor mais específico dentro de uma hierarquia terá prioridade sobre um mais genérico.

div p { /* Estilos aplicados aos parágrafos dentro de divs */

  color: purple;

}

Em resumo, a hierarquia dos seletores CSS é uma maneira de determinar quais estilos serão aplicados a um elemento com base na especificidade, na ordem de declaração e em outras regras de cascata. Entender essa hierarquia é fundamental para o desenvolvimento web eficaz e o controle dos estilos em uma página.

Sequência de seletores

Em CSS, você pode criar seletores de várias maneiras para especificar quais elementos HTML receberão um estilo. Os seletores podem ser combinados para criar sequências mais complexas e específicas. Aqui estão alguns exemplos de sequências de seletores comuns:

Seletor de Tag: Isso seleciona todos os elementos com a tag especificada.

   p {

     /* Estilos aplicados a todos os parágrafos */

   }

Seletor de Classe: Isso seleciona todos os elementos que possuem uma classe correspondente.

   .classe {

     /* Estilos aplicados a todos os elementos com a classe “classe” */

   }

Seletor de ID: Isso seleciona um elemento específico com o ID correspondente.

   #id {

     /* Estilos aplicados ao elemento com o ID “id” */

   }

Seletor de Descendência: Isso seleciona elementos que estão aninhados dentro de outros elementos.

   div p {

     /* Estilos aplicados aos parágrafos dentro de divs */

   }

Seletor de Filho Direto: Isso seleciona elementos que são filhos diretos de um elemento específico.

ul > li {

  /* Estilos aplicados apenas às listas que são filhas diretas de elementos <ul> */

}

Seletor de Atributo: Isso seleciona elementos com um atributo específico.

[type=”text”] {

  /* Estilos aplicados a elementos com o atributo “type” definido como “text” */

}

Seletor de Pseudo-Classe: Isso seleciona elementos com base em estados ou interações específicas do usuário.

 a:hover {

     /* Estilos aplicados a links quando o cursor paira sobre eles */

   }

Combinando Seletores: Você também pode combinar vários seletores para criar sequências mais complexas. Por exemplo, “tag.class” selecionará elementos que têm a classe dentro de elementos com a tag correspondente.

   p.destaque {

     /* Estilos aplicados a parágrafos com a classe “destaque” */

   }

Estas são apenas algumas das muitas possibilidades de sequências de seletores em CSS. A combinação de seletores permite que você aplique estilos de forma seletiva e específica aos elementos HTML em suas páginas da web.

Em resumo, a compreensão da pontuação, hierarquia e sequência dos seletores CSS é essencial para controlar como os estilos são aplicados a elementos em uma página da web. A especificidade dos seletores, a relação hierárquica entre elementos e a ordem das regras definidas desempenham um papel crucial na resolução de conflitos de estilo e na criação de layouts e designs consistentes e desejados. É importante equilibrar a especificidade com a facilidade de manutenção para criar folhas de estilo CSS eficazes e de fácil gerenciamento.

READ MORE

O que é uma Position CSS?

O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para controlar a apresentação e o Layout de elementos HTML em uma página web. O posicionamento é uma parte importante do CSS, pois determina como os elementos são dispostos na página em relação a outros elementos e ao próprio fluxo do documento.

Para a propriedade position, podemos atribuir 5 valores, que são: static, fixed, sticky, relative, absolute.

Vamos entender como funciona cada uma delas:

Position Static (Estático):

É um comportamento padrão do HTML, onde os elementos são posicionados em ordem, de cima para baixo e da esquerda para a direita.

Elementos em fluxo normal não aceitam propriedades CSS especiais para o seu posicionamento.

Position Fixed (Fixo):

O posicionamento fixo, faz com que o elemento que recebeu esta propriedade não se mova na tela. Mesmo que a página possua rolamento (scroll), tanto rolando para a esquerda e direita, quanto para cima e para baixo. Um exemplo seria usar uma barra de navegação lateral onde a mesma ficaria fixa, a navegação fica sempre visível durante o uso da página.

Exemplo:

.teste {

      position: fixed;

      height: 1000px;

}


Position Sticky (Colado/pegajoso):

Este posicionamento precisa de um posicionamento de referência, por tanto é sempre em conjunto das propriedades auxiliares. Parecido com o fixed, mas sua diferença, é que em vez de ficar fixo em relação a tela, fica fixo em relação a rolagem da página.

Exemplo:

.teste {

       position: sticky;

        top: 0px;

}

Position Relative (Relativo):

O posicionamento relativo serve para posicionar o elemento da página de acordo com as indicações que você definir.

A posição é definida através de quatro outras propriedades: top, bottom, left, right, que indicam a distância com relação ao topo, base, esquerda e direita, respectivamente, tomando como referência o posicionamento do elemento pai.

Exemplo:

.teste {

      position: relative;

      left: 150px;

}

Position Absolute (Absoluto):

A posição será definida em relação ao próximo elemento pai que esteja posicionado relativamente ou absolutamente.

Se não houver um elemento pai definido, por padrão ele irá definir o próprio documento HTML como sua raiz, significa que a posição será definida em relação à própria página web.

Exemplo:

.teste {

      position: absolute;

      top: 50px;

       left: 50px;

}

A diferença entre o position relative e o position absolute é basicamente qual elemento será usado como referência para realizar o posicionamento. O relative leva em consideração sua própria posição ao se deslocar. E o absolute leva em consideração a posição do elemento pai que possua um position relative, ou então será relativo ao próprio navegador. 

Em resumo, o posicionamento CSS é uma ferramenta poderosa para controlar o layout e o design de páginas da web. É essencial entender as propriedades de posicionamento e usá-las de forma adequada para criar layouts desejados e funcionais. Além disso, ao projetar para a web, é importante levar em consideração a responsividade e a adaptabilidade a diferentes dispositivos e tamanhos de tela.

READ MORE

Semana começa com queda de 3 dos maiores aplicativos: WhatsApp, Facebook e Instagram

Se você desconectou a sua internet pensando que o problema era com o seu Wi-fi, calma, foram o WhatsApp, Facebook e Instagram no mesmo dia!

De acordo com o site Down Detector, conhecido por apontar falhas em serviços na internet, o problema não aconteceu somente no Brasil:  houve relatos de instabilidade em diversas regiões do planeta, incluindo América Latina e Europa. 

Sim, isto mesmo! Parece que nesta segunda-feira dia 04 de outubro a dor de cabeça foi maior para Marck Zuckerberg e seus desenvolvedores. 

As falhas começaram por volta das 12h20 (horário de Brasília) e acabou prejudicando social midias, e o setor de atendimento de diversas empresas.

Já não é a primeira vez que acontece e muito menos a última, mas 3 plataformas no mesmo dia, pode pedir música, não é mesmo tio Zuck?

Quem utiliza o Twitter pode se atualizar e também se divertir com memes e brincadeiras sobre a produção nesta segunda -feira.

O fato é que empresas investem alto nestes canais de comunicação, e dependem deles para lucrarem, mas a pergunta que fica é: como foi o dia destes players com as plataformas fora do ar? 

Bom, a semana já começa nos mostrando que no marketing digital, precisamos diversificar nossos processos e sempre que possível, canalizar a nossa comunicação de forma mais inteligente, seja através de sites otimizados, processos interno, ou até mesmo e-mails marketing.

Desta forma, reduzimos o dano com a queda destes aplicativos em nosso dia a dia.

READ MORE

O que é WordPress e como funciona sua estrutura de dados

WordPress é um “Sistema de gerenciamento de conteúdo” de código aberto e livre com o objetivo de facilitar a criação de sites e blogs, sem a necessidade de ter um conhecimento prévio em programação.
O código do WordPress utiliza o PHP como linguagem back-end, e MySQL (ou MariaDB), como gerenciador do banco de dados.
Pode-se usá-lo para o desenvolvimento de sites de e-commerce, portfólios profissionais, publicação de eventos, divulgação científica ou qualquer tipo de conteúdo de forma textual e gráfica.
E esse é só o começo do porque usar wordpress.

Páginas e Posts, qual a diferença?

Páginas

• São atemporais;
• organização hierárquica (pai/filho);
• Não tem autor nem data de publicação.

Posts

• São oportunos;
• Organizados por taxonomias;
• Precisam de um autor e uma data.

Embora eles sejam diferentes, o armazenamento desses posts acontece no mesmo lugar, na tabela wp_post. Oque vai diferenciar essas duas coisas dentro da tabela é a coluna “post_type”, tipo de post, onde vai estar armazenado se o post é do tipo página, post, attachment etc…
Por Exemplo:

Tabela wp_post

O que é Post meta?

Também chamados de “custom field”, são os campos do post que não fazem parte dos campos padrões, como o título, o conteúdo, ou o autor do post.
Por exemplo:

Nesse projeto criamos um post do tipo “despachante”, e precisamos também criar muitos post meta para armazenar as informações sobre esses despachantes. E é assim que vai aparecer no ambiente administrativo.

Já no banco de dados as informações ficam armazenadas desta forma:

Todos os posts meta de todos os tipos de post vão ficar armazenados nessa tabela chamada wp_post_meta.

O que é Taxonomia?

É uma forma fácil e prática de agrupar posts, garantindo que seja fácil pro usuário achar dentro do site conteúdos relacionados. Por padrão o Post já vem com as taxonomias categoria e tags, mas o wordPress disponibiliza uma função para que possamos criar nossas taxonomias personalizadas.
Por exemplo:

Usando o mesmo exemplo do projeto citado acima, criamos três taxonomias para agrupar os despachantes.

Já no banco de dados as taxonomias e seus termos são armazenados desta forma:

Essa é a tabela wp_term_taxonomy, onde ficam armazenados todas as taxonomias e seus termos.

Essa é a tabela wp_terms, onde ficam armazenados todos os termos.

Essa é a tabela wp_term_relationships, onde fizam armezados os termos e os posts aos quais este termo está relacionado.

Espero que tenha conseguido clarear um pouco mais na sua cabeça como funciona a estrutura de dados do nosso queridinho WordPress.
O que você achou desse artigo? Deixa um comentário vai, nunca te pedi nada <3

READ MORE

Como criar um lightbox

É muito comum que sites que possuem galeria de fotos precisem de um lightbox para poder ver melhor as fotos. Existem muitos plugins pra isso, mas plugins podem dar problemas ao longo do tempo. Então criei um lightbox simples, que você pode personalizar como quiser.
Na página onde você possui a galeria de fotos, no meu caso a galeria fica na single-product.php, vamos colocar este código html:

<div class="lightbox-product">
    <a class="btn-blue prev-photo"><i class="fas fa-caret-left"></i></a>
        <div class="content-light-img">
            <a class="btn-blue close-light"><i class="fas fa-times"></i></a>
            <img>
        </div>
    <a class="btn-blue next-photo"><i class="fas fa-caret-right"></i></a>
</div>

E no arquivo JS vão os códigos:
– Esse bloco pega as informações da foto clicada, pego o src da imagem e o id e coloco na tag <img> que está dentro do ‘content-light-img’;

   $('.thumbnail-principal').on('click', function(){
       var src =  $('.thumbnail-principal .slick-current').attr('src');
       var id =  $('.thumbnail-principal .slick-current').attr('id');
        $('.lightbox-product img').attr('src',src);
        $('.lightbox-product img').attr('id',id);
         $('.lightbox-product').fadeIn();
         $('.lightbox-product').css('display','flex');
    });

– Este código é o do botão que passa para a próxima foto, pegamos o id da foto atual dentro do lightbox e contamos a quantidade de fotos dentro do container, se o id for igual a quantidade de fotos voltamos para 1 senão soma-se mais 1 ao id.  Com o resultado dessa soma pegamos as informações da próxima foto.

    $('.next-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == photos){
            var result = 1;
        } else {
            var result = parseInt(id) + 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

 
– Esse código é do botão que volta uma foto, como no botão next pegamos todas as informações da foto que está no lightbox só que ao contrário do outro subtraímos 1 do id, e quando id for igual a 1 dizemos ao contador que ele é igual a quantidade de fotos dentro do container.

    $('.prev-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == 1){
            var result = photos;
        } else {
            var result = parseInt(id) - 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

– E por ultimo esse código que fecha o lightbox;

    $('.close-light').on('click', function(){
        $('.lightbox-product').fadeOut();
    });

E esse foi o resultado:
lightbox
Nesse lightbox eu usei os efeitos de Fade do javascript, mas você pode animar da forma que achar melhor.
Espero ter ajudado, e até a próxima!

READ MORE
widget

Criando área de widget

O que seria a área de widget? Bom, ela pode ser seu sidebar ou um menu no rodapé da página por exemplo, você decide. Eu usei como sidebar no site em que estava desenvolvendo.
Para adicionar a área de widget usamos a função abaixo:

function widgets_novos_widgets_init() {
                 register_sidebar( array(
                                'name' => 'Sidebar',
                                'id' => 'sidebar_widgets',
                                'before_widget' => '<div class="sidebar">',
                                'after_widget' => '</div>',
                                'before_title' => '<h2>',
                                'after_title' => '</h2>',
                 ) );
 }
 add_action( 'widgets_init', 'widgets_novos_widgets_init' );

Ela vai aparecer no painel do wordpress em Aparência > Widgets, assim:
result
Para mostrar o widget na página desejada usamos a seguinte função:

dynamic_sidebar('sidebar_widgets');

Em ‘sidebar_widgets’ vai o id que você deu ao seu widget.
Espero ter ajudado, e até a próxima.

READ MORE
wordpress

Como adicionar campo para classe no widget do WordPress

Pra que você otimize seu tempo e seu projeto, segue uma dica super importante sobre o wordpress.
Estava desenvolvendo um projeto e precisava de um campo para colocar uma classe personalizada que pudesse diferenciar um widget do outro. Então achei essa função:

function field_in_widget_form($t,$return,$instance){
 $instance = wp_parse_args( (array) $instance, array( 'widget_class' => '') );
 if($instance['widget_class'] != ''){
 $value = $instance['widget_class'];
 }else{
 $value = '';
 }
 ?>

(Essa parte você pode personalizar o campo, usando outas tags, tipo de input etc…)

 <p> <input id="<?php echo $t->get_field_id('widget_class'); ?>" name="<?php echo $t->get_field_name('widget_class'); ?>" type="text" value="<?php echo $value; ?>" />
 <label for="<?php echo $t->get_field_id('widget_class'); ?>"><?php _e('Adicionar Classe'); ?></label>   </p>
 <?php
 $return = null;
 return array($t,$return,$instance);
 }
 add_action('in_widget_form', ' field _in_widget_form',5,3);

Onde está ‘widget_class’ vai o nome  que você quiser colocar para seu campo.
E para salvar o valor no seu novo campo usamos essa outra função:

function field_in_widget_form_update($instance, $new_instance, $old_instance){        $instance['widget_class'] = $new_instance['widget_class'];
 return $instance;
 }
 add_filter('widget_update_callback', ' field _in_widget_form_update',5,3);

E prontinho, agora você tem um campo para pôr classes no seu widget.
exemplo

READ MORE
woo

Saiba como adicionar Custom Fields nos dados gerais do produto (woocommerce)

No cadastro de produtos do woocommerce tem uma tabela com vários dados sobre o produto, nesse artigo vou ensinar como colocar campos novos na aba “Geral”, que é a primeira aba que aparece aberta.
sem-campo
Eu precisava de campos para colocar preço de atacado nos produtos, então adicionei a seguinte função no meu arquivo functions.php:
add_action(‘woocommerce_product_options_general_product_data’,’woo_add_custom_general_fields’ );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo ‘<div class=”options_group”>’;
echo ‘<h2>Atacado</h2>’;
woocommerce_wp_text_input(array(
‘id’                => ‘_regular_price_wholesale’,
‘class’             => ‘short wc_input_price’,
‘label’             => __( ‘Preço (R$)’, ‘woocommerce’ ),
‘placeholder’       => ”,
‘type’              => ‘text’,
)
);
woocommerce_wp_text_input(array(
‘id’                => ‘_sale_price_wholesale’,
‘class’             => ‘short wc_input_price’,
‘label’             => __( ‘Preço promocional (R$)’, ‘woocommerce’ ),
‘placeholder’       => ”,
‘type’              => ‘text’,
)
);
echo ‘</div>’;
}
Você pode personalizar os nomes dos campos , classes, placeholder, tipo de input e etc…
Após adicionar os campos que você deseja precisará salvar eles também, e pra isso utilizamos essa outra função, também no arquivo funtions.php:
add_action( ‘woocommerce_process_product_meta’, ‘woo_add_custom_general_fields_save’ );
function woo_add_custom_general_fields_save( $post_id ){
$woocommerce_text_field = $_POST[‘_regular_price_wholesale’];
$_woocommerce_text_field = $_POST[‘_sale_price_wholesale’];
if( !empty( $woocommerce_text_field ) ){
update_post_meta( $post_id, ‘_regular_price_wholesale’, esc_attr( $woocommerce_text_field ) );
}
if( !empty( $_woocommerce_text_field ) ){
update_post_meta( $post_id, ‘_sale_price_wholesale’, esc_attr( $_woocommerce_text_field ) );
}
}
com-campo
E esse foi o resultado! Espero ter ajudado, e até a próxima.

READ MORE

Aprenda como reorganizar os campos de checkout do woocommerce

Quando o usuário vai finalizar uma compra o woocommerce mostra os campos do checkout organizados da forma padrão, só que o projeto que eu estava desenvolvendo pedia por uma disposição dos campos de forma diferente. Então pesquisando achei uma solução simples e que funciona muito bem.
Na pasta checkout do woocommerce tem um arquivo de nome form-billing.php, nele estão os campos que aparecem no checkout. Você vai copiar a pasta e o arquivo para o seu tema para pode editar.
Ao abrir o arquivo ele estará desta forma:
foreach
 
Ele distribui os campos através de um foreach, então para mudar os campos vamos mexer nessa função, e ela ficará desta forma:
second-foreach
Você vai colocar os nomes dos campos na ordem em que deseja dentro de um array(), e depois fazer um foreach para mostras os campos utilizando a própria função do woocommerce: woocommerce_form_field(), como no exemplo acima. Eu fiz dois foreach por que queria colocar em divs diferentes, mas você poderá personalizar como quiser.

READ MORE
  • 1
  • 2