Se você tem um site desenvolvido no Webnode e gostaria de vender produtos utilizando o sistema de pagamentos oferecido pelo Pagseguro com direito ao carrinho de compras que permite que os clientes comprem mais de um produto por vez, confira o tutorial abaixo que mostra um passo a passo de como proceder.
Gerar o código dos botões
A primeira coisa que você deve fazer é gerar o código dos botões de cada produto que você deseja vender em seu site. Para fazer isso acesse o painel de controle do Pagseguro e clique em “Para seu negócio“, em “Ferramentas” e na nova página clique sobre “Botões de Pagamento“.
Em seguida insira os dados referentes ao produto que você deseja vender e clique em “Gerar código fonte“. Confira um exemplo na imagem abaixo.
Inserir o botão no Webnode
Agora que você já tem o código do botão, acesse o painel de controle de seu site no Webnode e navegue até a página em que se encontra o produto. Clique em “Editar conteúdo” para abrir o editor de textos.
No editor, clique sobre o sinal <> que aparece do lado direito para mudar para o modo HTML e cole o código do botão e salve a alteração.
Lembre-se de que você deverá gerar um novo botão e adicioná-lo em cada produto que você pretenda vender.
Inserir carrinho de compra
Agora que você já adicionou os botões de cada um dos produtos que você pretende vender, chegou a hora de adicionar o carrinho de compras do Pagseguro.
Para fazer isso, adicione um novo campo de texto ao seu menu de navegação. Clique sobre o botão “Texto e Imagens” que aparece na barra superior, segure o botão e arraste até o menu de navegação no campo que está escrito “Pode arrastar e soltar um novo conteúdo aqui ou mover um já existente“.
No novo campo, clique sobre “Editar conteúdo“, altere para o modo HTML (que foi explicado acima) e cole o seguinte código:
<a href="https://pagseguro.uol.com.br/v2/checkout/cart.html?action=view">
<img src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/99x61-carrinho-assina.gif" alt="Ver carrinho"/>
</a>
Agora salve as alterações para que seu site esteja funcionando como uma loja virtual e você possa começar a vender seus produtos.
Ps. Lembrando que toda vez que o visitante adicionar um novo produto ao carrinho de compras, ele terá que clicar em “Continuar comprando” para retornar ao site e continuar com suas compras. Não tem como solucionar isso.
Gostou deste tutorial? Então divulgue nas redes sociais e/ou deixe um comentário abaixo.
Você também poderá gostar de...
Como Gerar o Botão de Compra do Pagseguro
Transforme o WordPress em uma Loja Virtual com o WordPress Carrinho Moip
Transforme seu Blog em uma Loja Virtual com o Plugin Pagseguro Shopping Cart
Perguntas e Respostas sobre o Webnode
{ 15 comentários… leia abaixo ou deixe o seu }
Boa, fazia tempos que não lia um tutorial tão bem explicado. O legal desse carrinho é que pode ser inserido facilmente pelo que vi, nunca usei.
Eu num sei não gosto do Webnode, apesar dele ser bom, mas é gosto né prefiro mexer com o WordPress….
O wordpress e certamente bem melhor que o Webnode, mais ele não e grátis, e a versão grátis tem muitas limitações!
Tutoriais,
Sim, ele tem várias limitações, mas para quem precisa de um site simples e não quer ficar pagando um profissional, ele é uma ótima opção.
Abraço!
Olá Celso
O Pagseguro é o melhor sistema de recebimentos online aqui no Brasil, possibilitando a chance de quem vende produtos ou infoprodutos pela internet de ter várias opções para pagamentos em seu site, inclusive por boleto bancário e cartões de crédito de forma segura e descomplicada. Utilizando o pagseguro qualquer pessoa pode vender pela internet sem precisar lidar com as burocracias de financiamentos. Você só paga uma pequena comissão quando acontece a venda não tendo que pagar taxas mensais ou anuais.
Caso não tenha uma conta faça o seu cadastro gratuitamente neste link:
https://pagseguro.uol.com.br/?ind=13069547
Bem interessante e concordo com o Rodolfo e com o “Tutoriais e dicas”, mais se for para utilizar um sistema grátis e online eu prefiro o Weebly.. muitos dizem que o Webnode é mais completo… porém eu discordo o weebly tem muitas ferramentas, porém não muito exploradas! Meu site era feito até eu migrar para o WP.org! (Salvou minha vida o unico problema é o custo!)
Sem dúvida alguma bem útil.
Mas minha dúvida é relacionada ao wordpress. Célsio, você sabe me dizer que erro é esse? Todos os posts que tenho no meu site, com a palavra temporada na url estão apresentando erro 404
Rodrigo,
Estranho isso, não sei o que pode ser. Uma solução para isso seria editar a URL dos posts. No próprio editor de posts do WordPress tem a opção “Editar” que aparece ao lado de “Links permanente”. Os links não ficarão quebrados, já que o WordPress se encarrega de direcionar os visitantes para a página correta.
Abraço!
Mais um ótimo tutorial e dica!
Tbm não gosto do Webnode, apesar dele ser bom, prefiro mexer com o WordPress…. além do que tem mais tutorias sobre na internet, tipo esse https://amelhorcoisadomundo.com.br/ do Host q criou meu blog todo em WordPress e tals.
Celso montei (e coordeno) para um amigo um site (https://www.coisasdobrazil.com.br) de bolsas artesanais da Feira Hippie de Ipanema , ja havia colocado individualmente em cada item (e em paginas individuais) um botão do PagSeguro , e funcionam perfeitamente.
So não entendi em relação ao código do carrinho de compras??
Inseri o código em uma das paginas que ja tem o botão ( https://coisasdobrazil2.webnode.com.br/album/galeria-de-fotos-pagina-inicial/#copacabana-rio-de-janeiro-brasil-jpg ) e qual é a diferença ou utilidade entre o carrinho de compras e o botão?
Abraços motociclistas
Guru
Guru,
O código do carrinho de compras você deve inserir no menu de navegação, desta forma sempre que o visitante adicionar um novo item ao carrinho de compras, ele será contabilizado.
Você também tem a opção de inserir em cada uma das páginas, mas seria muito mas trabalhoso, pois teria que ser um por um.
Abraço!
Obrigado pela informação Celso, vou tentar desta forma e ver o resultado.
Aproveitando o espaço ,deixa te fazer outra pergunta em relação ao Webnode …
Coloquei o código do Google AdSence no site https://www.interfoneilha.com e ele não aparece ,mesmo apos 24 horas (o Google informa para esperar uns 10 minutos) , e este mesmo código coloquei no WordPress e aparece .
Existe alguma restrição do Webnode em relação a isto?
E no caso do plano Plemium isto também ocorre?
Guru
Guru,
Para adicionar o código do Adense no Webnode é necessário inserir dentro de um Widget do Google Adsense. Você fez isso ou inseriu direto no editor de textos do Webnode? Recomendo que leia este artigo para entender melhor o que deve ser feito.
O tipo de plano não tem interferência nos anúncios.
Abraço!
VALEUUUUUUUU !!!!!!!!!!!
Estava mesmo fazendo de forma errada,muito obrigado mesmo Celso.
Ate o momento so vinha colocando anúncios do AdSence no https://www.semprenaestrada.com e so conseguir juntar $ 7,29 , vou colocar nos outros sites também e ver se o resultado ira melhorar.
Abraços motociclistas
Guru