Como Adicionar Botão e Carrinho de Compras do Pagseguro no Webnode

pagseguro e webnode

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“.

ferramenta para gerar o botão de compra no pagseguro

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.

botões de pagamento pagseguro

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.

editar conteúdo

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“.

adicionar campo de texto

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.

E-book – Criar Site no Webnode

Baixe gratuitamente o e-book “Como Criar um Site no Webnode” que mostra como você pode criar um site completo utilizando o construtor do Webnode, além de como monetizar, divulgar e otimizar as páginas do site.

About Celso Lemes

Celso Lemes é Blogueiro profissional. Vivo de blogs, blogo para viver, vivo blogando, blogando eu vou vivendo.   Baixe grátis o e-book 12 Passos para Divulgar seu Site ou Blog.
Bookmark the permalink.

57 Comments

  1. 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.

  2. Eu num sei não gosto do Webnode, apesar dele ser bom, mas é gosto né prefiro mexer com o WordPress….

  3. 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

  4. 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!)

  5. 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!

  6. Mais um ótimo tutorial e dica!

  7. ana rodrigues

    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 http://amelhorcoisadomundo.com.br/ do Host q criou meu blog todo em WordPress e tals.

  8. 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 http://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!

  9. VALEUUUUUUUU !!!!!!!!!!!
    Estava mesmo fazendo de forma errada,muito obrigado mesmo Celso.
    Ate o momento so vinha colocando anúncios do AdSence no http://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

  10. Eu queria saber como faço para integrar o pagseguro a um site pela API. Nesse site, tem a forma de pagamentos do paypal, porém gostaria de inserir o pagseguro, e para add um novo gateway precisaria desenvolver com a API do site, com a API do pagseguro. Pois já existe uma loja dentro do site, com o carrinho, não queria usar essa função do pagseguro, apenas o sistema de pagamentos. Alguém aí conhece algum tutorial, ou site que possa me ajudar?

  11. Eu gostaria é mesmo é saber como faço para que o http://www.weebly venda com a cielo.

    pois o weebly só tem a paypal,googlechecaut, e o none ( nem sei o que é isso )

    • Glauco,
      Para vender pela Cielo você tem que se cadastrar na Cielo, pagar as taxas, fazer a instalação dos códigos (o que exige um conhecimento técnico avançado e eu nem sei se o Weebly permite) e esperar eles avaliarem se o seu site é seguro para vender através do sistema deles.
      Por isso é que estes serviços de criação de sites oferecem os sistemas já prontos como é o caso do Paypal.
      Neste caso, eu recomendo que você utilize o Pagseguro para vender em seu site.

      Abraço!

  12. Por favor’zão me responde…
    Como eu faço para ‘Arrastar e soltar um novo conteúdo ou mover um conteúdo existente.’

    aparece assim -> “Aqui você pode arrastar e soltar um novo conteúdo ou mover um conteúdo existente.”

    Como eu faço pra arrastar e soltar um coonteúdo !
    responde rapidinho #PF.
    já agradeço.
    espteste@hotmail.com

    • Alanderson,
      Você precisa clicar e segurar o botão do mouse sobre o botão “Textos e Imagens” que aparece no menu superior. Depois é só arrastar para os locais em que ele pode ser adicionado.

      Abraço!

  13. MARCIO DANIEL

    Celos…como faço para excluir os botões de comprar no carrinho do webnode?…irei deixar somente o botao comprar do pagseguro ao invés da ferramenta do webnode…é possível?…seria ótimo se houvesse uma forma de substituir a localização exata do botao comprar do webnode pelo do pagseguro

    Muito obrigado e fico no aguardo

  14. Antonio Martins

    Boas Pessoal
    eu tenho o webnode e quero por os pagamentos com o paypal e transferencia bancaria , sei como criar o códico mas não o consigo colocar no webnode e como por os dados bancario , quando pomos um produto à venda já aparece um botão que já vem no propio webnode e queria saber como posso substituir pelo do paypal e tambem por a forma de pagamento por transferenci.
    Se alguem me poder ajudar agradecia muito .

    Obrigado

    • Antonio,
      Acredito que você tenha escolhido a opção “E-shop” no momento de criar seu site. Se for este o seu caso, você não deve utilizar mais o sistema de loja virtual do Webnode.
      No momento em que estiver cadastrando um novo produto, escolha a opção “Página”.

      Abraço!

  15. Antonio Martins

    Celso Lemes

    Desculpa mas podes me explicar melhor ?
    Obrigado

    • Antonio,
      Quando estiver cadastrando um novo produto, você deve selecionar a opção Nova “Página”, que desta forma o botão do Paypal do Webnode não é adicionado a página automaticamente.
      Depois você vai no Paypal e gera um novo botão para adicionar junto ao produto.

      Abraço!

  16. Antonio Martins

    Celso
    O que estas a dizer é para eu ir , Itens,novo e produto já tentei e resulta mas assim não fica o site apresentavel porque quando adiciono um novo produto ele vai para o Menu e não para as Ctegorias .
    Se eu optar em ficar com o botão quem vem no wbnode como fasso para por os meus dados do paypal paea o cliente pagar e o numero d conta bancariapara fazerem trasferencias , podesme ajudar nisso ?

    Mauis uma vez Obrigado

  17. MARCIO DANIEL

    Celso….há alguma forma de remover o botão CARRINHO do webnode?…pretendo deixar somente o do pagseguro..

    Muito obrigado

  18. Antonio Martins

    Se ouver alguem com uma Loja Virtual no webnode que me possa ajudar agradecia muito

    Obrigado

  19. Antonio Martins

    Celso eu consigo criar a minhã loja em sites pessoais ?

    • Antonio,
      Se for utilizar o Pagseguro, consegue criar site. Mas lembre-se de que a organização da loja é diferente. Você vai ter mais trabalho para fazer com que ele tenha cara de loja virtual.

      Abraço!

  20. Antonio Martins

    Celso
    uma pergunta
    e tenho os produtos na loja com uma imagem e quando se clica na imagem abre uma pagina nova mas com a imagem um pouco maior e eu queria saber se não da para fazer uma pagina com todos os detalhes do produto , para quando clicar na imagem abrir uma pagina com todos os detalhes do produto .
    já tentei e não sei como consigo fazer isso .

    Obrigado

  21. MARCIO DANIEL

    Caro Celso,

    Como incluo o sistema de rastreamento de sedex dos correios no webnode?

    Muito obrigado pela grande ajuda

  22. Antonio Martins

    Boa tarde celso

    Onde posso ver mais detalhes sobre a Loja Pronta ?

  23. Olá, tenho um site no Webnode e já tentei várias vezes criar os botões do Pag Seguro, el até aparecem, mas quando alguem clica nele aparece a seguinte mensagem: “A moeda corrente não foi especificada”, já cansei de tentar e a moeda está especificada no link do botão como BRL, alguém me ajuda?!!!!!

  24. Muito bom, estava procurando essa dica para webnode e agora encontrei. Seu trabalho está ajudando muitos com certeza !

  25. Oi Celso, eu tenho uma dúvida e gostaria muito que você pudesse me responder o mais rápido possível.

    Eu estou tentando fazer uma loja on-line, não é pelo WebNode e sim pelo Blogger, mas a minha dúvida é a mesma, de como adicionar o carrinho.

    Eu já gerei os botões de pagamentos do mesmo jeito que você ensinou aí e também adicionei o carrinho.

    Mas o problema é que quando clico para comprar uma coisa, ele não adiciona ao carrinho, ela vai para uma página individual do PagSeguro aonde você não tem a opção de continuar comprando (como se o carrinho não existisse). E se eu mesma volto para o site e clico para comprar outro produto (mesmo que não tenha apagado o anterior), novamente só aparece um produto.

    Não consegui entender a explicação que tem no site do PagSeguro, a seguinte: https://pagseguro.uol.com.br/v2/guia-de-integracao/carrinho-de-compras.html – Aonde eu devo incorporar esse código para que o carrinho do PagSeguro realmente funcione?

    Pois minha forma de frete está como “Frete adicional com valor fixo”, no caso, a pessoa paga o frete do frete mais caro e os outros itens adicionados a compra levarão a um acréscimo de apenas R$06,50 de frete. E isso não é possível sem o carrinho, pois tal ação não funciona na compra individual.

    • Olá Bruna,
      O código do carrinho de compras deveria ser adicionado no menu de navegação ou outro lugar, desde que seja possível editar o HTML.
      No menu de navegação, adicione um gadget Javascript/HTML e cole o código do carrinho.
      Uma vez presente no código do template, quando o visitante clicar em “Comprar Produto” ele aparecerá no carrinho.

      Abraço!

  26. alexandra nunes

    ola, gostaria de saber como colocar um produto no e-shop do web node loja online, para que quando alguém clicar em compra o produto fique indisponível e a pessoa não posso fazer sua solicitação, pois coloquei um produto com quantidade zero e mesmo assim quando a pessoa clica em compra vai para ficha de cadastro.

  27. Celson Lemes,

    Sou um seguidor de teu site, tem me ajudado bastante, e aprecio suas idéias, a título de esclarecimento e dúvida, gostaria de saber por gentileza se vc sabe se há uma forma de pagamento de pacote premium e dominio com weebly pelo mesmo ou comprando dominio de alguma outra empresa, utilizando forma de pagamento em boleto bancario? Tipo pagseguro? Pois só estou conseguindo com cartão de crédito e débito em conta corrente, q não é o meu caso!

    No Webnode consigo comprar dominio e pacote premium com boleto bancario, no Weebly não.

    E o q vc acha do CMS Joolma? Qual vc acha q é o melhor?

    Obrigado.

    Att
    http://www.rcamktelecom.com

  28. no meu eu so ponho o botao em um produto e ele vai para todos e fica o mesmos preço em todos

  29. tem como colocar o carrinho de compra e o botao do pag seguro na loja virtual .tenho loja virtual da loja 2.
    como faço?
    amei suas dicas

    • Olá Carla,
      Acredito que eles não permitam adicionar o Pagseguro como meio de pagamento porque eles tem uma parceria com outra empresa e é assim que eles ganham dinheiro com a loja.

      Abraço!

  30. Mauricio Guedes

    Olá Celso, obrigado por responder minha dúvida passada sobre transferir site para um sub domínio legal mesmo…
    Obrigado por sua dicas são de muito valor para nós, principalmente para o Maurício aqui rsrsrs…
    Abraços, saúde e paz…

  31. alguma mudnça para colocar na loja2?

  32. quando eu comesei meu blog a 4 meses atrás ,eu vi seus videos e seu site e me ajudou muito mesmo ,muito o brigado ,ja que fiz meu blog ”com sua ajuda” etra lá e veja o fruto do seu trabalho,muito obrigado

    brasilviolin.blogspot. com

  33. Boa tarde Celso, entendi tua explicação de como colocar botão de compra do PagSeguro no webnode, fiz conforme você explicou, o problema é que ao invés de aparecer o botão aparece o código, porque?

  34. por exemplo tenho grana no pagoseguro tem como transferir grana que tenho no pagoseguro para outro usuario do pagoseguro??
    se sim como
    obs minha conta n é vinculado com cartão

Atenção antes de Deixar um Comentário!
- Se o seu comentário for relacionado ao post, tenha certeza de que o leu.
- Todo comentário obsceno, ilegal, ofensivo, anônimo, escrito todo em maiúscula, contendo gírias em excesso ou estritamente publicitários, serão "apagados".
- Somente inclua links no comentário se ajudar a explicar o seu comentário.
- Se precisa de ajuda, procure deixar o máximo de informação possível.
- Não peça para adicionar ao MSN.
- Spam não será tolerado.


Este site lhe foi útil? Então ajude na divulgação clicando aqui.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>