Como fazer upload de imagens nas páginas de produtos WooCommerce 2023

Atualizado em 13 de noviembre de 2023

Às vezes, sua loja WooCommerce pode precisar de alguns recursos especializados para seus clientes, como upload de imagens nas páginas de produtos. Se você vende produtos impressos, administra uma loja de presentes personalizados ou um serviço de impressão de fotos, é essencial que seus clientes possam fazer upload de uma imagem (ou qualquer outro tipo de arquivo) diretamente na página do produto antes de adicionar o produto ao carrinho. .

Neste guia completo, orientaremos você em todas as etapas sobre como adicionar uploads de imagens às páginas de produtos da sua loja WooCommerce. Também abordaremos alguns casos de uso mais avançados, como editar imagens antes de fazer upload ou forçar tamanhos de arquivo, proporções, etc.

Para evitar confusão, observe que este guia WooCommerce foi escrito para permitir que você Seus clientes carregue imagens nas páginas dos produtos, não edite e carregue imagens em massa através do administrador do WordPress!

Índice

Guia WooCommerce para upload de imagens em páginas de produtos – O que abordaremos

Este guia completo contém tudo que você precisa saber sobre como adicionar uploads de imagens às páginas de seus produtos WooCommerce. Como esta é uma postagem de blog muito longa, vamos reservar um momento para revisar o que iremos cobrir. Use os links rápidos abaixo para pular de seção em seção se não quiser ler a postagem inteira.

Isto é o que escreveremos:

  • Cubra o básico
    • Como adicionar um campo de imagem de carregamento WooCommerce às páginas de produtos
    • Mostre um carregador moderno com recursos adicionais
    • Limite quais tipos de arquivos podem ser carregados por segurança
    • Defina um tamanho máximo de arquivo permitido por segurança
    • Adicione outros campos de formulário aos uploads de imagens
  • Ajustar o preço do produto final
    • Cobrar extra pelo upload de imagens
    • Aumente o preço do produto por arquivo enviado
  • Carregar várias imagens
    • Faça upload de várias imagens (mais de uma, em massa)
    • Limite a um número exato de imagens necessárias
  • Recursos avançados de upload de imagens WooCommerce
    • Como permitir que os clientes editem imagens antes de enviá-las
    • Forçar tamanho e formato de upload de imagem
    • Adicione uma visualização ao vivo – exiba a imagem enviada nas imagens da sua galeria de produtos
  • Do lado do administrador
    • Gerenciar imagens enviadas no painel de administração do WordPress

Uploads de imagens WooCommerce – O que estamos construindo?

Antes de começarmos, vamos dar uma olhada no que estamos construindo para garantir que todos estejam na mesma página.

Criaremos um produto configurável no WooCommerce que permite aos seus clientes fazer upload de uma ou mais imagens. Como proprietário de uma loja, você poderá visualizar e baixar essa imagem na tela de gerenciamento de pedidos do WooCommerce. Normalmente, o dono da loja precisa do arquivo para imprimi-lo ou incorporá-lo ao produto que vende.

Para deixar as coisas um pouco mais interessantes, o cliente poderá editar a imagem diretamente no navegador! Eles podem cortar, redimensionar ou girar a imagem antes de carregá-la. Eles também verão uma visualização ao vivo do produto final antes de adicioná-lo ao carrinho.

Como exemplo, criaremos um produto de moldura fotográfica personalizado. É o produto perfeito para explicar todos os conceitos e casos de uso avançados que acompanham o uso do WooCommerce para fazer upload de imagens nas páginas dos produtos. O cliente pode escolher um desenho de moldura e enviar sua foto para acompanhá-la.

Aqui está um exemplo do que estamos construindo:
Exemplo de campo de upload de arquivo em uma página de produto WooCommerce

Veja demonstração ao vivo

Orientaremos você por todas as etapas (e muito mais) neste guia completo do WooCommerce para enviar imagens para páginas de produtos. Vamos começar do começo!

Usando um plug-in para estender o WooCommerce para carregar imagens nas páginas de produtos

Infelizmente, o WooCommerce não possui nenhum recurso pronto para uso para upload de imagens nas páginas de produtos. Isso está fora de foco porque permitir o upload de imagens em produtos é considerado um caso de nicho.

