Como configurar um carrinho de compras WordPress com WooCommerce
Publicados: 2022-10-28Então, você está quase terminando de criar seu novo site de compras WooCommerce. Você terminou de construir o layout principal do produto do marketplace, o menu de seleção da categoria do produto e o rodapé do cabeçalho com dicas de navegação funcionais.
O aspecto mais importante de qualquer site de comércio eletrônico é a capacidade de redirecionar e ajudar os clientes a adicionar produtos aos carrinhos de qualquer lugar do site, até o processo de checkout até a confirmação do pedido.
Isso pode parecer uma função difícil de integrar aos sites de comércio eletrônico do WordPress, mas na verdade não é. O WordPress tem uma grande comunidade apoiando seu desenvolvimento, e você pode adicionar essa função ao seu site usando um plug-in de carrinho de compras WooCommerce que funciona perfeitamente com qualquer tema WordPress WooCommerce .
Índice
Como funciona o carrinho WooCommerce?
Quando os produtos são adicionados ao carrinho no WooCommerce, eles são adicionados a uma lista separada com a variante e a quantidade escolhida pelo cliente. Isso ajuda os usuários a acompanhar seus produtos selecionados, e essa função também permite que eles vejam automaticamente o preço total calculado do pedido que eles farão no checkout. E também oferece aos usuários a capacidade de editar a página do carrinho de compras do WooCommerce.
Os benefícios de um carrinho de compras no WooCommerce
Existem alguns grandes benefícios em usar um carrinho de compras em uma plataforma de compras WooCommerce. Antes de chegarmos a um guia passo a passo sobre como criar uma página de carrinho de compras WooCommerce, algumas delas são:
- Projetado para ajudar os clientes a selecionar um ou mais produtos para comprar e continuar a navegar em outros produtos.
- Ele ajuda a calcular o valor total dos produtos à medida que você os adiciona ao carrinho.
- Exibe a quantidade e as variações de um produto que você selecionou e calcula o valor total de acordo.
- Ele pode redirecionar os clientes para a página de checkout com um clique de um botão.
- Ele pode vir com recursos adicionais de carrinho de compras WooCommerce, como histórico de pedidos, salvar um carrinho para mais tarde, etc.
- Os usuários podem obter um plug-in de carrinho WooCommerce que vem com elementos de design impressionantes.
Como adicionar um carrinho de compras ao WooCommerce
Agora, vamos passar pelo processo de adicionar um carrinho de compras ao WooCommerce. No final deste artigo, você poderá começar a vender uma grande variedade de produtos com uma plataforma de comércio eletrônico funcional que apresenta o melhor plugin de carrinho de compras para WordPress.
Etapa 1: Instalação de pré-requisitos
Para começar com a criação do carrinho e o processo de configurações do carrinho do WooCommerce, você precisará ter determinados itens de plug-in instalados e ativados em sua conta do WordPress. Para isso, você precisará ter as versões mais recentes do WordPress , WooCommerce , construtor de páginas Elementor e o plug-in ShopReady WooCommerce Shop Builder.
Para instalar os plugins, faça login na sua conta do WordPress, vá até o Painel do WordPress > Plugins > Adicionar Novo e procure os plugins um por um, depois clique em E agora clique em Ativar quando o processo de instalação terminar. Siga o mesmo procedimento para instalar todos os plugins e programas necessários.
Etapa 2: usando um tema de carrinho de compras WooCommerce
Agora, para promover nosso processo de criação de funções de carrinho, você precisará ter um tema WooCommerce funcional instalado para algumas funcionalidades adicionais. Nesse caso, podemos usar um modelo de carrinho de compras WooCommerce em vez de usar um tema WooCommerce WordPress .
Isso reduzirá bastante o tempo necessário para personalização e publicação do site.
Para instalar um modelo de comércio eletrônico funcional em seu site, comece criando uma nova página e dê um título a ela no Painel do WordPress > Páginas > Adicionar novo e clique em Você será redirecionado para a tela do Elementor Editor . Aqui você encontrará o ícone da biblioteca de modelos ShopReady – Elementor . Clique no ícone para ter acesso à biblioteca de modelos. Escolha qualquer modelo que se ajuste à identidade da sua marca e clique em Inserir para aplicar o modelo.
Aguarde até que o modelo termine seu processo de importação.
Deve parecer algo assim.
Sua seção de produtos pode parecer vazia se você não tiver adicionado produtos ao WooCommerce. Você deve adicionar os produtos que está tentando exibir em sua plataforma WooCommerce imediatamente. Para fazer isso, você pode seguir nosso guia anterior sobre – Como adicionar produtos a uma loja WooCommerce .
Cada produto WooCommerce pode ser personalizado com o título do produto, descrição, preço, preço com desconto, imagens, metadados, variações, etc. no painel do produto WooCommerce.
Etapa 3: personalização da página do produto
Para iniciar o processo de personalização da página do seu produto, vá até o painel ShopReady – WooCommerce Builder e selecione a opção Modelos. A partir daí, você pode construir uma página de produto básica para usar como ponto de partida para suas personalizações. Ative a categoria Modelo de Produto e procure a configuração de Produto Único nessa categoria. Agora, selecione o ícone de edição na barra de ferramentas.
E depois disso, a tela que exibe o Elementor Editor será carregada para você. Basta clicar no sinal de mais que pode ser visto no canto superior direito da interface do Elementor para iniciar o processo de personalização da página. Quando se trata da aparência da sua página e dos widgets que você deseja usar, você tem uma grande variedade de opções disponíveis quando se trata das seções Elementor que você pode inserir nela.
Etapa 3: usando widgets Elementor para personalizar a página do produto da loja WooCommerce
Adicionando um título de produto
Como você já estabeleceu uma estrutura de seção primária usando o Elementor para sua página de produto WooCommerce, agora você pode iniciar o processo de adicionar um título de produto. Você precisará usar a abordagem de arrastar e soltar para posicionar o widget Título do produto onde quiser na página do produto para atingir esse objetivo.
Exiba o título correto do produto acessando a barra de navegação do Elementor, selecionando a guia Conteúdo e procurando as opções de Atualização do Editor no submenu que vem depois de fazer isso. Para selecionar o produto apropriado, clique em seu nome no menu suspenso localizado em Produto Demo.
Você precisará acessar o Painel do produto WooCommerce e adicionar ou modificar as informações essenciais do produto para que esses dados exibam o título correto do produto. Isso pode ser feito clicando nos botões “Adicionar” ou “Editar”.
Adicionando uma imagem em destaque à página do produto
Depois disso, você deve garantir que seu produto tenha uma galeria de imagens e uma imagem em destaque. Para fazer isso, você pode utilizar qualquer um dos vários widgets de imagem incluídos no plug-in tudo-em-um para comércio eletrônico fornecido com o Elementor.
Para esta demonstração, utilizaremos o widget ShopReady Thumbnail with Zoom, que, como o próprio nome sugere, possui um recurso de zoom. Se você usar este widget, poderá exibir uma versão de zoom de foco do produto WooCommerce da imagem do seu produto para seus clientes sempre que eles moverem o mouse sobre a imagem do seu produto.
Da mesma forma que antes, você pode selecionar a imagem do produto apropriada clicando na guia Conteúdo da opção Produto Demo.
Adicionando Bloco para Widget de Preços
O bloco de preços do produto é outro componente essencial que deve estar presente na página do seu produto de comércio eletrônico. Para fazer isso, você precisará alterar os atributos do produto WooCommerce com os ajustes apropriados e usar o widget ShopReady Price, que deve ser posicionado abaixo do título do produto.
Para garantir que o preço correto seja exibido, escolha o título do produto no menu suspenso na opção Produto de demonstração da guia Conteúdo.
Adicionando a descrição do produto
Usando este widget de descrição do produto dos complementos do produto WooCommerce, você não apenas tem a opção de adicionar descrições de produtos, mas também tem o poder de personalizar altamente as descrições. Através do uso da guia de estilo, você poderá alterar como a descrição do produto será exibida ao público em geral.
Adicionando a funcionalidade Adicionar ao carrinho
A capacidade de os clientes adicionarem itens adicionais aos seus carrinhos antes de passar para a página de checkout é facilitada pela opção “Adicionar ao carrinho”, que é outro recurso extremamente crucial.
A utilização do widget ShopReady Add to Cart permitirá que você equipe a página de sua loja de comércio eletrônico com uma versão poderosa da função Add to Cart . Com a ajuda deste widget, você poderá fornecer aos seus clientes a capacidade de ajustar a quantidade de um produto que eles têm no carrinho diretamente do bloco Adicionar ao carrinho.
Você também pode modificar a aparência do botão Adicionar ao carrinho do Elementor por meio da guia Estilo do elemento de estilo do produto WooCommerce. Aqui, você pode alterar a fonte, cor, plano de fundo, margem, preenchimento e outros atributos.
Adicionando metadados à página do produto
Implementar um filtro de produto WooCommerce que use os metadados e atributos de produto que você adicionou ao WooCommerce enquanto adiciona produtos é algo que você deve fazer se quiser oferecer aos seus consumidores uma experiência de compra mais satisfatória.
Procure o widget ShopReady Meta e coloque-o logo abaixo do botão “adicionar ao carrinho” na página dedicada ao seu produto. Isso permitirá que você exiba as informações em questão.
Quando você seleciona o título do produto apropriado no menu suspenso localizado na opção Produto de demonstração da guia Conteúdo, as tags e os metadados do seu produto devem ser exibidos com precisão.
Adicionando botões de compartilhamento de mídia social à página do produto
Ao utilizar um bloco de botão de compartilhamento de mídia social simples, você pode permitir que seus consumidores compartilhem suas postagens de produtos nas mídias sociais diretamente da página do produto WooCommerce para o item que compraram. Que você pode produzir usando apenas a funcionalidade de arrastar e soltar oferecida pelo widget Elementor Social Share.
Diretamente da aba Conteúdo, o bloco pode ser personalizado com qualquer ícone de mídia social, texto e links compartilháveis de escolha do usuário. Além disso, a guia Elementor Style permite que os usuários alterem a apresentação visual dos blocos de compartilhamento social, se assim o desejarem.
E com isso, você concluiu os fundamentos da personalização de páginas de produtos WooCommerce.
Etapa 4: adicionar produtos relacionados ao WooCommerce
A utilização do widget de produtos relacionados que está incluído nos complementos de produtos WooCommerce permitirá que você exiba produtos relacionados em sua página de produto, o que é uma excelente estratégia para aumentar as vendas online. Usando o widget ShopReady Related Products, você pode facilmente construir um lindo bloco deslizante de produto que é dividido em seções.
Para usar o widget, basta arrastá-lo e soltá-lo no bloco de produto único e, em seguida, selecionar os produtos específicos que você deseja destacar em sua página de produto único na guia Conteúdo .
Etapa 5: Adicionando campos de checkout personalizados do WooCommerce
Como mencionado anteriormente, este é um aspecto importante de uma plataforma de comércio eletrônico em funcionamento. Com um construtor de loja WooCommerce como o ShopReady, você pode facilmente utilizar um código de acesso do carrinho WooCommerce e implementar um carrinho de comércio eletrônico funcional dessa maneira, ou pode usar um widget ShopReady para aplicar esse recurso.
Para ter um carrinho funcionando, primeiro você precisa adicionar o widget “ Adicionar ao carrinho” na página do produto. O que já fizemos. Então, vamos voltar e criar a própria página do carrinho, onde todos os produtos serão exibidos assim que forem adicionados ao carrinho.
ShopReady – O WooCommerce Shop Builder permite que os usuários escolham entre dois modelos de carrinho diferentes, disponíveis para uso no Painel ShopReady . No painel do ShopReady, clique no menu Modelos , agora habilite e edite um modelo de carrinho predefinido WooCommerce fornecido pelo ShopReady.
Ao criar um novo modelo de carrinho WooCommerce ou editar um existente, você será redirecionado para a tela Elementor Editor.
A partir daqui, você pode simplesmente adicionar o widget ShopReady Cart , e sua página de carrinho assumirá sua forma automaticamente, e criar um carrinho de compras WordPress sem plug-in é um processo simples com ShopReady. Não requer plugins ou ferramentas extras.
Se você tiver algum produto já adicionado ao seu carrinho, ele deve ficar assim.
E aí está, uma página de carrinho WooCommerce funcional com um botão de carrinho funcional. Você também tem a opção de personalizar ainda mais a página do carrinho com o Elementor. Com o Elementor, você pode alterar todos os aspectos da página do carrinho, desde as cores do plano de fundo até as configurações de tipografia do Elementor.
Você também pode utilizar um código de acesso do carrinho de compras WooCommerce. Nesse caso, você terá que usar o widget Elementor ShortCode.
Quando terminar de personalizar a página da sua loja, certifique-se de clicar em Publicar/Atualizar para tornar as alterações ao vivo para seus visitantes e clientes.
Conclusão
Todo o processo de criação de um botão de adicionar ao carrinho personalizado do WooCommerce pode parecer uma tarefa assustadora, mas à medida que você avança neste guia, verá que o processo de criação dessa função técnica não é nada difícil com o conjunto certo de ferramentas. O ShopReady WooCommerce Shop Builder é um pacote completo que oferece todas as ferramentas que você precisa para criar uma plataforma de comércio eletrônico robusta desde o início.
E se você tiver algum problema com o ShopReady ou com o processo de criação do carrinho, sempre poderá consultar a documentação do carrinho WooCommerce .
Perguntas frequentes sobre carrinhos de compras WooCommerce
O WordPress tem um carrinho de compras?
WordPress CMS é uma plataforma de hospedagem de sites barebones. Não inclui nenhum carrinho de compras ou recursos relacionados ao comércio eletrônico. Mas como é uma plataforma de código aberto, você pode utilizar qualquer uma de suas ferramentas, plug-ins ou módulos de comércio eletrônico criados pela comunidade para adicionar um carrinho ao site WordPress.
O WooCommerce tem um carrinho de compras?
Sim, o plug-in base do WooCommerce vem com um botão de carrinho funcional e uma página de carrinho. Mas é muito minimalista na natureza. Para incrementar a página do carrinho, você pode usar qualquer número de extensões do WooCommerce ou aproveitar ao máximo as opções de personalização do construtor de páginas WooCommerce Elementor e ShopReady para as páginas do carrinho de comércio eletrônico. De ícones de carrinho WooCommerce a layouts de página detalhados, tudo pode ser personalizado com ShopReady.
Como crio uma página de checkout personalizada no WooCommerce?
Baixe e instale o ShopReady – WooCommerce Shop Builder. Agora crie um novo modelo de página de checkout do WooCommerce no painel ShopReady. Você será redirecionado para o Editor Elementor, a partir daqui você pode utilizar o widget ShopReady Checkout para criar uma página de checkout personalizada funcional no WooCommerce.