Os melhores plugins WordPress que encontramos, criamos ou revisamos. Os plugins servem para estender a funcionalidade padrão do seu WordPress, não perca.

Montar um e-commerce com WordPress e Woocommerce pode ser tão simples quanto configurar qualquer plugin dentro do WordPress. Neste artigo você assistirá a 4 vídeo tutoriais que detalham como realizar todas as configurações.

Está pensando em montar sua loja online e expandir os seus negócios para todo o Brasil? Saiba que o WordPress junto com seu plugin Woocommerce formam um par quase perfeito para isso, você só vai precisar de mais alguns plugins para gerenciar métodos de pagamento e o valor do frete dos produtos vendidos.

Nos quatro vídeos deste artigo, irei mostrar todos os passos para realizar a configuração de todos os plugins, desde a instalação do WordPress até o cadastro de produtos simples e produtos variáveis no Woocommerce.

Por falar em plugins, vamos utilizar o WooCommerce Correios para gerenciar os valores de frete, a extensão do Paypal que já vem com o próprio Woocommerce, o WooCommerce PagSeguro e o WooCommerce MercadoPago para gerenciar métodos de pagamento. Com isso você já habilita a inclusão do valor de frete via PAC ou SEDEX diretamente no preço final do seu produto, além disso, também tem a possibilidade de utilizar métodos de pagamento como Boleto bancário, Cartão de Crédito dividido em mais de 12x (com juros) e dinheiro da sua conta Paypal, PagSeguro e MercadoPago. Utilizando esses três métodos de pagamento, o cliente terá praticamente todas as opções de pagamento à sua escolha, com isso não deixará de fazer a compra no seu site.

Todos os plugins descritos nos vídeos são gratuitos, você não vai precisar gastar nenhum centavo para montar a sua loja online utilizando os métodos que vou descrever, porém, é importante que você se informe sobre a porcentagem de venda que cada uma das financeiras cobram, com isso você poderá adequar o valor final do seu produto incluindo a porcentagem das financeiras no valor final.

Vamos deixar de conversa e partir direto para os vídeos tutoriais.

Montar um e-commerce com WordPress e Woocommerce (Parte 1)

Link do vídeo: https://www.youtube.com/watch?v=F3DGmmwvVTQ

Montar um e-commerce com WordPress e Woocommerce (Parte 2)

Link do vídeo: https://www.youtube.com/watch?v=SwHz7Vi_Res

Montar um e-commerce com WordPress e Woocommerce (Parte 3)

Link do vídeo: https://www.youtube.com/watch?v=gjqHhAYP0f8

Montar um e-commerce com WordPress e Woocommerce (Parte 4)

Link do vídeo: https://www.youtube.com/watch?v=W_OjBgKasqw

Espero que tenha ajudado!

Existe um conflito já antigo entre os plugins do WordPress Disqus e avaliações do Woocommerce. Neste tutorial vou mostrar uma maneira simples para resolver o problema para que ambos possam conviver em harmonia em seu site ou blog.

O problema é que o Disqus é um plugin de comentários e, como tal, remove o formulário e renderização de comentários padrão do WordPress. O Woocommerce, por sua vez, confia no sistema de comentários do WordPress para criar um sistema de avaliações para seus produtos, assim os usuários podem descrever o que acharam sobre o produto que compraram em seu site. Quando ambos os plugins estão ativados em um WordPress qualquer, o Disqus funciona perfeitamente para exibir o formulário e renderização dos comentários, porém, ele faz com que as avaliações do Woocommerce simplesmente desapareçam, ou seja, quando um usuário clicar na aba avaliações para visualizar avaliações ou criar sua própria avaliação, ele não verá nada além de um trecho em branco no seu site.

O processo que vou descrever envolve simplesmente adicionar algumas linhas de código no arquivo functions.php de qualquer tema que você estiver utilizando. Isso deverá resolver o problema do conflito entre os plugins mencionados.

 Disqus e avaliações do Woocommerce em harmonia

Para resolver este problema, simplesmente adicione o seguinte trecho de código ao final do arquivo functions.php do seu tema atual:

add_action('the_post', 'teo_remove_disqus_woocommerce');
remove_action('pre_comment_on_post', 'dsq_pre_comment_on_post');

function teo_remove_disqus_woocommerce() {
    global $post, $wp_query;
    
    if (get_post_type() == 'product') { 
        remove_filter('comments_template', 'dsq_comments_template');
    }
}

Salve o arquivo e verifique.

As avaliações do Woocommerce deverão ter voltado a funcionar com o formulário e sistema de comentários padrão do WordPress. Se você conferir também os comentários em posts, o Disqus também deverá estar funcionando perfeitamente.