Felizmente, existe um plugin que se encarrega de fazer upload de arquivos e anexá-los ao carrinho, pagar e fazer o pedido. A solução mais simples e poderosa para fazer upload de imagens é usar o plugin Advanced Product Fields for WooCommerce.

Este plugin permite que você adicione vários campos de formulário de entrada às páginas de seus produtos. Desde campos de formulário simples até campos avançados, como uploads de arquivos, seletores de data e muito mais! Além disso, o plugin possui recursos poderosos para criar as páginas de produtos mais complexas. Você pode mostrar ou ocultar campos de entrada por meio de lógica condicional. Você também pode aumentar ou diminuir o preço final do produto dependendo da seleção do seu cliente.

Resumindo, é o plugin perfeito para adicionar campos de upload de imagens às páginas de produtos.

Como adicionar um campo de upload a um produto WooCommerce

Adicionar um campo de upload de imagem ao seu produto WooCommerce parece avançado, mas é muito fácil. Na verdade, são necessárias apenas 2 etapas para ser concluída, portanto, isso pode ser feito em menos de 5 minutos. Abaixo, descreveremos essas etapas em detalhes para que você possa começar a vender produtos WooCommerce personalizáveis ​​com campos de upload de imagens.

Etapa 1 – Instale campos de produtos avançados para WooCommerce

Para começar, adquira campos de produtos avançados para WooCommerce na loja Studio Wombat: studiowombat.com/advanced-product-fields-for-woocommerce

No painel do WordPress, vá para Plugins → Adicionar novo → Carregar plugin . Escolha o arquivo zip que você baixou da sua conta do Studio Wombat. Então clique em Ativar .

Agora que você instalou os campos avançados de produto, pode prosseguir para adicionar um campo de upload de arquivo a um produto em sua loja WooCommerce.

Etapa 2: crie seu campo de upload de imagem WooCommerce

Vá para Produtos → Todos os produtos e edite o produto ao qual deseja adicionar o upload da imagem. Na seção Datas do produto clique na guia Os campos personalizados.
A guia Campos personalizados no back-end do produto WooCommerce

Nesta seção, você pode adicionar todos os campos de entrada do formulário personalizado que devem aparecer na página do seu produto WooCommerce. Clique em Adicione seu primeiro campo . Uma nova seção aparece e é onde você pode definir todas as configurações do campo de upload de arquivo. Use as seguintes configurações:
Configurando o campo de upload de arquivo na tela de administração do produto WooCommerce

  • Colocou o Cara em Carregamento de arquivo. Isso irá gerar um campo de entrada de upload de arquivo nas páginas de produtos WooCommerce.
  • Adicione um rótulo . Isso aparece acima do campo para que o usuário saiba o que é.
  • Você pode optar por adicionar Instruções para dar aos seus clientes mais contexto, se necessário.
  • Alternar configurações Obrigatório . Isso garante que uma imagem seja carregada antes que o cliente possa adicionar o produto ao carrinho.

Salve seu trabalho clicando Atualizar qualquer Publicar no quadro Publicar da tela.

Isso é tudo que você precisa fazer para adicionar uploads de imagens WooCommerce às páginas de produtos. Você pode visualizar o resultado no site deles:
Campo de entrada de arquivo no produto WooCommerce

É funcional, mas parece um pouco básico. Iremos consertar isso nas seções a seguir.

Como usar um uploader moderno com barra de progresso arrastar/soltar

Como você pode ver na imagem acima, o campo de upload de arquivo parece um pouco básico. Isso ocorre porque, por padrão, o campo de entrada de arquivo HTML padrão é usado. Felizmente, o plugin Advanced Product Fields (APF) tem uma maneira de evitar isso.

Para habilitar uploads de arquivos modernos no WordPress, vá para WooCommerce → Configurações → Campos do produto e habilitar o carregador moderno .
Habilite o uploader de arquivos moderno nas configurações de campos avançados de produtos

