Se você está utilizando o Hostinger Affiliate Plugin para exibir produtos da Amazon e do Mercado Livre no WordPress, provavelmente já percebeu algumas limitações. Apesar do plugin ser excelente para inserir produtos rapidamente, ele ainda não oferece opções para personalizar o botão, alterar a cor, modificar o texto exibido ou esconder o preço dos produtos.
Neste artigo vou mostrar exatamente como resolvi esse problema no meu blog utilizando apenas CSS, sem modificar nenhum arquivo do plugin. A vantagem é que todas as personalizações continuam funcionando mesmo após futuras atualizações.
O que iremos corrigir
Ao final deste tutorial você conseguirá:
- Alterar a cor do botão da Amazon e do Mercado Livre;
- Corrigir o contraste do botão para melhorar a acessibilidade e evitar alertas no Google PageSpeed Insights;
- Alterar o texto do botão para “Ver Oferta”;
- Esconder o preço original dos produtos;
- Exibir a mensagem “Consulte o preço atualizado”;
- Adicionar uma borda vermelha elegante ao redor dos produtos;
- Melhorar a aparência dos blocos sem alterar o plugin.
Tudo isso utilizando apenas CSS.
Por que esconder o preço?
Essa é uma dúvida bastante comum.
O Hostinger Affiliate Plugin não atualiza automaticamente os preços dos produtos. Isso significa que, com o passar do tempo, o valor exibido pode ficar desatualizado.
Além disso, a Amazon possui regras específicas relacionadas à exibição de preços quando eles não são atualizados automaticamente.
Por esse motivo, considero muito mais interessante substituir o preço por uma mensagem como:
Consulte o preço atualizado
Assim o visitante entende que verá o valor real ao acessar a página oficial do produto.
O problema do botão no Google PageSpeed
Outro detalhe que me incomodou foi o botão padrão do plugin.
Dependendo do tema utilizado, o Google PageSpeed Insights pode exibir um aviso semelhante a:
- Contraste insuficiente entre texto e plano de fundo.
Isso acontece porque algumas cores utilizadas pelo plugin possuem baixo contraste.
A solução foi utilizar um vermelho mais escuro com texto branco, aumentando significativamente a legibilidade.
Como adicionar o CSS personalizado
O método que utilizei foi através do plugin WPCode, mas você também pode utilizar:
- Aparência → Personalizar → CSS Adicional;
- Tema filho;
- Outro plugin de CSS personalizado.
No meu caso, utilizei o WPCode porque facilita futuras alterações.
Veja, você pode gostar de ler também sobre: A Inteligência Artificial que Uso para Criar Artigos nos Meus Blogs
Como adicionar o CSS utilizando o WPCode
Para aplicar essa personalização, recomendo utilizar o plugin WPCode. Além de ser simples de configurar, ele permite centralizar todas as personalizações em um único lugar, sem alterar os arquivos do tema ou do plugin. Dessa forma, mesmo que o tema ou o Hostinger Affiliate Plugin sejam atualizados, o seu CSS continuará funcionando normalmente.
Depois de instalar e ativar o WPCode, siga este passo a passo:
- No painel do WordPress, acesse Code Snippets → Add Snippet.
- Clique em Add Your Custom Code (New Snippet).
- Dê um nome ao snippet, por exemplo: Hostinger Affiliate Premium CSS.
- Em Code Type, selecione CSS Snippet.
- Cole todo o código CSS apresentado neste artigo.
- Em Location, deixe a opção padrão para carregar o CSS no frontend do site.
- Ative o snippet clicando em Active.
- Clique em Save Snippet.
Pronto! Agora todas as personalizações serão aplicadas automaticamente aos blocos do Hostinger Affiliate Plugin, tanto da Amazon quanto do Mercado Livre.
Dica: Se você utiliza o LiteSpeed Cache ou outro plugin de cache, limpe o cache do site após salvar o snippet. Em seguida, atualize a página do navegador (Ctrl + F5) para visualizar imediatamente as alterações.
Código CSS completo
Copie e cole o código abaixo exatamente como está.
/* ==========================================================
HOSTINGER AFFILIATE PREMIUM CSS
Mercado Livre + Amazon
Produto Único + Lista + Lista com Descrição + Cards
==========================================================*/
/* ==========================================================
CONTORNO DOS CARDS
==========================================================*/
.hostinger-affiliate-block-single-type,
.hostinger-affiliate-block-list-simple,
.hostinger-affiliate-block-list-with-desc,
.hostinger-affiliate-block-list-cards__item{
border:1px solid #c62828 !important;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,.08);
transition:.3s ease;
}
.hostinger-affiliate-block-single-type{
padding:20px;
}
.hostinger-affiliate-block-list-simple{
padding:18px;
margin-bottom:20px;
}
.hostinger-affiliate-block-list-with-desc{
margin-bottom:22px;
}
.hostinger-affiliate-block-single-type:hover,
.hostinger-affiliate-block-list-simple:hover,
.hostinger-affiliate-block-list-with-desc:hover,
.hostinger-affiliate-block-list-cards__item:hover{
border-color:#b71c1c;
box-shadow:0 8px 20px rgba(0,0,0,.15);
}
/* ==========================================================
PREÇOS
==========================================================*/
.hostinger-affiliate-block-single-type__product-price,
.hostinger-affiliate-block-list-simple__product-price,
.hostinger-affiliate-block-list-with-desc__product-price,
.hostinger-affiliate-block-list-cards__product-price{
font-size:0 !important;
}
.hostinger-affiliate-block-single-type__product-price::before{
content:"Consulte o preço atualizado";
font-size:20px;
font-weight:700;
color:#222;
}
.hostinger-affiliate-block-list-simple__product-price::before,
.hostinger-affiliate-block-list-with-desc__product-price::before,
.hostinger-affiliate-block-list-cards__product-price::before{
content:"Consulte o preço atualizado";
font-size:18px;
font-weight:700;
color:#222;
}
/* ==========================================================
BOTÕES AMAZON + MERCADO LIVRE
==========================================================*/
.hostinger-affiliate-block-single-type__product-buy-button,
.hostinger-affiliate-block-single-type__product-amazon-button,
.hostinger-affiliate-block-list-simple__product-buy-button,
.hostinger-affiliate-block-list-simple__product-amazon-button,
.hostinger-affiliate-block-list-with-desc__product-buy-button,
.hostinger-affiliate-block-list-with-desc__product-amazon-button,
.hostinger-affiliate-block-list-cards__product-buy-button,
.hostinger-affiliate-block-list-cards__product-amazon-button{
background:#c62828 !important;
color:#fff !important;
border:1px solid #b71c1c !important;
border-radius:8px;
font-size:0 !important;
font-weight:700;
transition:.3s ease;
}
.hostinger-affiliate-block-single-type__product-buy-button::before,
.hostinger-affiliate-block-single-type__product-amazon-button::before{
content:"Ver Oferta";
font-size:18px;
font-weight:700;
color:#fff;
}
.hostinger-affiliate-block-list-simple__product-buy-button::before,
.hostinger-affiliate-block-list-simple__product-amazon-button::before,
.hostinger-affiliate-block-list-with-desc__product-buy-button::before,
.hostinger-affiliate-block-list-with-desc__product-amazon-button::before,
.hostinger-affiliate-block-list-cards__product-buy-button::before,
.hostinger-affiliate-block-list-cards__product-amazon-button::before{
content:"Ver Oferta";
font-size:17px;
font-weight:700;
color:#fff;
}
.hostinger-affiliate-block-single-type__product-buy-button:hover,
.hostinger-affiliate-block-single-type__product-amazon-button:hover,
.hostinger-affiliate-block-list-simple__product-buy-button:hover,
.hostinger-affiliate-block-list-simple__product-amazon-button:hover,
.hostinger-affiliate-block-list-with-desc__product-buy-button:hover,
.hostinger-affiliate-block-list-with-desc__product-amazon-button:hover,
.hostinger-affiliate-block-list-cards__product-buy-button:hover,
.hostinger-affiliate-block-list-cards__product-amazon-button:hover{
background:#b71c1c !important;
border-color:#8e0000 !important;
}O resultado
Após aplicar esse CSS você terá:
- Botões muito mais bonitos;
- Melhor contraste para acessibilidade;
- Visual profissional;
- Borda destacando os produtos;
- Preço substituído por uma mensagem mais segura;
- Mesmo funcionamento dos links de afiliado.
Os links continuam exatamente os mesmos. Apenas a aparência visual é modificada.
Observação Importante
Atenção: Depois de adicionar o código CSS, você não verá as alterações imediatamente dentro do editor de blocos do WordPress (Gutenberg). Durante a edição do artigo, o preço continuará sendo exibido normalmente e os botões permanecerão com a aparência padrão. Isso não é um erro e nem significa que o código não funcionou.
O CSS é aplicado apenas no frontend do site, ou seja, na versão pública do artigo que os visitantes acessam. Portanto, para conferir o resultado corretamente, publique (ou atualize) o artigo e abra a página em uma nova aba do navegador.
Se você estiver utilizando um plugin de cache, como o LiteSpeed Cache, também é recomendável limpar o cache do site após salvar o snippet CSS. Em seguida, atualize a página utilizando Ctrl + F5 para garantir que o navegador carregue a versão mais recente do estilo.
Esse CSS interfere no SEO?
Não.
Na prática ele altera somente o visual dos elementos.
Os links continuam sendo os mesmos.
As URLs de afiliado permanecem intactas.
Os atributos patrocinados também continuam presentes.
Esse código pode deixar o site mais lento?
Essa foi uma das minhas preocupações antes de utilizá-lo.
Depois de analisar cuidadosamente, cheguei à conclusão de que o impacto é praticamente inexistente.
O CSS possui poucos kilobytes e, quando utilizado junto com plugins como LiteSpeed Cache, normalmente será minificado e combinado com o restante dos estilos do site.
Na prática, o ganho visual compensa muito mais do que qualquer diferença imperceptível de carregamento.
Veja, você pode gostar de ler também sobre: Hospedagem Business ou Premium da Hostinger: Qual Escolher?
Vale a pena fazer essa personalização?
Na minha opinião, sim.
O Hostinger Affiliate Plugin é uma excelente ferramenta para trabalhar com programas de afiliados da Amazon e do Mercado Livre, porém ainda possui poucas opções de personalização.
Com apenas algumas linhas de CSS é possível deixar os blocos muito mais profissionais, melhorar a experiência do visitante e corrigir pequenos detalhes que fazem diferença na aparência do site.
Se você pretende utilizar esse plugin em um projeto de longo prazo, recomendo fortemente aplicar essa personalização.
Olá, sou especialista em criação de sites e blogs no WordPress, uma jornada que começou em 2018. Desde então, já ajudei milhares de pessoas a transformar suas ideias em projetos digitais de sucesso. Hoje, conto com mais de 27mil inscritos no meu canal no YouTube e mais de 10 mil alunos que confiam nos meus cursos online para alcançar seus objetivos.
