Como alterar a cor do menu WooCommerce Storefront
Publicados: 2020-10-02
Configurar sua loja WooCommerce leva muito tempo e encontrar o tema certo também é um grande desafio. No entanto, os criadores do WooCommerce criaram o tema Storefront que está disponível gratuitamente e é muito flexível para personalização. Leva muitas horas para criar um design de layout perfeito que os usuários vão adorar. Você pode querer mudar a cor do menu ou a cor de algum outro elemento que o incomoda.
WooCommerce Storefront Alterar a cor do menu
No entanto, é muito fácil fazer essas personalizações usando a opção “Personalizar” em “Aparência” no painel. Esta seção permite que você altere seu tema facilmente de várias maneiras permitidas pelo autor do tema. No entanto, o autor do tema não pode pensar em tudo, e alterar a cor do menu pode se enquadrar nessa categoria.
O CSS personalizado é salvo separadamente dependendo do tema e o truque é apenas descobrir qual CSS usar. Neste breve tutorial, mostrarei como você pode fazer isso. Além disso, você poderá alterar a cor de qualquer elemento em seu tema Storefront.
Etapas para alterar a cor do menu do tema da vitrine
Aqui estão os passos simples que você precisa seguir:
1. Identifique o elemento que você precisa alterar
É muito fácil dizer 'mudar a cor do menu'. No entanto, implementá-lo é uma coisa diferente. Cada tema tem uma forma diferente de se referir aos seus elementos, por isso é recomendável usar a correta para que o estilo CSS possa funcionar. Isso significa que, antes de podermos mudar alguma coisa, temos que entender o que queremos mudar.
Basta clicar com o botão direito do mouse na área que deseja alterar em um navegador como Chrome ou Firefox e clicar em “Inspecionar elemento” assim: 
Depois de clicar nele, isso abrirá o console contendo os vários elementos da página à esquerda e as configurações desses elementos à direita. Agora você precisa encontrar o elemento responsável por alterar a cor. 
Para selecionar o elemento, clique no seletor de elemento conforme mostrado na captura de tela. Em seguida, aponte o cursor para o elemento de menu para verificar o estilo. Pesquise palavras como “fundo” ou “cor de fundo”. Quando você encontrá-lo, desmarque e marque a marca de “tick” ao lado deles para ver se eles resultam em uma mudança na cor do menu. Se a cor não mudar, então não é essa que você está procurando. 
2. Escolha a Cor Desejada
Agora que você fez o trabalho duro, o próximo passo é mudar a cor. Isso pode ser feito desmarcando a opção de cor existente e clicando próximo ao colchete de fechamento “}”. Isso permitirá que você insira sua regra CSS. Você precisa digitar algo como “cor de fundo”, pressione tab e digite a cor desejada. 
No meu exemplo, mudei a cor para vermelho e você pode ver que o menu acima do console também ficou vermelho. No entanto, é importante observar que isso não faz nenhuma alteração real em seu site. Ele age apenas como uma mudança temporária que é visível no seu navegador. Ele permite que você experimente o conteúdo do seu coração. Além disso, você pode até decidir colocar uma imagem como plano de fundo. Agora que você está satisfeito com suas mudanças, é hora de torná-las permanentes.
3. Extraindo a Nova Regra
Você precisa extrair a regra clicando com o botão direito do mouse (no Firefox) assim e selecionando “Copiar regra”: 
No entanto, se você estiver usando o Chrome, basta selecionar a regra inteira com o mouse e copiar o texto. Cole-o em um editor e exclua todas as regras existentes, exceto a nova que você acabou de adicionar, se houver alguma.
4. Adicionando a Regra
A parte restante é copiar/colar na seção “ CSS Adicional ” da interface de personalização do tema Storefront. Para fazer isso:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- No menu Dashboard, clique em Appearance Menu > Customize .
- Navegue até CSS adicional na barra lateral esquerda que aparece.
- Adicione a regra CSS conforme mostrado abaixo:
- Clique em publicar quando estiver satisfeito com as alterações.
Conclusão
Neste tutorial, mostrei uma maneira muito fácil de alterar a cor do menu do seu tema Storefront em apenas quatro etapas fáceis. Além disso, você pode usar o procedimento acima para modificar a aparência de qualquer elemento em seu site, não apenas menus. A parte difícil é apenas encontrar o elemento certo e a regra certa para mudar.
Depois de identificar o elemento, você precisa escolher a cor preferida. A área do console permite que você insira suas regras de CSS, mas isso não faz nenhuma alteração real em seu site. Ele permite que você experimente suas regras e as veja em ação antes de implementá-las em seu site.
Quando estiver satisfeito com as alterações, você precisará extrair a nova regra e colá-la na seção CSS Adicional da interface de personalização do Storefront. Se você está impressionado com as mudanças, você pode clicar em publicar. Até agora, tenho certeza que você pode alterar a cor de qualquer elemento em seu site!
Artigos semelhantes
- Como alterar o texto do botão de checkout no WooCommerce [Place Order]
- Estilizando tabelas, linhas, colunas e células HTML específicas
- Como adicionar classe de navegação ativa com base na URL
- Como alterar o aviso 'Adicionado ao carrinho' do WooCommerce
- Como alterar o texto do botão Adicionar ao carrinho na página da loja WooCommerce
- Como contar itens adicionados ao carrinho Código de contagem de carrinho WooCommerce
- Como ocultar o subtotal do carrinho no WooCommerce ou remover a linha do subtotal
- Como criar uma página separada de postagens do WordPress ou página de blog
- Estilizando itens de menu do WordPress separadamente Classes CSS do menu do WordPress
- Como selecionar todos, exceto o último filho em CSS » CSS Not Last Child Example
- Mais de 80 truques para personalizar o tema WooCommerce da vitrine: o guia definitivo de personalização do tema da vitrine
- Como alterar o tamanho do ícone do carrinho no tema WooCommerce Storefront
- Como alterar o tamanho do tema da vitrine do botão do menu móvel
- Como redirecionar uma página do WordPress sem plugins?
- Como adicionar um novo menu no menu da página Minha conta no Woocommerce
- Como remover o texto do rodapé do email 'Construído com WooCommerce'
- Como tornar a solução de correção rápida rolável do Divi Mobile Menu
- Como a alteração procede ao check-out do texto no WooCommerce
- Como ajustar a altura do cabeçalho do WooCommerce Storefront