Como Colocar um CHECKOUT DE PASSOS no WooCommerce [Ckeckout de Alta Conversão com Fluid Checkout]

Neste vídeo eu vou te ensinar como configurar um  checkout de Passos com o plugin Fluid Checkout pra sua loja WooCommerce. Fala pessoal, tudo bem? Aqui  é a Micaela do Descomplicando Sites e antes de começar o tutorial eu quero pedir para você deixar  um like nesse vídeo e para você se inscrever no canal.

Bom pessoal, eu estou aqui na Loja Udi Tech  que é um projeto que eu ensinei vocês a criar aqui no canal vou deixar o link no Card na descrição  se você quiser aprender esse plugin que a gente vai utilizar é um plugin gratuito e ele serve  Tanto para você que tá usando uma loja feita com Elementor Pro quanto para Elementor Free inclusive  nessa loja aqui ó da Amorel joias que é uma loja que eu também ensinei vocês a criar no canal eu  fiz ela toda com Elementor Free e alguns plugins frees também não usamos plugins pagos nessa loja  e ela também está configurada com o fluid checkout outra aviso que eu quero dar aqui para vocês  é que a gente lançou a nossa loja de templates todos os projetos Que Eu Já ensinei a criar aqui  no canal fica disponível para você e aí você pode para instalar o template lá no seu WordPress  que aí a loja ou o projeto que você comprar fica igualzinho ao meu site aí você só precisa  adaptar pro seu nicho colocando suas fotos Suas cores e não precisa criar toda a estrutura então  assim economiza muito tempo e você tem o projeto aqui bonitinho funcional vou deixar o link da  loja na descrição ou então você pode acessar templates. descomplciandosites. com.

br o checkout  do WordPress ó ele é assim por padrão né não é ruim mas dá pra gente deixar mais customizado eu  vou usar esse checkout de Passos aqui que é bem interessante porque aí vai fechando cada uma das  abinhas não deixa a tela muito grande aí aumenta a conversão porque a pessoa não se cansa e não  desiste de preencher todo o formulário né esse formulário aqui ele é mais interessante  ele se chama fluid checkout é um plugin gratuito o próprio Elementor também tem esse  campo de checkout que dá para você configurar igual do carrinho mas eu vou usar o do fluid  que está um pouco melhor tá você vai vir aqui no painel vai vir em plugins Adicionar novo  o fluid também é bem mais fácil de Configurar pesquisa aqui por fluid checkout é esse plugin  aqui você vai clicar em instalar depois vem ativar quando você ativa ele ele fica com  errinho tá vendo que aqui fica em branco aqui do lado aqui era era onde era para estar  o do produto ele fica com esse errinho porque o widget de formulário que tá aqui é o do  elementor Então a gente tem que colocar o próprio doce mesmo puxado com o shortcode para  isso a gente vai vir aqui na P finalização de compra né vai clicar aqui em editar com Elementor  Lembrando que só vai aparecer esse erro você se você tiver usando aquele widget do Elementor  ó tá vendo esse widget aqui finalizar a compra do Elementor então que a gente vai fazer a gente  vai excluir ele vai pegar um widget de shortcode vai arrastar para cá E aí aqui a gente vai  colocar o shortcode que chama o checkout que aqui no caso do checkout a gente vai colar  esse shortcode aqui que é entre as chaves né o com underline checkout tá aí a gente Atualiza aí  se a gente vier aqui na página de finalização de compra agora já tá aparecendo o resumo do pedido  aqui do lado Tá vendo só que observa bem o menu e o rodapé sumiram para eles voltarem a gente  precisa ir nas configurações do Então a gente vai vir aqui em plugins instalados vai vir aqui no  fluid configurações aí vai clicar aqui em checkout aí aqui ó em modelo de cabeçalho e rodapé a gente  vai deixar cabeçalho e rodapé do tema e vai clicar aqui em salvar e aí pronto agora já tá aparecendo  o menu e o rodapé né O cabeçalho rodapé do tema tá tudo aqui já tá configurado só tá faltando a gente  mudar as do link né Essas cores aqui do link a gente muda através daquelas configurações do tema  que a gente já fez então a gente pode entrar aqui em algum editor do Elementor Clica ali em cima  configurações do site aí tem aqui tipografia aí se a gente não definir uma cor específica aqui pros  links ele fica pegando do tema eu vou colocar essa cor azul para ser a nossa cor de links aí a gente  tem que tomar cuidado porque se tiver algum botão que a gente colocou no site a gente não colocou  uma cor texto aí fica tudo azul por exemplo vamos ver aqui na nossa página inicial ó ó tá vendo eu  não tinha colocado uma cor branca mesmo na cor do texto Então tá ficando azul que agora a cor  de link é azul isso é fácil de resolver só você vir aqui no card dos produtos clicar ó tá vendo  eu tinha deixado aqui a cor do texto Definido do tema E aí ele puxa o que a gente configurou lá  agora eu vou deixar a cor específica Branca pronto aí se eu voltar aqui pra página home ó agora já  está com a cor certinha E algum outro lugar que você tiver colocado o botão e tiver tudo azul por  exemplo é porque você esqueceu de colocar a cor de dentro do texto é só você voltar lá e configurar  Ok então ficou assim aí falta a gente colocar um CSS aqui para configurar esse botão de pagamento  né que ele vem dessa cor Eu Já criei um CSS vou deixar aqui para vocês aí você vai clicar aqui em  personalizar lembrando que todos esses códigos vão estar lá no material de apoio que eu deixei para  vocês tá você vai copiar esse código vai vir aqui em CSS adicional E vai colar aí se você quiser  mudar essa cor aqui é neste código aqui ó código de background color vou deixar também o código já  certinho para na hora que passar o mouse ele mudar para a mesma cor azul só que um pouquinho mais  clara tá então beleza agora a gente pode testar aqui essa página de finalização de de compra no  mobile né que é a parte do celular então vamos clicar aqui em inspecionar colocar no celular ó  ele já configura sozinho a gente não precisa mexer né Então tá tudo ok então é isso Pessoal espero  muito que vocês tenham gostado, se você curtiu deixa um like no vídeo, se inscreve no canal, me  segue nas redes, um abraço, até a próxima, tchau.