Observe como isso altera a aparência do campo de upload de arquivo:
Exemplo do campo moderno de upload de arquivo em Campos avançados de produto
Usar o campo moderno de upload de arquivo para seus produtos WooCommerce tem algumas vantagens sobre o básico:

  • Durante o upload dos arquivos, você verá uma barra de progresso indicando quanto do arquivo foi carregado. Esta é uma melhor experiência do usuário porque você pode ver que o processo de carregamento está ocorrendo e deduzir quanto tempo levará. Isto é especialmente útil para arquivos maiores.
  • Você pode arrastar e soltar arquivos facilmente de qualquer lugar do seu computador. Você não precisa clicar e navegar (mas pode, se quiser).
  • Exclua os arquivos carregados clicando no ícone X próximo ao nome do arquivo.
  • A experiência do usuário ao enviar vários arquivos é melhor.

Como limitar quais tipos de arquivos podem ser enviados

Por padrão, o plugin Advanced Product Fields permite que seus clientes carreguem qualquer tipo de arquivo que o WordPress também permita. Como você espera uma imagem para o seu produto, limite o tipo de arquivo apenas a imagens. Em outras palavras, deve aceitar apenas jpg, jpeg, png, gif e talvez pdf.

  • Edite o mesmo produto acima e retorne à aba Os campos personalizados.
  • Encontre o campo Upload de arquivo e clique nele para retornar ao painel de configurações.
  • Procure a configuração Tipos de arquivo aceitos e inclua apenas os tipos de arquivo permitidos.

Limitar tipos de arquivo aceitos para campo de upload de arquivo no APF

Defina o tamanho máximo de arquivo para uploads de arquivos WooCommerce

Para evitar que seus clientes ocupem o espaço em disco do seu servidor Com arquivos grandes, você pode limitar o tamanho máximo de arquivo permitido com Campos de produto avançados para WooCommerce. Siga esses passos:

  • Edite o mesmo produto acima e retorne à aba Os campos personalizados.
  • Encontre o campo Upload de arquivo e clique nele para retornar ao painel de configurações.
  • Encontrar configurações Tamanho máximo do arquivo e insira um número.

O tamanho máximo do arquivo é definido em megabytes. Certifique-se de definir um número realista. Por exemplo, se você espera que as imagens sejam impressas, não deseja um arquivo muito pequeno (menos de 1 ou 2 MB); Caso contrário, a qualidade de impressão será afetada.

Use uploads de imagens WooCommerce com outros campos de formulário

Lembra do nosso exemplo anterior? Vendemos molduras personalizadas. Além de permitir que os clientes carreguem suas fotos, também queremos que eles escolham o design do porta-retratos que desejam. Para fazer isso, podemos adicionar outro campo acima do campo de upload de imagem.

  • Edite o mesmo produto acima e retorne à aba Os campos personalizados.
  • Clique em Adicionar um campo . E Isso abre o painel de configuração para um novo campo.
  • Colocou o Cara em Amostras de imagens . Isso nos permite criar botões de imagem clicáveis ​​como opções. Parece mais atraente do que a lista suspensa padrão.
  • Como Rótulo digite “Selecione seu quadro”.
  • Ative a alavanca Obrigatório .
  • na seção Opções , você pode adicionar quantas amostras de imagens desejar. Cada imagem corresponde a uma escolha que o seu visitante pode fazer. No nosso exemplo, adicionamos 3 molduras: uma moldura clássica, uma moldura tribal e uma moldura elegante. Cada opção recebe um rótulo de opção . Você também pode aumentar o preço do produto quando o cliente selecionar esta opção. Para efeitos desta demonstração, deixamos essas configurações em branco.
  • Encontrar configurações Posição da etiqueta e mude para Como dica de ferramenta . Por padrão, o rótulo inserido para cada opção é exibido abaixo da imagem. Mas parece um pouco melhor como dica de ferramenta. O rótulo só fica visível quando o usuário passa o mouse sobre a amostra de imagem.

Quando terminar, sua configuração deverá ficar assim:
Configuração de back-end para amostras de imagens

Na página do seu produto WooCommerce, é assim:
Amostras de imagens para selecionar moldura

Cobrar extra pelo upload de imagens (aumenta o preço do produto)

O upload de imagens pode não ser um campo obrigatório do WooCommerce, mas se o usuário decidir fazer upload de uma imagem, você pode cobrar uma taxa adicional. Os campos avançados de produtos para WooCommerce permitem aumentar ou diminuir o preço final do produto quando um arquivo é carregado.

