Como criar o botão Adicionar ao carrinho do WooCommerce por ID do produto
Publicados: 2021-02-24
É possível criar o botão Adicionar ao carrinho do WooCommerce por id do produto e usar o botão em formulários, widgets, post ou páginas e até mesmo em modelos. Idealmente, o botão Adicionar ao carrinho do WooCommerce pode ser personalizado para atender a uma ampla variedade de opções personalizadas.
Botão Adicionar ao carrinho do WooCommerce por ID do produto
Em um post anterior, expliquei como alterar o botão Adicionar ao carrinho do WooCommerce para um link e também como alterar o botão Adicionar ao carrinho do WooCommerce para ler mais.
Estes são outros tutoriais anteriores que podem ajudá-lo a aprender mais sobre como personalizar o botão Adicionar ao carrinho do WooCommerce:
- Como substituir o botão Adicionar ao carrinho pelo link WooCommerce
- Como ocultar o botão Leia mais e adicionar ao carrinho WooCommerce
- Como alterar o texto do botão Adicionar ao carrinho na página da loja WooCommerce
- Como alterar o guia do WooCommerce para adicionar ao carrinho de texto com exemplos
- Como adicionar produtos ao carrinho programaticamente no WooCommerce
- Como alterar o aviso 'Adicionado ao carrinho' do WooCommerce
- Como ocultar o preço e adicionar ao carrinho para usuários desconectados WooCommerce
Como você pode ver na lista de tutoriais acima, existem várias maneiras de personalizar o botão Adicionar ao carrinho do WooCommerce para ajudá-lo a obter diferentes layouts ou design de conteúdo.
Por exemplo, quando você deseja criar uma tabela de preços do WooCommerce, pode ser necessário criar botões de adicionar ao carrinho que você pode adicionar ao botão de chamada para ação na tabela de preços.
Criar Produto Simples WooCommerce Botão Adicionar ao Carrinho por ID do Produto
Para criar o botão Adicionar ao carrinho do WooCommerce por ID do produto, você precisa saber o ID do produto específico que deseja criar no botão Adicionar ao carrinho. O ID do produto pode ser encontrado facilmente na página de visão geral de todos os produtos, conforme explicado neste tutorial em – Como obter o ID do produto WooCommerce .
Adicionar ao carrinho Link
Agora você pode criar a URL de adição do carrinho que você não adicionará ao código do botão no local em que deseja exibir o botão. Nesse caso, você pode criar o link Adicionar ao carrinho simples do produto como no código abaixo:
https://example.com/?add-to-cart=840
O URL do seu site deve substituir a parte example.com do URL e o ID do produto específico deve substituir o ID do produto 840 usado no exemplo acima.
Você pode adicionar isso em um código de botão HTML como no código abaixo:
Criar Produto Simples com Quantidade WooCommerce Botão Adicionar ao Carrinho por ID do Produto
Você também pode adicionar a quantidade ao URL de adição ao carrinho e pode fazer isso usando os vários parâmetros de URL usados para adicionar lógica aos URLs.
Nesse caso, você pode estender o código que criamos na etapa acima e criar um botão simples de adicionar ao carrinho de produtos WooCommerce por ID do produto com a quantidade de 2 da seguinte forma:
https://example.com/?add-to-cart=840&quantity=2
Como você pode ver, adicionamos um sinal de e comercial e a palavra quantidade e igualamos a 2 o número de itens que queremos adicionar ao carrinho quando o botão é clicado no mesmo produto.
Para adicionar essa URL ao código HTML e criar o botão Adicionar ao carrinho do WooCommerce por ID do produto com a quantidade você deve usar o código abaixo:
Crie o botão Adicionar ao carrinho do WooCommerce por ID do produto com redirecionamento para o carrinho
Para facilitar a navegação dos clientes da loja WooCommerce em seu site, criar redirecionamentos é muito importante. No passado, destaquei as muitas maneiras de criar redirecionamentos WooCommerce.
Notavelmente, eu compartilhei nessas postagens do blog – WooCommerce cria redirecionamento após o checkout e WooCommerce redireciona após o logout e até criei o redirecionamento WooCommerce após o plugin de checkout para ajudá-lo a implementar o redirecionamento após o checkout.
Redirecionamento WooCommerce para o carrinho após adicionar ao carrinho
Você também pode criar um redirecionamento para o carrinho com o botão Adicionar ao carrinho do WooCommerce por ID do produto. Você pode fazer isso alterando o código que compartilhei na etapa acima para ser o seguinte:
https://example.com/cart/?add-to-cart=840
Como você vê, adicionamos o carrinho ao URL para garantir que o usuário seja redirecionado ao carrinho depois de adicionar o produto ao carrinho. O código completo com o código do botão HTML é o seguinte:
Redirecionamento WooCommerce para checkout após adicionar ao carrinho
Você também pode criar redirecionamento para checkout com o botão Adicionar ao carrinho do WooCommerce por ID do produto. Você pode fazer isso alterando o código que compartilhei na etapa adicionando o checkout na URL acima para ser o seguinte:
https://example.com/checkout/?add-to-cart=840
Como você vê, adicionamos o checkout ao URL para garantir que o usuário seja redirecionado para o checkout depois de adicionar o produto ao carrinho. O código completo com o código do botão HTML é o seguinte:
Conclusão
Neste tutorial, destacamos as várias maneiras de criar o botão Adicionar ao carrinho do WooCommerce por ID do produto. Também vimos como adicionar redirecionamento ao botão Adicionar ao carrinho, bem como adicionar a quantidade do produto ao botão para carrinho.
Espero que agora você possa criar o botão Adicionar ao carrinho do WooCommerce por ID do produto e usá-lo em sua tabela de preços, formulários e modelos. Você também pode personalizar ainda mais o botão adicionar ao carrinho usando a classe de botão que adicionei ao código acima. Se você ainda está personalizando seu site, pode se beneficiar das ideias que compartilhei no Ultimate WooCommerce Hide Guide.
Para usuários do WooCommerce que têm o tema Storefront instalado e desejam personalizá-lo ainda mais, compartilhei uma coleção brilhante de mais de 80 dicas de personalização do tema WooCommerce Storefront que o guiarão sobre como criar uma aparência personalizada do seu site usando o tema padrão do WooCommerce – Storefront .
Artigos semelhantes
- Como criar campos de check-out condicional do WooCommerce
- Como criar o shortcode de logout de login do WooCommerce
- Como alterar o tema da vitrine da cor do botão
- Como obter o título do produto WooCommerce
- Como ocultar o preço e adicionar ao carrinho para usuários desconectados WooCommerce
- Como ocultar o botão Atualizar a página do carrinho WooCommerce
- Como substituir o botão Adicionar ao carrinho pelo link WooCommerce
- Como ocultar o preço se zero no WooCommerce
- Como criar um tema filho do WooCommerce Storefront [Guia Completo]
- Como ocultar a opção de administração do Hub de Marketing WooCommerce
- Como obter o ID do produto na página de checkout ou na página de pedidos no WooCommerce
- Como obter detalhes do pedido após o checkout no WooCommerce
- Como redirecionar para o carrinho após o login no WooCommerce
- Como adicionar o redirecionamento de página da minha conta no WooCommerce
- Gancho de redirecionamento de login do WooCommerce explicado com exemplo
- Como desativar temporariamente o checkout no WooCommerce
- Como configurar o blog WooCommerce Storefront