A solução acima simplesmente remove o Disqus do tipo de post “product” que é o que o Woocommerce utiliza para mostrar seus novos produtos, resolvendo assim o conflito.

Espero ter ajudado e até o próximo!

Quando você envia uma imagem para seu blog utilizando o WordPress, os caracteres inválidos não são automaticamente removidos, apenas os espaços são trocados por um hífen. Por este motivo, tratar nomes de imagens é essencial para manter os arquivos compatíveis com todos os tipos de hospedagens, navegadores e sistemas operacionais.

Deve existir um motivo para isso acontecer, mas o fato é que se você enviar uma imagem que contenha acentos (ou qualquer caractere inválido) no nome, provavelmente terá um problema que será complicado para ser resolvido posteriormente. Em algumas hospedagens, as imagens nem mesmo serão exibidas, fazendo com que você perca tempo procurando o que aconteceu.

Pode fazer o teste aí no seu blog e veja o que acontece.

Por exemplo, nomeie uma imagem de “Atenção Espaço.jpg” e envie para o WordPress; depois abra a imagem e perceba que o nome gerado para o arquivo foi “Atenção-Espaço.jpg“. Estou utilizando uma hospedagem Windows para realizar os testes, e a imagem não aparece por conta daqueles caracteres inválidos (os acentos, cedilha e demais).

Se você for um desenvolvedor e quiser resolver isso manualmente, basta aplicar um filtro no nome do arquivo utilizando o gancho wp_handle_upload_prefilter, caso contrário o plugin Clean Image Filenames vai resolver seu problema imediatamente após instalado e ativado.

Se você enviar um arquivo de nome “Atenção Espaço.jpg” após ativar o Clean Image Filenames, verá que este mesmo arquivo agora terá o nome de “atencao-espaco.jpg“, resolvendo todo o problema de caracteres inválidos que você tinha anteriormente.

Como tratar nomes de imagens no WordPress

Nome da imagem tratado com o Clean Image Filenames

Infelizmente este plugin não vai resolver o problema das suas imagens enviadas anteriormente, e nem poderia, pois ele teria que editar todos os seus artigos que contém o nome da imagem inválido e modificar a URL da mesma, mas ele vai resolver possíveis problemas futuros que você possa ter quanto a isto.

Caso não queira testar o plugin em um blog que esteja em produção, crie um blog local utilizando o nosso tutorial:

Faça todos os seus testes diretamente no seu computador e depois envie para sua hospedagem.

Volta e meia precisamos criar modais em nosso layout, seja para anunciar algo, criar formulários de inscrições, ou até colocar  aqueles widgets das redes sociais para que seus leitores se inscrevam em seu site ou blog.

Recentemente, uma cliente me pediu um modal que aparecesse após determinado tempo, com um formulário de inscrição por e-mail, onde o usuário digita seu e-mail e recebe tudo o que ela postar diretamente na sua caixa de entrada.

Resolvi criar um plugin do WordPress para resolver seu problema. Então, surgiu o Tutsup Simple Modal, um plugin de WordPress que pode receber qualquer HTML e CSS que você quiser. Além disso, você também pode configurar a largura e altura do mesmo.

Tutsup Modal tem duas opções para apresentar o conteúdo ao usuário:

  1. quando o mesmo tira o mouse para fora do seu site;
  2. após N segundos (onde N é o número de segundos);

Basta escolher.

Como instalar o Tutsup Modal?

Não existe muito segredo para instalar o Tutsup Modal, é como você faria com outros plugins.

Ou você pode baixar o arquivo .zip diretamente do site do WordPress, e então:

  1. Adicionar o arquivo na pasta wp-content/plugins;
  2. Ativar o plugin;

Ou você pode acessar a opção Plugins > Adicionar novo e pesquisar por “Tutsup Modal“.

Tutsup Modal

Tutsup Modal no diretório de plugins do WordPress.

Como utilizar o Tutsup Modal

Acesse as opções do Tutsup Modal e escreva o HTML e CSS que desejar.

HTML e CSS no Tutsup Modal

HTML e CSS no Tutsup Modal

O trecho acima gera o nosso modal (que é apresentado quando o usuário tira o mouse do corpo do seu blog ou site).

Se você quiser modificar essa opção, basta adicionar a quantidade de segundos para o modal ser apresentado.

Concluindo

Tutsup Modal é um plugin extremamente simples, porém, faz o que precisamos. Se quiser novas funcionalidades ou dar dicas sobre melhorias, basta publicar nos comentários.