Siga estas etapas para ativar um aumento de preço quando uma imagem for carregada:

  • Encontre o campo Upload de arquivo anterior e clique nele para retornar o painel de configurações.
  • Ative o Opção de ajuste de preços .
  • Selecione os Tipo de preço . Como só queremos cobrar uma taxa adicional quando um arquivo é carregado, selecione Taxa fixa com base na quantidade . Se você estiver interessado em saber mais sobre como cobrar custos adicionais, confira nosso artigo listando todos os tipos de preços disponíveis no APF.
  • Introduzir o Quantia pelo preço adicional.

Você verá que o preço adicional será exibido na página do seu produto. Um resumo de preços também é mostrado na parte inferior:
Enviando um arquivo com custo extra

Se você não quiser mostrar sugestões de preços ou resumos de preços, acesse WooCommerce Contexto Campos de produto e você pode desativar ambas as configurações lá.

Cobrar um custo extra por arquivo enviado

O método explicado acima adiciona um custo adicional, independentemente de quantos arquivos são carregados. Quando o usuário não faz upload de arquivos, nenhum custo adicional é adicionado. Mas quando o usuário carrega 1 ou 100 arquivos, o mesmo custo adicional de US$ 5 é adicionado ao preço final do produto.

Em vez disso, pode fazer mais sentido cobrar por imagem enviada. A versão estendida dos Advanced Product Fields permite adicionar um custo adicional por arquivo. Para implementá-lo, precisamos alterar as configurações de preços que adicionamos na etapa anterior:

  • Encontre o campo Upload de arquivo anterior e encontre as configurações Ajustar preços .
  • Colocou o Cara de preço em preço baseado na fórmula . As fórmulas são maneiras poderosas e avançadas de configurar esquemas de preços complexos para plug-ins de seus produtos. Quase qualquer cenário imaginável pode ser resolvido com preços baseados em fórmulas.
  • Na caixa de fórmula, digite a seguinte fórmula: files(62e4d28e38781)*5. 5 é o preço unitário por arquivo e 62e4d28e38781 é o ID do campo de upload de imagem.

Abaixo está uma prévia de 2 arquivos enviados, cada um custando US$ 5 adicionais (totalizando US$ 10):
Upload de arquivo adicionando custos adicionais ao produto

Permita que os clientes façam upload de várias imagens para a página do seu produto WooCommerce (upload em massa)

Até agora, falamos apenas sobre o upload de 1 imagem na página do produto WooCommerce. No entanto, se você quiser aceitar vários arquivos (permitir upload em massa), isso também será possível. Para ativar vários uploads de arquivos (em massa), siga estas etapas:

  • Encontre o campo Upload de arquivo e clique nele para retornar ao painel de configurações.
  • Ativar Permitir vários .

Habilite vários uploads de arquivos
Os clientes agora podem fazer upload de quantos arquivos quiserem. Na próxima seção, também explicaremos como você pode limitar o número de arquivos enviados.

Expanda campos de produtos avançados com plug-ins adicionais

O plugin Advanced Product Fields (APF) também vem com alguns plugins adicionais poderosos que estendem os recursos do APF de várias maneiras.

Por que criamos alguns recursos em plugins adicionais? Boa pergunta! Ao incluir recursos avançados em plug-ins adicionais, mantemos o plug-in principal o mais leve possível. Se você não precisa de determinados recursos, seria uma pena carregá-los em seu site de qualquer maneira. Esses scripts adicionais diminuiriam a velocidade geral da página, o que é ruim para o SEO.

É por isso que construímos alguns recursos avançados, que muitos de nossos usuários não precisariam diariamente, em plug-ins adicionais (chamados de plug-ins complementares).

Você pode ver todas as extensões disponíveis aqui e ter acesso imediato a elas se adquirir o Advanced Product Fields Pack. O pacote contém todas as extensões atuais e futuras por um preço bastante razoável. Para alguns dos recursos avançados discutidos posteriormente neste artigo, você precisará de um plugin adicional.

Limite o número de imagens enviadas para WooCommerce

