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

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

Celso Lemes

Blogueiro Profissional. Conhecimento sobre Marketing Digital, Google SEO, Divulgação Online, Redes Sociais, Webdesign, Divulgação de Empresas

42 comentários em “Como Adicionar Botão e Carrinho de Compras do Pagseguro no Webnode

  • 29/08/2011 em 9:59 am
    Permalink

    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.

    Resposta
  • 29/08/2011 em 10:23 am
    Permalink

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

    Resposta
    • 29/08/2011 em 2:38 pm
      Permalink

      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!

      Resposta
      • 30/08/2011 em 12:01 pm
        Permalink

        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!

        Resposta
  • 29/08/2011 em 8:32 pm
    Permalink

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

    Resposta
  • 29/08/2011 em 10:39 pm
    Permalink

    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

    Resposta
    • 30/08/2011 em 12:15 pm
      Permalink

      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!

      Resposta
  • 10/09/2011 em 5:00 pm
    Permalink

    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?

    Resposta
    • 11/09/2011 em 1:20 pm
      Permalink

      Neemias,
      Infelizmente eu não sei como isso pode ser feito. Espero que algum visitante possa te ajudar.

      Abraço!

      Resposta
  • 15/11/2011 em 2:35 am
    Permalink

    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

    Resposta
    • 15/11/2011 em 12:58 pm
      Permalink

      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!

      Resposta
  • 16/11/2011 em 3:32 am
    Permalink

    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

    Resposta
  • 21/11/2011 em 5:19 pm
    Permalink

    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

    Resposta
    • 22/11/2011 em 11:01 am
      Permalink

      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!

      Resposta
  • 22/11/2011 em 1:06 pm
    Permalink

    Celso Lemes

    Desculpa mas podes me explicar melhor ?
    Obrigado

    Resposta
    • 22/11/2011 em 1:36 pm
      Permalink

      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!

      Resposta
  • 22/11/2011 em 3:10 pm
    Permalink

    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

    Resposta
    • 22/11/2011 em 11:15 pm
      Permalink

      Antonio,
      Neste caso eu não sei como resolver. Eu nunca criei uma loja virtual de verdade no Webnode. Só para testes mesmo.

      Abraço!

      Resposta
  • 22/11/2011 em 8:05 pm
    Permalink

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

    Muito obrigado

    Resposta
    • 22/11/2011 em 11:33 pm
      Permalink

      Marcio,
      Não tem como. Você teria que criar outro site, mas desta vez escolhendo a opção “Sites Pessoais”.

      Abraço!

      Resposta
  • 23/11/2011 em 9:55 am
    Permalink

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

    Obrigado

    Resposta
  • 23/11/2011 em 10:40 am
    Permalink

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

    Resposta
    • 24/11/2011 em 2:49 am
      Permalink

      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!

      Resposta
  • 26/11/2011 em 3:39 pm
    Permalink

    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

    Resposta
  • 02/12/2011 em 1:37 am
    Permalink

    Caro Celso,

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

    Muito obrigado pela grande ajuda

    Resposta
    • 02/12/2011 em 1:54 am
      Permalink

      Marcio,
      Não tenho ideia de como fazer isso. O site do Correio fornece tal ferramenta?

      Abraço!

      Resposta
  • 17/04/2012 em 2:37 pm
    Permalink

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

    Resposta
    • 18/04/2012 em 11:48 am
      Permalink

      Paula,
      Desculpe mas eu não sei porque esta mensagem aparece no seu site. Não tenho como te ajudar.

      Abraço!

      Resposta
  • 25/04/2012 em 10:04 am
    Permalink

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

    Resposta
  • 01/06/2012 em 11:09 am
    Permalink

    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.

    Resposta
  • 16/06/2012 em 6:03 pm
    Permalink

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

    Resposta
    • 17/06/2012 em 12:33 am
      Permalink

      Olá Wender,
      Você tem que configurar os dados do botão antes de adicionar na página.

      Abraço!

      Resposta
  • 15/09/2012 em 11:49 pm
    Permalink

    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

    Resposta
    • 16/09/2012 em 10:37 am
      Permalink

      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!

      Resposta
  • 10/10/2012 em 10:11 pm
    Permalink

    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…

    Resposta
  • 07/11/2012 em 3:17 pm
    Permalink

    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

    Resposta
  • 07/03/2013 em 3:03 pm
    Permalink

    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?

    Resposta
    • 09/03/2013 em 4:00 pm
      Permalink

      Olá Lima,
      Você alterou o editor de conteúdo para o modo HTML?

      Abraço!

      Resposta
  • 23/04/2013 em 8:07 pm
    Permalink

    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

    Resposta
  • 08/02/2014 em 1:10 am
    Permalink

    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

    Resposta
  • 01/10/2017 em 5:43 pm
    Permalink

    ola pessoal, alguem sabe me dizer como o webonde pega os dados do pagseguro e do paypal , pois quando adicionamos um novo produto ele ja bota essas duas opçoes de pagamentos na nossa pagina. porem nao sei como fazer para configurar o botao do pagseguro e do paypal que ele apresenta automaticamente.

    obrigado

    Resposta
    • 19/10/2017 em 12:02 pm
      Permalink

      Olá Robson,
      Você precisa configurar os meios de pagamentos no painel de controle.

      At,

      Resposta

Deixe uma resposta

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