A extensão Add To Cart Popup adiciona uma funcionalidade de popup ao Easy Digital Downloads. Quando ativada, após um cliente clicar em um botão ‘Adicionar ao Carrinho’, um pequeno modal popup aparece e oferece a opção de ir diretamente para a página de checkout ou continuar comprando. Aqui está um exemplo usando a estilização 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