Na maioria dos casos, você precisará de um número fixo de imagens de seus clientes. Por exemplo, quando você vende cartões de visita, você precisa de exatamente 2 arquivos: um para a frente do cartão e outro para o verso.

Campos avançados de produto (APF) para WooCommerce permitem limitar o número de imagens enviadas alterando 2 configurações: um número mínimo e máximo de arquivos permitidos.

Para fazer isso, você precisará do plugin adicional de upload de imagem. É um plugin leve que adiciona alguns recursos extras poderosos especificamente para carregar imagens WooCommerce em páginas de produtos.

Depois que o plug-in estiver instalado, edite o campo de upload do arquivo e observe estas configurações adicionais:
Defina o mínimo e o máximo de arquivos enviados

  • O número mínimo de arquivos é o número mínimo esperado de arquivos. Se um usuário enviar menos arquivos, o produto não será adicionado ao carrinho.
  • Contagem máxima de arquivos é o número máximo permitido de arquivos. Os usuários podem fazer upload de menos arquivos do que o número definido lá, mas não mais. Defina como -1 se você permitir um número ilimitado de arquivos (embora isso não seja recomendado).

Como permitir que os usuários editem uploads de imagens com WooCommerce

Você pode permitir que os usuários editem as imagens que carregam diretamente no navegador! Você pode fazer isso com Advanced Product Fields em combinação com a extensão Image Upload. Esta é a aparência do editor nas páginas de produtos WooCommerce:
Edite imagens carregadas no navegador no WooCommerce

Aqui está o que seus visitantes podem fazer com o editor:

  • Cortar imagens carregadas. Como dono de uma loja, você pode forçar o corte para que as imagens sejam sempre recebidas no formato correto.
  • Girar imagens. Especialmente quando as imagens são tiradas com um telefone celular, é útil girá-las para o formato correto.
  • Inverta as imagens.
  • Redimensione imagens aumentando ou diminuindo o zoom.

O que é ainda melhor? Como proprietário de uma loja, você pode ativar ou desativar esses recursos do editor de imagens. Não quer que os usuários invertam ou girem suas imagens? Não tem problema, basta desligar!

Você pode alterar o tema do editor acessando WooCommerce → Configurações → Campos de produto → Upload de imagem . Você pode alternar entre um tema claro ou escuro.

Extensão de upload de imagem

Melhore o upload de seus arquivos com um editor de imagens completo. Permita que os clientes editem suas imagens no navegador

Saber mais

Como forçar o tamanho e formato da imagem enviada (proporção)

Em muitos cenários, você deseja que a imagem enviada tenha um determinado formato (proporção) ou tamanho (em pixels). Como a imagem enviada geralmente é impressa no produto que você está vendendo, é importante que você obtenha a imagem exatamente como precisa, para que não haja problemas durante a impressão.

As extensões de upload de imagens discutidas acima também ajudam nisso. Vamos examinar cada configuração para forçar o tamanho correto (em pixels) do campo de upload de imagem WooCommerce:
Configurações para forçar o tamanho da imagem carregada no WooCommerce

  • Largura mínima. Esta é a largura mínima necessária em pixels. Caso a imagem carregada esteja abaixo do mínimo, o cliente não poderá adicionar o produto ao carrinho.
  • Altura mínima. Semelhante à largura, esta é a altura mínima exigida em pixels.
  • Redimensione automaticamente. Ative-o se quiser que nosso plugin redimensione automaticamente as imagens enviadas para o tamanho desejado. Se um cliente enviar uma imagem maior que o máximo desejado, nosso plugin redimensionará a imagem. As configurações máximas de largura e altura que você vê abaixo do botão de alternância são usadas para redimensionar automaticamente a imagem. Deixe a largura ou altura em branco para manter a proporção.

O plugin também possui configurações para forçar o formato correto da imagem (proporção), permitindo aos usuários cortar a imagem diretamente no navegador.
Configurações para forçar o formato correto da imagem enviada (proporção)

