Este artigo é uma breve introdução passo a passo sobre como começar a usar o plugin Fancy Product Designer para criar um produto e exibi-lo usando o WooCommerce ou usar códigos de acesso para integrar o designer em páginas e postagens do WordPress .
Após a instalação e ativação do plugin, você deve ser redirecionado para um dos componentes centrais do Fancy Product Designer, o Fancy Products admin, que permite que você gerencie seus produtos. Se isso não acontecer por algum motivo, vá até lá agora pela navegação.
Crie um produto sofisticado
Fancy Products são produtos personalizáveis que podem ser criados na página Product Builder e listados como um produto na sua loja. Eles podem conter múltiplas visualizações, por exemplo, a parte da frente e de trás de uma camiseta. Opções de cor, tamanho, etc. também podem ser exibidas.
- Clique em Novo para adicionar um novo produto.
- Um pop-up será aberto, solicitando que você insira um título de produto.
- O novo produto agora será o primeiro listado na tabela. Se quiser, você pode atribuir uma miniatura ao produto clicando na caixa de miniatura vazia no lado esquerdo do título do produto.
- Opcionalmente, você pode atribuir o produto a uma categoria abrindo o pop-up Gerenciar Categorias à direita. Se nenhuma categoria tiver sido criada ainda para o produto selecionado, você precisará criar uma clicando em Adicionar Nova Categoria e, em seguida, inserindo um título. Depois que a categoria for exibida, você precisará:
- primeiro selecione um produto da lista de produtos e depois
- marque a caixa ao lado do título da categoria para adicionar o produto selecionado à categoria.
- Cada categoria terá ícones à direita para 1) editar o título, 2) filtrar a lista de Produtos para mostrar apenas produtos para a categoria e 3) excluir a categoria. Observe que cada Produto Fancy pode ser atribuído a várias categorias.
Adicionar visualização(ões) a um produto sofisticado
Cada produto deve ter uma ou mais visualizações atribuídas a ele. Uma visualização pode mostrar diferentes ângulos de visualização de um produto - por exemplo: a vista frontal e traseira de uma camisa.
- Clique no ícone de adição para adicionar uma nova visualização a um produto.
- Um pop-up solicitará que você insira um título para a nova visualização.
- Na janela que se abre, selecione uma miniatura para a visualização
- Sempre que precisar ver uma lista de visualizações de um produto, basta clicar no nome do produto. Clique nele novamente para ocultá-lo.
Crie seu produto inicial
No Product Builder , você adiciona os elementos iniciais de imagem e texto que compõem seu produto.
- Vá para a página Product Builder , clicando no ícone Layers ("Edit View in Product Builder") na lista de itens de visualizações criadas ou selecionando o Product Builder na navegação principal. Neste caso, a visualização a ser editada deve primeiro ser selecionada na lista suspensa para "Selected View".
Adicione elementos de imagem ou texto por meio do painel Layers . Isso é explicado no vídeo acima . Um exemplo é mostrado aqui:
Você pode ajustar diferentes opções para cada elemento separadamente. Para fazer isso, selecione-o na lista Layers (ou Upload Zone ). No diagrama acima, o elemento de texto é selecionado. Como alternativa, você pode clicar no elemento destacado na visualização principal do Produto . Isso abre os painéis Layers Options para o elemento selecionado. Um exemplo é mostrado abaixo, com dois painéis de opções incluídos nas caixas vermelhas.
Por meio dos painéis Layers Options , você pode ajustar as propriedades e o comportamento de um elemento. Uma introdução detalhada sobre Element Options pode ser lida aqui .
Opção 1: Habilitar designer de produto em um produto WooCommerce*
Com o WooCommerce, você precisa habilitar o designer de produto para cada produto individualmente.
- Acesse seus produtos WooCommerce e selecione um produto entre seus produtos existentes ou adicione um novo.
- Agora você pode adicionar uma descrição opcional ou dados do produto, conforme necessário, como preço.
- A metacaixa Fancy Product Designer foi adicionada no lado direito da tela.
- Adicione um ou mais produtos sofisticados individualmente ou uma ou mais categorias de produtos por meio da opção Tipo de fonte .
- Depois disso, selecione os produtos ou categorias no menu suspenso. Você também pode criar e escolher produtos diferentes para dispositivos móveis para melhorar a apresentação dos produtos em telas menores.
- Agora você pode publicar e visualizar a página do produto. (Observação: o botão Adicionar ao carrinho só será exibido após adicionar um preço ao seu produto WooCommerce.)
Você pode personalizar o posicionamento do designer de produto na página do produto com as configurações encontradas em: Fancy Product Designer -> Settings -> WooCommerce -> Product Page . Verifique aqui para mais detalhes.
Opção 2: Adicionar designer de produto em postagens e páginas
O designer de produto também pode ser adicionado em posts e páginas por meio de dois shortcodes. Os shortcodes não são necessários para produtos WooCommerce !
- Crie uma postagem/página ou selecione uma existente.
- Você precisa adicionar estes dois códigos de acesso:
- [fpd] : Carregará o designer do produto.
- [fpd_form] : Um formulário simples necessário para enviar o produto personalizado ao proprietário do site.
- Você notará a nova meta box Fancy Product Designer que foi adicionada no lado direito da tela. Se ela não aparecer, clique no ícone Settings no canto superior direito.
- Adicione um ou mais produtos sofisticados individualmente ou uma ou mais categorias de produtos por meio da opção Tipo de fonte .
- Depois disso, selecione os produtos ou categorias no menu suspenso. Você também pode criar e escolher produtos diferentes para dispositivos móveis para melhorar a apresentação dos produtos em telas menores.
- Agora você pode publicar e visualizar a página do produto.
Você pode personalizar o layout da página do produto por meio do uso de shortcodes. Shortcodes podem ser gerados para botões de ação, módulos, etc., e simplesmente colocados na página ou post para adicionar o elemento desejado à página do produto. Detalhes podem ser encontrados aqui .
Editora Gutenberg
Você encontrará a metacaixa no Editor Gutenberg clicando na aba Documento .
- Atributos de Shortcode
O shortcode [fpd_form] suporta o seguinte atributo:
Atributo: price_format
Explicação: O formato do preço. Use %d como placeholder para o preço.
Valor padrão: $%d
Exemplo
[fpd_form formato_preço="%d€"]
*Se você estiver usando o plugin do construtor de páginas Elementor, consulte: Usando FPD com os plugins do construtor de páginas Elementor