Esse guia mostra como configurar um produto personalizável em uma loja com WooCommerce + KILB Product Designer.
Documentação oficial: https://woocommerce.com/document/kilb-product-designer/
Passo 1 – Cadastrar o produto
Cadastre o produto normalmente. Você só deve prestar atenção nos detalhes abaixo:
- Em “Inventário“, marque o status do estoque como “Sob encomenda“. Dessa forma, não será feito nenhum gerenciamento de estoque.
- Nas “Categorias“, escolha a categoria de produtos personalizáveis como categoria primária (o nome da categoria pode variar na sua loja). A categoria é importante para que alguns ajustes visuais sejam aplicados ao produto.
- Em algumas loja, pode ter o campo “Avisos especiais na listagem de produtos“. Esse campo é usado para adicionar um selo ou algo equivalente na listagem de produtos. Você deve ativar o selo aqui.
Anote o SKU do produto, você vai precisar dele depois.
Quando terminar o cadastro do produto, você pode publicá-lo ou deixar como privado.
Passo 2 – Crie o modelo de design
Para criar o modelo de design, clique em KILB Product Designer no menu lateral. Na tela que abrir, clique em Configurações.
Na listagem de designs, você pode editar um design que já existe clicando no ícone de menu 
ou criar um novo design duplicando outro design que já exista clicando no ícone de duplicar 
.
Nas configurações do design, você deve preencher os seguintes campos (campos não mencionados podem ser ignorados):
- Nome: é o nome que identifica o design. Esse nome só aparece para o administrador da loja. Pode ser o modelo de produto, ou alguma variação. Ex.: “Display 13x8cm”, “Camiseta (Frente)”, “Camiseta (Costas)…
- Etiqueta: é um nome que aparece para o cliente quando um produto tem mais de um design. Uma camiseta, por exemplo, pode ter Frente e Costas, nesse caso a etiqueta ajuda o cliente a identificar qual lado é.
- Largura e altura da imagem de fundo: Largura e altura da imagem de fundo em pixels. Deve exceder as medidas da tela. Serve apenas para a visualização do design.
- URL da imagem de fundo: Esta imagem será colocada atrás da tela. Normalmente, esta será uma imagem do produto para que o cliente compreenda que o desenho que vai criar será impresso nesse produto. Aqui, insira o endereço da imagem, veja abaixo como obter esse endereço. Não é necessário preencher os outros campos de URL de imagem além deste.
- Cor de fundo: Cor de fundo da tela. Aqui, insira “transparent” sem aspas.
- Largura e altura da tela: Medidas em pixels da arte que o cliente vai criar. Deve ser menor que as medidas do plano de fundo. Veja abaixo como calcular esse valor.
- Posição da tela sobre o fundo: esses campos ajudam a posicionar a tela (que é a parte onde é feito do design do cliente) em cima da imagem de fundo. Veja abaixo como calcular esse valor.
- Fator de renderização: Especifica o quão maior será a imagem renderizada em comparação com o tamanho da tela. Veja abaixo como calcular esse valor.
- Números dos produtos (SKUs): Aqui você deve inserir o SKU dos produtos que você quer que tenham esse design disponível. Você pode inserir mais de um SKU e um mesmo produto pode estar em vários designs diferentes.
Carregando uma imagem de fundo
Para enviar uma nova imagem para o site a ser usada como imagem de fundo do seu design, você pode ir em Mídia > Adicionar nova
Na tela que abrir, basta selecionar a imagem que você quer enviar.
Quando o envio terminar, clique em “Copiar URL para área de transferência“
Depois, basta colar (Ctrl + V) o URL copiado no campo URL da imagem de fundo.
Dica: quando for criar a imagem de fundo, leve em consideração as medidas da tela (veja como calcular abaixo). O ideal é já criar em tamanho real. Também é recomendado que a imagem tenha o fundo transparente, no formato PNG.
Calculando as medidas da tela
A largura e a altura da tela, junto ao fator de renderização, vão determinar o tamanho da arte que será gerada. Aqui você precisa fazer um cálculo para poder saber quais valores preencher.
Medidas do material pronto
Você vai precisar da largura e altura da arte final em milímetros. Vamos usar um display de 13×8 cm, por exemplo:
- Largura: 80 mm
- Altura: 130 mm
Além disso, você também precisa saber qual a resolução que você precisa em DPI. Materiais de impressão normalmente ficam entre 100 dpi e 300 dpi, podendo até ser superior em alguns casos. Essa informação quem vai te passar é o responsável pela produção do material.
No nosso exemplo, vamos usar uma medida de 300 dpi.
Convertendo medidas
Agora, vamos converter as medidas em milímetros para pixels. Para isso, use a fórmula abaixo. A divisão é feita por 25,4 porque equivale a uma polegada, já que dpi é baseado em polegadas.
Medida em pixels = resolução em dpi * medida em milímetros / 25,4
Com essa fórmula, as medidas da arte para nosso display de exemplo em pixels ficam:
- Largura: 945 pixels
- Altura: 1535 pixels
Definindo o fator de renderização
Medidas acimas de 600 pixels podem deixar o processo de criação do design lento para o usuário. Por isso, é possível usar o fator de renderização para permitir que o usuário crie o design em um tamanho menor, mas depois o design seja exportado em um tamanho maior. Na prática, a altura e a largura da tela serão multiplicados pelo fator de renderização na hora de exportar.
Se a arte de nosso display de exemplo tem uma altura de 1535 pixels, podemos usar um fator de renderização de 3 para que a altura fique com menos de 600 pixels:
- Fator de renderização: 3
- Largura da tela: 315 pixels (945 dividido por 3)
- Altura da tela: 512 pixels (1535 dividido por 3)
Para ajudar você nesse cálculo, você pode clicar aqui para baixar uma planilha automática.
Concluindo
Depois que preencher todos os campos do design, você pode clicar em Salvar configurações. Agora, os produtos publicados já terão a opção de criação do design.