Ativar configurações Habilitar editor de imagens no campo de upload de arquivo. Quando ativado, você verá algumas outras configurações aparecerem:

  • Como abrir o editor de imagens: aqui você pode especificar como a janela pop-up do editor deve ser aberta. Você pode abri-lo automaticamente (isso força o usuário a editar a imagem no formato correto) ou clicando no botão “editar”, que permite aos usuários fazer upload de arquivos não editados também.
  • Habilitar Image Cropper – Ligue-o para permitir que os usuários cortem a imagem no formato que precisam.
  • Proporção da tela: Defina em qual proporção a imagem final enviada deve estar. A proporção da imagem decide o formato da imagem. Por exemplo, se você precisar de uma imagem quadrada em vez de um retângulo, escolha a proporção Quadrado 1:1 na lista suspensa.

Mostrar a imagem carregada na imagem da sua galeria de produtos (visualização ao vivo)

A próxima parte deste tutorial é mais avançada, mas mostra um recurso muito útil. Em nosso ex Por exemplo, vendemos porta-retratos onde os clientes podem fazer upload de suas fotos para anexar dentro do porta-retratos. Não seria ótimo se o usuário pudesse visualizar a imagem enviada diretamente no quadro?

Adicionar um recurso de visualização ao vivo aos seus produtos WooCommerce melhora a experiência do usuário e resultará em menos carrinhos abandonados. Seus clientes podem visualizar seu produto acabado antes de fazer um pedido e são mais propensos a continuar se estiverem satisfeitos com o resultado final.

Para adicionar uma visualização ao vivo ao campo de upload de imagem WooCommerce, usaremos outro plug-in complementar poderoso para APF: Visualização de conteúdo ao vivo. Este plugin permite que você visualize textos ou imagens ao vivo na imagem principal do seu produto.

O caso de uso mais comum para uma visualização ao vivo é a venda de placas personalizadas. Os usuários podem adicionar texto personalizado ao pôster e ele aparece imediatamente na imagem do produto à esquerda.
Um pôster de casamento que você pode personalizar

Essa não é apenas uma ótima experiência para o usuário, mas também é amplamente conhecido que imagens mais fortes ajudam você a vender mais produtos. O exemplo acima adiciona uma visualização ao vivo do texto, mas o plugin também pode fazer o mesmo para imagens carregadas. Especificamente, é isso que estamos construindo:
Upload de imagem com visualização ao vivo no WooCommerce

Etapa 1 – Instale a extensão de visualização de conteúdo ao vivo

Para começar, adquira a extensão Live Content Preview aqui: studiowombat.com/live-content-preview

No painel do WordPress, vá para Plugins → Adicionar novo → Carregar plugin . Escolha o arquivo zip que você baixou da sua conta do Studio Wombat. Então clique em Ativar .

Então vá para WooCommerce → Configurações → Campos de produto → Visualização de conteúdo ao vivo e insira sua chave de licença. Clique em Ativar licença .

Agora que você tem a extensão de visualização de conteúdo ao vivo instalada e funcionando, você pode começar a adicionar uma visualização ao vivo ao campo de upload de imagem do produto WooCommerce.

Etapa 2: adicione uma visualização ao vivo

Volte e edite o produto da moldura fotográfica anterior. Na seção Datas do produto selecione a guia Os campos personalizados , assim como fizemos anteriormente neste guia. Role para baixo até ver a seção Visualização de conteúdo ao vivo e clique Adicionar novo .

Uma janela pop-up é aberta para orientá-lo na configuração da visualização ao vivo. Na etapa 1, você pode selecionar a imagem para exibir o conteúdo. Você pode escolher a imagem principal do seu produto ou qualquer uma das imagens da galeria (se aplicável) que você definiu nas configurações do produto WooCommerce.

Selecione a imagem e clique Próximo passo . A etapa 2 aparece:
Configurando uma visualização de conteúdo ao vivo – etapa 2

Nesta etapa, você pode selecionar quais campos do formulário devem aparecer na imagem. Você pode selecionar qualquer um dos seus campos de texto ou upload de arquivo. Clique Próximo passo quando você acabar.

Na última etapa, você pode desenhar uma área na imagem onde o conteúdo deve aparecer. No nosso caso, queremos que a imagem seja exibida dentro do quadro, então desenhamos uma área (confira a borda azul abaixo) dentro do quadro:
Desenhe uma área de visualização de conteúdo ao vivo

Quando terminar, clique em Preparar . Agora você adicionou sua primeira visualização de conteúdo ao seu produto WooCommerce!

