O widget Checkout Form-Coupon do ShopEngine é um widget de modelo de checkout que os clientes podem usar para aproveitar cupons de desconto no total do pedido.
Vamos aprender como você pode usar widgets de formulário de checkout-cupom em seu site wooCommerce:
Etapa 1: ativar o widget de formulário de checkout-cupom #
Para ativar o widget,
- Vá para ShopEngine > Widgets > Formulário de checkout-cupom
- Ligar
- Salvar alterações
![ativar cupom do formulário de checkout](https://wpmet.com/wp-content/uploads/2021/09/enable_checkout_form_coupon.png)
Observação: Você também pode ativar o Checkout Form-Coupon com uma configuração global que ativa todos os widgets do ShopEngine ao mesmo tempo.
Etapa 2: adicionar cupom de formulário de checkout #
Antes de adicionar o widget, você precisa primeiro criar um modelo de checkout. Confira a documentação em como criar um modelo de check-out.
Adicionar Formulário de checkout-cupom:
- Vá para ShopEngine > Modelos > Modelo de checkout
- Clique em Editar com Elementor
![editar modelo de checkout](https://wpmet.com/wp-content/uploads/2021/09/edit_checkout_template.png)
- Procurar para Formulário de cupom na opção Pesquisa de Elementos
- Arraste e solte o widget
- Clique em Atualizar para salvar as alterações.
![arrastar e soltar cupom de checkout](https://wpmet.com/wp-content/uploads/2021/09/drag_and_drop_checkout_coupon.gif)
Etapa 3: configurações de estilo do formulário de checkout-cupom #
Vá para a guia Estilo para acessar as configurações de estilo.
Expanda a guia Informações para personalizar as seguintes configurações:
![formulário de cupom de configurações de estilo da guia de informações](https://wpmet.com/wp-content/uploads/2021/09/info-tab-style-settings-coupon-form-png.png)
- Cor: Alterar a cor do texto.
- Cor do link: Selecione a cor do link.
- Cor do link flutuante: Escolha a cor de foco do link.
- Fundo: Selecione uma cor de fundo.
- Tipografia: Você pode alterar a família da fonte, o tamanho da fonte, a espessura da fonte, a transformação e a altura da linha dos textos aqui.
- Tipo de borda: você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla, ranhura ou nenhuma.
- Largura da borda: Selecione a largura superior, esquerda, direita e inferior da borda.
- Cor da borda: Escolha uma cor para a borda.
- Preenchimento: Ajuste o preenchimento superior, esquerdo, direito e inferior.
Expanda a descrição opção para personalizar as seguintes configurações:
![descrição configurações formulário de cupom](https://wpmet.com/wp-content/uploads/2021/09/description_settings_coupon_form.png)
- Cor: Alterar a cor do texto de descrição.
- Tipografia: Você pode alterar o tamanho da fonte, a espessura e a altura da linha dos textos descritivos aqui.
![configurações de estilo de formulário de cupom](https://wpmet.com/wp-content/uploads/2021/09/coupon_form_style_settings.png)
- Cor: Alterar a cor do texto.
- Tipografia: Você pode alterar o tamanho da fonte, a espessura e a altura da linha aqui.
- Tipo de borda: você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla, ranhura ou nenhuma.
- Largura: Selecione a largura superior, esquerda, direita e inferior da borda.
- Cor: Escolha uma cor para a borda.
- Raio da borda: Selecione os valores superior, esquerdo, direito e inferior para o raio da borda.
- Preenchimento: Ajuste o preenchimento superior, esquerdo, direito e inferior
.Expanda o formulário de inscrição opção para personalizar as seguintes configurações:
![aplicar configurações de estilo de botão de cupom](https://wpmet.com/wp-content/uploads/2021/09/apply_coupon_button_style_settings.png)
- Tipografia: Você pode alterar o tamanho da fonte, a espessura e a altura da linha aqui.
- Normal/Hover: Mude para a guia Normal e flutuante para alterar a cor do texto e a cor de fundo das visualizações normal e instantânea.
- Tipo de borda: você pode escolher o tipo de borda como sólida, pontilhada, tracejada dupla, ranhura ou nenhuma.
- Largura: Selecione a largura superior, esquerda, direita e inferior da borda.
- Cor: Escolha uma cor para a borda.
- Raio da borda: Selecione os valores superior, esquerdo, direito e inferior para o raio da borda.
- Sombra da caixa: Clique na opção de edição para escolher a cor da sombra, valor horizontal, vertical, desfoque e propagação. Você também pode definir a posição como contorno ou inserção.
![formulário de cupom de configurações de fonte global](https://wpmet.com/wp-content/uploads/2021/09/global_font_settings_coupon_form.png)
- Família de fontes: Aqui você pode alterar a família de fontes de todo o widget.
Por fim, clique em Atualizar para salvar todas as alterações.
Agora, os cupons devem funcionar na sua finalização da compra. Confira a prévia abaixo:
![visualizar formulário de cupom](https://wpmet.com/wp-content/uploads/2021/09/preview-coupon-form-gif.gif)