A extensão
Add To Cart Popup adiciona uma funcionalidade de popup ao Easy Digital Downloads. Quando ativada, após um cliente clicar no botão ‘Adicionar ao Carrinho’, um pequeno popup modal aparece e oferece a opção de ir diretamente para a página de checkout ou continuar comprando. Aqui está um exemplo usando o estilo padrão do tema TwentyFifteen.
Veja como configurar o popup.
Instruções de Configuração para o Popup Adicionar ao Carrinho
- Após ser instalado, localize as configurações desta extensão em admin do WordPress → Downloads → Configurações → Extensões → Popup Adicionar ao Carrinho
- Quando você ativar o plugin, o popup será desabilitado por padrão. Isso para que você tenha a chance de ajustar as configurações antes de ativá-lo em seu site. O popup pode então ser habilitado marcando a caixa de seleção Habilitar Popup.
Observação: Ao usar o recurso de botão “Comprar Agora”, ou a extensão Downloads Gratuitos, o popup será automaticamente desabilitado para não interferir com redirecionamentos de gateways de pagamento ou popups de terceiros.
Personalização
Aparência Geral
Pré-visualizar Popup: Este botão permite que você acione um popup enquanto estiver na página de configurações para ver suas alterações antes de salvá-las. Você também pode usar o link “Pré-visualizar Popup” na Barra de Administração. Adicionamos isso para que você não precise rolar constantemente de volta ao topo da página de configurações para pré-visualizar o popup.
Observe que a pré-visualização pode não ser totalmente precisa ao usar shortcodes, pois alguns estilos podem não ser carregados no Admin do WordPress. Recomenda-se pré-visualizar no front-end do seu site quando terminar para confirmar a aparência do popup.
Texto do Popup: Aqui você pode definir o texto exibido no popup. Se o plugin detectar “%s” (sem aspas) em qualquer lugar no texto desta opção, ele será alterado para o nome do download que o usuário adicionou ao carrinho. Você também tem a opção de adicionar arquivos de mídia (como imagens), embeds e até shortcodes dentro do popup.
Texto Plural do Popup: Semelhante ao Texto do Popup, este texto é exibido no popup quando vários itens foram adicionados ao carrinho ao mesmo tempo. Isso é típico ao usar opções de preços variáveis que permitem que várias opções sejam adicionadas simultaneamente. Mais uma vez, você também tem a opção de adicionar arquivos de mídia (como imagens), embeds e até shortcodes dentro do popup.
Lembre-se que você pode expandir a barra de ferramentas do editor clicando no botão mais à direita do editor!
Tamanho da Fonte: Isso permite que você altere o tamanho geral da fonte usada no popup. Vários formatos CSS são aceitos aqui.
- Tamanhos em pixels são tamanhos fixos absolutos. Exemplo: 12px
- Tamanhos em porcentagem são relativos ao tamanho de fonte padrão do tema. Exemplo: 120% (20% maior que o tamanho de fonte do tema).
- Valores “em” são semelhantes a porcentagens, onde 1em é o tamanho de fonte padrão. Exemplo: 2em (duas vezes maior que o padrão).
Cor do Texto: A cor do texto do popup. Para definir a cor, clique na caixa de cor para revelar o seletor de cores.
Cor de Fundo: A cor do fundo do popup. Para definir a cor, clique na caixa de cor para revelar o seletor de cores.
Aqui está um exemplo com a cor do texto definida como amarela e a cor de fundo definida como azul:
Borda: Esta opção permite estilizar a borda do popup, que aparece na borda da caixa do popup. As três opções são a largura (ou espessura), o estilo e a cor, respectivamente.
Raio da Borda: O raio dos cantos da borda. Quanto maior este valor, mais arredondados serão os cantos. Isso também se aplica se você definiu a borda como não visível (largura é zero, estilo é “nenhum” ou cor é transparente).
Sombra: Esta opção permite adicionar uma sombra ao popup definindo a quantidade de sombra (tamanho e espessura) e a cor da sombra. O exemplo abaixo adiciona uma sombra verde escura com uma quantidade de sombra de 15:
Cor de Sobreposição: O termo sobreposição refere-se à cor que cobre o resto da página quando o popup é exibido. Você pode alterar sua cor clicando na caixa de cor para revelar o seletor de cores, que também inclui uma opção de transparência. O exemplo abaixo muda a sobreposição para um laranja claro semitransparente:
Dimensões do Popup
Tamanho: Aqui você pode controlar o tamanho do popup. Vários formatos CSS são aceitos aqui, incluindo pixels e porcentagens.
- Tamanhos em pixels são tamanhos fixos. Exemplo: 500px (500 pixels na tela do usuário)
- Tamanhos em porcentagem são relativos ao tamanho da janela do navegador do usuário. Exemplo: 60% (60% da tela do usuário)
Se a largura ou altura forem deixadas em branco, o popup as calculará automaticamente para ajustar o conteúdo.
O exemplo a seguir demonstra um popup com a largura definida como 500px e a altura deixada em branco para ser calculada automaticamente.
Espaçamento Interno: O espaçamento interno refere-se ao espaço entre a borda do popup e seu conteúdo, como mostrado na imagem a seguir:
A área em verde é o que é referido como “espaçamento interno”.
Estilos de Botão
Borda do Botão: A borda para os botões exibidos no popup, semelhante à opção Borda anterior. Você pode definir a espessura, o estilo e a cor da borda, respectivamente.
Raio do Canto: O raio dos cantos do botão. Quanto maior este valor, mais arredondados serão os cantos. Isso também se aplica se a borda do botão não for visível (largura definida como 0, estilo é “nenhum” ou cor é transparente).
Por exemplo: uma borda “pontilhada” azul com uma largura de 5px e um raio de canto de 3px:
Espaçamento Interno do Botão: Semelhante à opção de Espaçamento Interno do popup, isso permite ajustar o espaçamento dentro do botão. Por exemplo, o seguinte usa 6px de espaçamento interno superior e inferior e 30px de espaçamento interno esquerdo e direito.
Direção dos Botões: Você pode definir os botões para serem exibidos lado a lado horizontalmente ou empilhados um sobre o outro verticalmente. A configuração padrão é horizontal.
Alinhamento dos Botões: Você pode escolher entre alinhamento à esquerda, ao centro e à direita. Escolher esquerda ou direita empurrará os botões para o respectivo lado, enquanto escolher centro posicionará os botões no centro do popup.
Ordem dos Botões: Esta opção permite que você escolha qual botão é exibido primeiro. Se a Direção dos Botões estiver definida como horizontal, esta opção determinará qual botão é exibido à esquerda. Se a Direção dos Botões estiver definida como vertical, esta opção determinará qual botão é exibido no topo.
Botão de Checkout/Continuar
As duas seções a seguir consistem em opções idênticas que permitem ajustar a aparência individual de ambos os botões.
Habilitado: Escolha se deseja mostrar ou ocultar o botão.
Texto: Você pode personalizar o texto de cada botão como quiser.
Cor do Texto: A cor do texto dentro do botão.
Cor do Texto ao Passar o Mouse: A cor do texto dentro do botão quando o cursor do mouse está sobre o botão.
Cor de Fundo: A cor de fundo do botão.
Cor de Fundo ao Passar o Mouse: A cor de fundo do botão quando o cursor do mouse está sobre o botão.
O exemplo a seguir usa botões brancos com texto preto que se transformam em botões vermelhos com texto branco quando o cursor do mouse está sobre o botão.
O Seletor de Cores, Explicado
