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.

Sobre 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.
Adicionar a favoritos link permanente.

42 Comments

  1. kenyo carvalho

    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. Fabio F. Destro

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

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

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

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

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

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

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

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

  11. MARCIO DANIEL

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

    Muito obrigado

  12. Antonio Martins

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

    Obrigado

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

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

  15. MARCIO DANIEL

    Caro Celso,

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

    Muito obrigado pela grande ajuda

  16. 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?!!!!!

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

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

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

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

  21. 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…

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

  23. lima de oliveira

    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?

  24. Valter Oliveira

    puts cara eu fiz do jeito q tu falo e deu certo agora e espera alguem comprar algo de min para ver se esta a 100% de funcionamento mas do restante ta ok

    abraços obrigado

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *