Como Colocar um CHECKOUT DE PASSOS no WooCommerce [Ckeckout de Alta Conversão com Fluid Checkout]
HTML-код
- Опубликовано: 16 сен 2024
- Aprenda neste tutorial como Personalizar Checkout WooCommerce para ser dividido em passos/etapas. Mostro como usar o plugin grátis Fluid Checkout para ter um CHECKOUT de passos no WooCommerce. O Fluid Checkout permite ter um Checkout de Etapas na Loja Virtual criada com WordPress e WooCommerce. Muitas pessoas buscam por um Checkout WooCommerce de Alta Conversão. E sem dúvidas, o Fluid Checkout por dividir o Checkout em Etapas no WooCommerce deixa o preenchimento menos cansativo e mais atrativo para os clientes da loja e isso aumenta as conversões/vendas da loja. Aprenda como personalizar a Página de Finalização de Compra do WooCommerce (também chamada de Checkout).
Shortcode: [woocommerce_checkout]
Adquira:
✅🔥Hostinger: Hospedagem de Sites com Desconto Extra de + 10% OFF pelo link: descontohostin... + Cupom DESCOMPLICANDOSITES
✅Adquira nossos Templates de sites Editáveis: templates.desc...
✅Adquira o Elementor Pro aqui: descomplicando...
✅Royal Addons Premium pelo link: pluginsds.com/...
✅Plugin de Otimização WP-Rocket: bit.ly/Otimiza...
✅Crocoblock Elementor (Todos os Jet) - bit.ly/JetPlugins
👉Entre e participe do nosso canal VIP no Telegram: t.me/descompli... ❤️
👉Se inscreva no canal: bit.ly/QueroMe...
👉Portfólio de sites do Canal: descomplicando...
🔻Links citados e outros que você pode gostar também🔻:
Como Comprar Hospedagem e Domínio com Desconto - • HOSTINGER 2024: Como C...
Loja Virtual Elementor Pro - • Como Criar uma LOJA VI...
Loja Virtual Elementor Free - • Como Criar uma LOJA VI...
Adquira Meus TEMPLATES - • Adquira Meus TEMPLATES...
PlayList Curso de Elementor Free - bit.ly/CursoEl...
PlayList Curso de WordPress - bit.ly/CursoGr...
Como Criar um Site Profissional - • Como Criar um SITE NO ...
Como Criar um Site Profissional Elementor Free - • Como Criar um SITE PRO...
Como Fazer uma Landing Page 1 - • Como Fazer LANDING PAG...
Como Fazer uma Landing Page 2 - • Como Criar uma LANDING...
Como Criar uma Loja de Dropshipping - • Como Criar uma LOJA DE...
Como Criar um Blog - • Como Criar um BLOG NO ...
Como Otimizar site WordPress - • LiteSpeed Cache: Como ...
Como Fazer Banner para Site no Canva - • INCRÍVEL! Como Fazer B...
Como Vender Sites, Onde Encontrar Clientes - • Como Vender Sites, Ond...
🔻Algumas PlayLists:🔻
- Personalizando o WooCommerce: bit.ly/WooComE...
- Curso de Elementor Free - bit.ly/CursoEl...
- Curso de WordPress Grátis - bit.ly/CursoGr...
- Novidades do Elementor: bit.ly/Novidad...
- Da Venda de Sites a Entrega: bit.ly/VendaEn...
- Como Criar Sites Completos: bit.ly/ComoCri...
- Otimização de Sites - bit.ly/Otimiza...
- Dicas de Design: bit.ly/DicasDe...
- Photoshop: bit.ly/Photosh...
- Marketing de Afiliados: bit.ly/MktAfil...
- Marketing Digital: bit.ly/MktElem...
- Blog: bit.ly/BlogWPE...
- Menus: bit.ly/MenusCo...
- Popups: bit.ly/PopupsC...
- Plugins do Crocoblock: bit.ly/PlayList...
- Hospedagem de Sites: bit.ly/Hospeda...
- Emails: bit.ly/EmailsW...
☑️ Como Colocar um CHECKOUT DE PASSOS no WooCommerce [Ckeckout de Alta Conversão com Fluid Checkout] - Compartilhe o Vídeo: • Como Colocar um CHECKO...
Muitos empreendedores que possuem Loja Virtual noWooCommerce e WordPress, buscam por um “Checkout de alta conversão WooCommerce e com etapas/passos”. Pois sabem que um Checkout WooCommerce dividido em passos/etapas aumentam as vendas da loja. Pois um Ckeckout onde os tem muitos campos para preencher acaba afastando muitas pessoas. Ao dividir o Checkout em passos, ou seja, em etapas, fica menos cansativo e consequentemente as pessoas preenchem mais e efetuam a compra do produto.
👉Se inscreva e ative o sininho das notificações para ver novos vídeos e dicas sobre WordPress, Elementor, Woocommerce, Hospedagens de Sites e de como Viver de Criação de Sites.
Clique aqui: bit.ly/QueroMe...
📍 Sigam minhas redes sociais
💲 Instagram - / descomplicandosites
💲 Telegram - t.me/descompli...
Boa aula!
Com amor,
Micaela Soares - Descomplicando Sites.
#CheckoutWoocommerce #FinalizacaoDeCompra #Woocommerce
![Como Configurar MELHOR ENVIO no WooCommerce [Frete + Barato, + Transportadoras, Etiqueta de Envio]](http://i.ytimg.com/vi/vcAvlntxObk/mqdefault.jpg)
![Como Configurar MELHOR ENVIO no WooCommerce [Frete + Barato, + Transportadoras, Etiqueta de Envio]](/img/tr.png)
😊Fala pessoal, tudo bem? Segue o CSS para personalizar os cores, caso queira:
✅Adquira nossos Templates de sites Editáveis: templates.descomplicandosites.com.br
/*CSS para personalizar o botão de avanço de etapas do Fluid Checkout */
.has-checkout-layout--multi-step .fc-step__actions .fc-step__next-step {
margin: 0;
min-width: 280px;
width: 100%;
background: #6d2993; /* aqui coloque a cor de fundo em RGB que desejar */
color: white; /* Cor do texto*/
border-radius: 30px; /* faz arredondar as bordas do botao */
text-align: center;
}
.has-checkout-layout--multi-step.woocommerce-checkout form.woocommerce-checkout .fc-wrapper [data-step-complete] .fc-step__substep .fc-step__substep-title:before {
background-color: #098d18 !important; /* Mudar a cor do icone de check para verde */
}
/* Aqui muda a cor do botao ao passar ou mouse*/
button.fc-step__next-step.button:hover {
background: #8137aa !important;
color: white !important;
}
/* Aqui muda a cor do botao Salvar Alteracoes*/
button.fc-step__substep-save.button {
background: #6d2993;
color: white;
border-radius: 30px;
}
/* Aqui muda a cor do botao Salvar Alteracoes ao passar o mouse*/
button.fc-step__substep-save.button:hover {
background: #8137aa;
color: white;
}
Como sempre Show!!!!!!!! Like!!!!! Essa professora é mil!!!!!!!!!!!!!!!!!! 👏👋👋
@@clebersmenezes obrigada ☺️
Como sempre, maravilhoso vídeo, simples, prático, objetivo e completo. Muito obrigado e espero que continue seu lindo trabalho.
@@carlosfreitas4056 obrigada ☺️
Valeu, Micaela! Você é fera! ❤❤❤
Obrigado Mi, aulas e aulas! 🙏
Tudo funcionou quase perfeito. No meu caso aqui, ele fica travado na tela de fazer login e colocar o e-mail como visitante. Mesmo logado em uma conta, ele só avança quando se coloca um e-mail de visitantes. Desativei essa opção no woocommerce e ainda assim continua. Eu realmente gostei mas não deu pra usar :(
Top! Pode me ajudar com uma indicação? Existe algum plugin que envie e-mail ou whatsapp da seguinte maneira: Vamos supor que eu faça o cadastro de um novo produto ou quero selecionar determinado produto pra esse plugin enviar ou o email ou o whatsapp para os contatos que assinaram a newsletter? Não sei se soube te explicar. Me ajudaria muito! Gratidão!
Como colocar o autocompletar endereço ao colocar o cep nesse checkout?
Também queria saber :/
O meu está em inglês as etapas. Com faz pra mudar?
Queria saber sobre site em que o trabalho é online. Porque geralmente no footer coloca o endereço, só que eu não tenho um local de atendimento. Tem algo sobre isso?
Imagine que eu seja um fotógrafo, mas ao invés de eu criar produtos no woocomerce pra vender os ensaios fotográficos como pacotes fechados, eu queira vender ensaios fotográficos totalmente personalizados, onde a pessoa vai montando cada etapa, se quem as fotos em estúdio ou externas, se quer incluir maquiadora e personal stilyst, qual a quantidade de fotos ela quer, se quer apenas digitais ou um álbum impresso e etc, pra no final aparecer a soma do valor total do ensaio fotográfico que a cliente montou. Quais plugins você me indicaria pra fazer isso?
Oi Micaela, estou com uma duvida mas, não encontrei resposta em canto algum para soluciona-la
Situação: gateway A deu problema mas, tenho gateway B. Só que até eu perceber o problema (ex: meio da noite e eu estar dormindo), vou perder vendas porque somente o gateway A está ativado na página de pagamentos do Woo Commerce.
Então, qual problema eu posso ter deixando múltiplos meios de pagamentos ativos?
Micaela, como eu faço pra ter uma opção da pessoa mandar um email para a loja quando o produto em questão não estiver em estoque? Pra ela ser avisada quando esse produto voltar
Estou com problema "Há um erro crítico no seu site" quando ativo o Fluid Checkout. Como faço pra resolver? Quando desativo, volta ao normal.
Nilberto parece que o problema está relacionado a uma incompatibilidade entre o plugin Mailchimp for WooCommerce e o Fluid Checkout. Aqui estão alguns passos que você pode seguir para tentar resolver esse erro crítico:
Desativar o plugin Mailchimp for WooCommerce:
Acesse o painel de administração do WordPress.
Vá para Plugins > Plugins Instalados.
Encontre o plugin Mailchimp for WooCommerce e clique em Desativar. (foi minha solução)
Instalei e configurei mas esbarrei em uma dificuldade... (pode até ser algo meio bobo, mas não consegui resolve! rs). O botão de pagamento aparece no modo computador mas some no modo celular pela interface do usuário... Alguém consegue dar uma ajuda com isso?
Alguém pode me ajudar?
No meu site quando ativo o Plug-in Fluid Checkout, na página de Checkout e somente nestá página meu site não preenche a largura total da tela.
-Não afeta o restante do site.
Já tentei ajustes Globais e outras, porém o erro só aparece ou some, quando ativo ou desativo o Plug-in.
Valeu Micaela, você é monstra!!!
Estou com o mesmo problema, conseguiu resolver?
@@matheusdorado Boa tarde amigo!
Não encontrei solução…
Meu site tem como cor de fundo um azul,
Porém nesta página do checkout, troquei a cor azul de fundo por uma branca padrão pra ficar imperceptível. Uma gambiarra, mas sem solução até o momento!
@@oscanals Acabei de conseguir. Basta atualizar os plugins, principalmente do woocommerce. Isso fez funcionar. Abraço!
Gente, pelo amor de Deus! Alguém sabe como fazer o buscador procurar fotos que eu coloquei no elementor? Estou tentando fazer um site de afiliado básico r eu simplesmente não consigo fazer isso! Eu só estou tendo problema com o buscador.
Boa tarde! fiz os passos, mas o meu aparece a seguinte mensagem ( Há um erro crítico no seu site. ) o que pode ser?
Também aconteceu comigo, e ainda não consegui resolver. Quando desativo o plugin o site volta.
Para mim deu tudo certo até a hora de finalizar pagamento, mesmo usando [woocommerce_checkout] ou checkout do elementor o botão de Finalizar pagamento não funciona.