Adicionando status de estoque personalizado usando JetEngine

Vá para o  diretório WordPress Dashboard > Crocoblock > Woo Page Builder  e abra um modelo de página de produto único para começar a criar os emblemas.

Na  Origem  do widget, selecione  Metadados  na lista. No  Custom Meta Field , especifique o nome do campo, que é   _stock .

Se você quiser exibir algo além da quantidade, como algum texto adicional, role até a parte inferior da  guia Conteúdo  e ative a   opção Personalizar saída do campo . Insira o texto necessário na  caixa Formato do campo  , por exemplo,  itens em estoque .

Vá para a  aba Estilo  e personalize o emblema de acordo com suas necessidades.

” alt=”distintivo de status de estoque estilizado” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/styled-badge-1024×519.png” />

Assim que o crachá estiver pronto, você precisará configurar as  Condições de Visibilidade Dinâmica . Para isso, abra a  aba Avançado  e habilite  Visibilidade Dinâmica . 

Defina o  tipo de condição  como “Mostrar elemento se a condição for atendida” e adicione uma  condição  “Maior que”. 

Em  Campo , insira o nome do campo, que é  _estoque,  e defina o valor como, por exemplo, “5”. 

Neste caso, o selo será exibido próximo ao nome do produto se mais de cinco produtos estiverem disponíveis.

Não se esqueça de atualizar o template e conferir o front end.

Adicionando o emblema “Restam apenas alguns itens”

Para exibir um selo indicando que um produto estará fora de estoque em breve, duplique o  widget Campo Dinâmico  e altere o  formato do campo  para “Somente” na frente do número e “itens restantes!” depois disso.

” alt=”crachá de estoque personalizado” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/only-couple-items-left-1024×519.png” />Vá para a próxima guia e altere a cor de fundo do segundo emblema.

” alt=”estilizando o segundo crachá de estoque personalizado” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/styling-second-badge-1024×525.png” />Prossiga para a  seção Visibilidade Dinâmica  e altere o valor aqui para “1”. Em seguida, duplique a  condição , altere-a para “Menos que” e defina o valor como “6”.

Desta forma, mostrará o crachá dos produtos cuja quantidade esteja entre dois e cinco itens inclusive. Se houver mais itens, será exibido o selo “Em estoque”, mas se houver menos itens, por exemplo, um, o selo ficará oculto.

Criando o emblema “Último item”

Volte ao editor Elementor e crie outro emblema para o Último Item. Para este propósito, você pode usar qualquer widget, por exemplo, o widget Button.

Solte-o na tela e altere o texto para  “Depressa! Último item!”  e estilize-o de acordo com suas necessidades. 

Em seguida, ative  a Visibilidade dinâmica , escolha o  tipo de condição  “Mostrar elemento se a condição for atendida” e adicione uma  condição “ Igual”, insira o nome do campo  _stock  e defina  o valor  como “1”.

Quando sobrar apenas um produto, o terceiro selo aparecerá.

Construindo um selo de “Esgotado”

Para criar um emblema “Esgotado”, volte ao editor Elementor e duplique o  widget Button  . Mude o texto para “Esgotado” e ajuste a cor de fundo. 

Agora prossiga para as  configurações de Visibilidade Dinâmica  e altere a condição existente. Anteriormente, exibimos o status do estoque do produto de acordo com o  metacampo _stock  porque precisávamos saber a quantidade de produtos disponíveis. Agora exibiremos este emblema com base no   metacampo _stock_status .

Insira  _stock_status  no  campo  e adicione “ outofstock”  à   caixa Valor . Atualize o modelo.

Adicionando um selo “Em breve”

Para criar um selo para “Status de pedido pendente”, volte para o modelo de página de produto único e duplique o último widget. 

Mude o texto para “Em breve” e defina uma cor diferente para o fundo do botão. 

Em seguida, acesse as  configurações de Visibilidade Dinâmica  e altere o valor da condição para “ onbackorder ” sem espaços.