/* Oculta a Tag */ mark { display: none; } /* ESTILOS PARA AS MENSAGENS DE ERRO - COLE ESTE CÓDIGO NO custom.css */ .woocommerce .woocommerce-error, .woocommerce .woocommerce-invalid .required, .woocommerce form .form-row.woocommerce-invalid .required, .woocommerce form .form-row.woocommerce-invalid .woocommerce-input-wrapper .required { background-color: #fffd54 !important; color: #000 !important; font-weight: bold !important; padding: 12px 15px !important; border-radius: 6px !important; border-left: 5px solid #ffd700 !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important; display: inline-block !important; margin-top: 8px !important; text-shadow: none !important; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 253, 84, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 253, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 253, 84, 0); } } .woocommerce .woocommerce-invalid .required:before, .woocommerce form .form-row.woocommerce-invalid .required:before { content: "⚠️ "; margin-right: 5px; } .error-message { background-color: #fffd54; color: #000; font-weight: bold; padding: 12px 15px; border-radius: 6px; border-left: 5px solid #ffd700; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); margin-top: 8px; display: inline-block; animation: pulse 2s infinite; } .instructions { background: #f8f9fa; border-radius: 8px; padding: 20px; margin-top: 20px; border-left: 5px solid #4b3b7e; } .instructions h3 { color: #4b3b7e; margin-bottom: 15px; } .instructions ol { padding-left: 20px; line-height: 1.6; } .instructions li { margin-bottom: 10px; } pre { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; margin-top: 15px; overflow: auto; font-size: 14px; } .file-path { background: #4b3b7e; color: white; padding: 8px 15px; border-radius: 5px; display: inline-block; margin-top: 10px; font-family: monospace; } @media (max-width: 768px) { .content { flex-direction: column; } .demo { border-right: none; border-bottom: 1px solid #f0f0f0; } }

Mensagens de Erro WooCommerce - Tema Filho

Implementação via arquivo custom.css

Demonstração

⚠️ Este campo é obrigatório.
⚠️ Por favor, insira um endereço de e-mail válido.
⚠️ Este campo é obrigatório.

Como Implementar

Passo a passo:

  1. Acesse seu tema filho do WordPress via FTP ou gerenciador de arquivos
  2. Localize ou crie o arquivo custom.css na pasta do tema filho
  3. Adicione o código CSS abaixo ao arquivo
  4. Salve o arquivo e verifique se o estilo foi aplicado
/wp-content/themes/seu-tema-filho/custom.css
/* 
 * Mensagens de erro WooCommerce com destaque amarelo
 * Adicionado em: 01/01/2023
 */

.woocommerce .woocommerce-error, 
.woocommerce .woocommerce-invalid .required,
.woocommerce form .form-row.woocommerce-invalid .required,
.woocommerce form .form-row.woocommerce-invalid .woocommerce-input-wrapper .required {
    background-color: #fffd54 !important;
    color: #000 !important;
    font-weight: bold !important;
    padding: 12px 15px !important;
    border-radius: 6px !important;
    border-left: 5px solid #ffd700 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
    display: inline-block !important;
    margin-top: 8px !important;
    text-shadow: none !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 253, 84, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 253, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 253, 84, 0); }
}

.woocommerce .woocommerce-invalid .required:before,
.woocommerce form .form-row.woocommerce-invalid .required:before {
    content: "⚠️ ";
    margin-right: 5px;
}