Aprenda neste tutorial como usar o plugin grátis Fluid Checkout para ter um CHECKOUT DE PASSOS no WooComemrce. O Fluid Checkout permite ter um Checkout de Etapas na Loja Virtual criada com WordPress e WooCommerce.
Muitos lojistas buscam por um Checkout para 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.
Muitas empreendedores que têm Loja Virtual com WordPress e WooCommerce buscam por um “Checkout de alta conversão WooCommerce com etapas”. Pois sabem que um Checkout WooCommerce dividido em passos aumenta as conversões da loja, seja loja com estoque ou na modalidade Dropshipping.
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.
Então aprenda neste vídeo como configurar o Fluid Checkout – que é um Checkout para WooCommerce, e tenha um Checkout de alta conversão WooCommerce com Etapas/Passos. Muitas pessoas também conhecem o Checkout do WooCommerce como “Página de Finalização de Compra”. Que é a página onde de fato os clientes compram os produtos na loja virtual.
Abaixo está o CSS utilizado para personalizar os Botões do Checkout com o plugin Fluid Checkout Para WooCommerce.
/*CSS para personalizar o botão de avanço de etapas do Fluid Checkou */
.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 alem de arredondar*/
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;
}
button#place_order {
border-radius: 30px; /* Arredonda o Botao de Finalizar Compra */
background-color: #6d2993; /* Mudar a cor do Botao de Finalizar Compra */
}
button.button.alt.fc-place-order-button {
border-radius: 30px; /* Arredonda o Botao de Finalizar Compra */
background-color: #6d2993; /* Mudar a cor do Botao de Finalizar Compra */
}
/* Mudar a cor do Botao de Finalizar Compra quando nao esta ativo para clicar. OBS tem que prencher os campos ai habilita */
button.button.alt.fc-place-order-button {
background: #6d2993 !important;
}
/*Personalizar botao de cupom*/
button.fc-coupon-code__apply.button {
background: #6d2993;
color: white;
border-radius: 30px;
}
/*Fim dos CSSs do Checkout*/
