CSS
š IdentificaĆ§Ć£oā
-
Documento: CSS
-
Criado por: Camilo Mascarenhas
-
Contato (criador): pm.camilomascarenhas@gmail.com
-
Data de criaĆ§Ć£o: 08/04/2026
-
Ćltima atualizaĆ§Ć£o: 08/04/2026
-
Atualizado por: Camilo Mascarenhas
-
Contato (Ćŗltima ediĆ§Ć£o): pm.camilomascarenhas@gmail.com
-
VersĆ£o: 1.0
-
Status: Ativo
-
ResponsĆ”vel tĆ©cnico: Davi JĆŗnior
-
HistĆ³rico de versƵes:
- v1.0 ā CriaĆ§Ć£o do documento
CSS
VisĆ£o Geralā
O CSS Ć© utilizado para modificar a interface da plataforma, removendo elementos nativos e adaptando o comportamento visual do WooCommerce, Dokan e tema.
Grande parte da experiĆŖncia do usuĆ”rio depende diretamente dessas alteraƧƵes.
Papel do CSS na Plataformaā
O CSS Ʃ responsƔvel por:
- Ocultar funcionalidades nĆ£o utilizadas
- Simplificar a interface para usuĆ”rios nĆ£o tĆ©cnicos
- Ajustar layout (principalmente mobile)
- Corrigir inconsistĆŖncias visuais do tema e plugins
- Adaptar fluxos do Dokan
Tipos de CustomizaĆ§Ć£oā
1. RemoĆ§Ć£o de funcionalidades nativasā
Elementos removidos via CSS:
- Carrinho
- Conta do usuƔrio no header
- Categorias
- TĆtulos de pĆ”gina
- BotĆ£o de Quick View
- BotƵes de comparaĆ§Ć£o (compare)
Motivo:
- Plataforma nĆ£o possui compra interna
- ReduĆ§Ć£o de complexidade
- Evitar confusĆ£o para usuĆ”rios
ObservaĆ§Ć£o:
Alguns desses comportamentos tambĆ©m sĆ£o reforƧados via PHP.
2. Ajustes de interface e UXā
AlteraƧƵes realizadas:
- PadronizaĆ§Ć£o de botƵes
- Ajuste de espaƧamento e alinhamento
- OcultaĆ§Ć£o de elementos desnecessĆ”rios
- CorreĆ§Ć£o visual de formulĆ”rios
Inclui:
- Login
- Cadastro
- Labels e textos
3. CustomizaĆ§Ć£o de compartilhamentoā
CriaĆ§Ć£o de estilos para botƵes sociais:
- Copiar link
Aplicado em:
- PƔgina de produto
- PƔgina da loja
- Blog
4. AlteraƧƵes no Dokan (Painel do vendedor)ā
Grande parte do CSS atua diretamente no Dokan.
AlteraƧƵes:
- RemoĆ§Ć£o de menus e submenus
- OcultaĆ§Ć£o de configuraƧƵes avanƧadas
- RemoĆ§Ć£o de campos desnecessĆ”rios no cadastro de produto
- Limpeza da tela de ediĆ§Ć£o de produto
Campos removidos incluem:
- Tipo de produto
- Desconto
- Estoque
- Atributos
- VariaƧƵes
- SEO
- Frete
- Taxas
Objetivo:
- Simplificar ao mƔximo o uso
- Evitar erro de configuraĆ§Ć£o
5. Ajustes Mobile (CrĆtico)ā
O mobile possui tratamento especĆfico.
Principais mudanƧas:
- TransformaĆ§Ć£o da tabela de produtos em cards
- ReorganizaĆ§Ć£o do layout do painel
- Ajuste de botƵes para largura total
- CorreĆ§Ć£o de headers e tĆtulos
Impacto:
- Melhora significativa na usabilidade
- ReduĆ§Ć£o de erros de operaĆ§Ć£o
6. AlteraƧƵes no PWAā
ModificaƧƵes visuais:
- Texto do banner
- Texto do botĆ£o
Objetivo:
- Tornar linguagem mais amigƔvel
7. Ajustes de navegaĆ§Ć£o e painelā
Inclui:
- OcultaĆ§Ć£o de elementos do dashboard
- Ajustes de menu lateral
- AlteraĆ§Ć£o de Ćcones
- ReorganizaĆ§Ć£o de links
DependĆŖncia com PHPā
Algumas funcionalidades funcionam em conjunto com snippets:
- BotƵes (ex: WhatsApp)
- Compartilhamento
- OcultaĆ§Ć£o de elementos
- Ajustes de fluxo
CSS sozinho nĆ£o garante o comportamento completo.
ObservaƧƵes Importantesā
- CSS Ć© altamente acoplado ao tema e ao Dokan
- MudanƧas de tema podem quebrar tudo
- AtualizaƧƵes de plugins podem invalidar seletores
- Muitas regras usam
!important
Riscosā
- Alterar CSS pode afetar mĆŗltiplas Ć”reas
- Seletores podem parar de funcionar apĆ³s updates
- Conflito com Elementor ou tema
- Dificuldade de rastrear origem de comportamento
Boas PrĆ”ticasā
-
NĆ£o remover regras sem testar
-
Validar sempre no mobile e desktop
-
Evitar alterar seletores do Dokan sem anƔlise
-
Conferir impacto em:
- PƔgina de produto
- Dashboard
- Minha Conta
DiagnĆ³sticoā
- Verificar se o problema Ć© visual ou funcional
- Inspecionar elemento afetado
- Identificar seletor aplicado
- Validar conflito com PHP
- Testar alteraĆ§Ć£o isolada
Fonte do CSSā
Todo o CSS atual utilizado estĆ” centralizado no painel do WordPress.