Como criar produtos sob encomenda na loja?

Olá lojistas E-Com, como estão?

Devido a algumas solicitações, resolvemos fazer e criar um tutorial que ajude o lado de vocês. Essa funcionalidade é importante sobretudo para aqueles que produzem o seu próprio produto ou que conseguem uma maior rotatividade de estoque, pois nesse caso, se o produto estiver esgotado na loja, o mesmo poderá aumentar por exemplo para 30 dias a disponibilidade do produto com o intuito de ainda manter o produto vendendo, mas com maior tempo para solicitar um criar um novo até a entrega do mesmo e assim evitando que percam vendas. Afinal, é difícil levar clientes para sua loja, imagina você que consegue levar, mas o produto está esgotado, então nesse caso há a possibilidade de vender um produto sob encomenda.

Nesse caso, o que sugerimos que faça:

Acesse o seu produto, vamos supor que ele seja de ID: 1029, digite na busca esse ID e clique para edita-lo. Desça até a aba estoque e:

Aumente o prazo de disponibilidade do produto para que fique ao seu cliente que como ele é sob encomenda, demorará um tempo a mais para ser entregue.

Em Configurações > Editar JS, insira os códigos abaixo:

$('.P1029 #dsp').replaceWith('<span id="sobEncomenda"><strong>30 dias úteis ou mais</strong></span>')
$('.product-item[data-id=1029] .pi-price').before('<span id="sob">Sob Encomenda</span>')
$('.product-item[data-id=1029] .pi-price +a').hide()

No primeiro, veja que foi inserido P1029, que é o seletor que irá ajustar apenas esse produto. No caso, estamos modificando a informação de disponibilidade por uma mais clara, nesse caso mantenha o número de dias inserido na disponibilidade.

O segundo é a inserção de uma tag de sob encomenda do respectivo produto na vitrine de forma informativa.

O terceiro é esconder o botão comprar desse respectivo produto na vitrine para que o seu cliente veja as condições e na página do produto antes de comprar.

Já em Editar CSS:

.P1029 .btn.btn-info.btn-lg.btn-block  {
  font-size:0 !important;
 }
 .P1029 .btn.btn-info.btn-lg.btn-block:afterr {
  content:'Sob Encomenda';
  font-size:16px!important
 }
#sob {
color: #fff;
background: #bd0b0b !important;
padding: 2px 5px 2px 5px;
}