Passo 3 – Defina a proporção correta

Graças à visualização da imagem ao vivo, qualquer imagem enviada será exibida dentro do quadro. O problema é que quando o usuário carrega uma imagem super larga, ela fica comprimida dentro dos limites da área que desenhamos acima. Isto não é o ideal. Em vez de comprimir a imagem dentro dos limites, seria melhor forçar o usuário a carregar a proporção correta. Lembre-se, podemos fazer isso com o plugin de upload de imagens que discutimos em algumas seções anteriores em “Como forçar o tamanho e formato da imagem carregada (proporção)”.

Gerencie uploads de imagens na área de administração do WordPress

Como proprietário de uma loja, é importante que você possa acessar facilmente os arquivos carregados de seus clientes. Existem 2 lugares onde você pode acessar os uploads de imagens de seus clientes na seção de administração WooCommerce do seu site WordPress:
Acesse uploads de clientes no administrador WooCommerce

  1. Na tela de gerenciamento de pedidos, você poderá clicar nos arquivos do cliente.
  2. Na mesma tela, há um botão Baixar arquivos que permite baixar todos os arquivos em um pacote zip. Isso é útil se seus clientes puderem fazer upload de vários arquivos e você quiser baixá-los todos de uma vez.

Quão seguro é fazer upload de imagens para páginas de produtos WooCommerce?

Até agora, falamos principalmente sobre como criar um uploader de imagens e o que você pode fazer com ele no WooCommerce. Mas e a segurança?

O upload de arquivos pode ser considerado um risco à segurança se você não configurar o upload de arquivos corretamente. Existem três coisas que você pode fazer para minimizar o risco de segurança:

  1. Limite os tipos de arquivo permitidos ao mínimo absoluto. Se você espera imagens, não permita documentos do Word ou arquivos do Excel. Já falamos sobre isso anteriormente neste guia.
  2. Limite o tamanho de arquivo permitido. Se você espera imagens simples, não precisa permitir arquivos maiores que 5 megabytes. Este guia também explicou como fazer isso.
  3. Uma terceira opção é permitir que apenas usuários registrados façam upload de arquivos. Isso é especialmente útil se você vende B2B, onde seus clientes precisam de uma conta para comprar em sua loja. Vá para WooCommerce → Configurações → Campos do produto e ative a configuração lá.

Advanced Product Fields for WooCommerce usa os recursos integrados de upload de arquivos do WordPress, por isso já é bastante seguro porque o WordPress bloqueará arquivos maliciosos com toda a sua força (ao não permitir tipos de arquivos suspeitos). Além disso, criamos uma camada adicional de segurança em nosso plugin.

É altamente recomendável manter-se atualizado com suas versões WordPress, WooCommerce e APF para minimizar o risco de problemas de segurança no futuro.

Guia WooCommerce para upload de imagens em páginas de produtos – palavras finais

Como você pode ver pela extensão desta postagem do blog, há muitos tópicos a serem abordados ao permitir que seus clientes carreguem imagens em suas páginas de produtos WooCommerce. Mas, junto com o plugin Advanced Product Fields, você pode transformar o WooCommerce em uma potência de carregamento!

O plugin também ajuda com outras funções relacionadas ao upload:

  • Lógica condicional para mostrar ou ocultar campos de upload com base nos valores de outras entradas do formulário.
  • Aumente o preço final do produto com base nas imagens enviadas. Adicione uma taxa adicional por imagem ou por várias imagens.

Com a ajuda de extensões adicionais, você pode criar fluxos de upload ainda mais avançados. Seu cliente pode fazer upload de imagens para páginas de produtos WooCommerce, editar as imagens em seu navegador, cortar, redimensionar e muito mais. Você pode definir uma ampla variedade de parâmetros para configurar uploads de imagens com base nas necessidades da sua loja:

  • Limite tamanhos e tipos de arquivos.
  • Redimensione imagens automaticamente de acordo com suas necessidades.
  • Força um determinado formato (quadrado, retângulo ou qualquer outra proporção).
  • Permitir um número exato de imagens (arquivos mínimo e máximo).
  • Mostra uma visualização ao vivo da imagem carregada.
Scroll al inicio