Os itens e planos vendidos no e-commerce podem ter campos extras, configurados na plataforma ERP. Por padrão, esses campos não são exibidos para o usuário mesmo após terem sido adicionados ao carrinho e/ou ao item do carrinho via API, mas isso pode ser customizado via CSS a partir dos códigos-fonte da loja.

Opções de configuração

Opção 1: exibir todos os dados

A configuração mais simples é exibir todos os campos extras nas páginas de Carrinho e Pagamento.

Basta adicionar a seguinte regra CSS ao arquivo de estilos do seu checkout para exibir os campos extras relacionados ao produto adicionado:

.cart-row .append.extra-fields { display: block !important; }

De forma semelhante, também é possível exibir os campos extras adicionados juntos ao item do carrinho:

.cart-row .append.attributes-extra-fields { display: block !important; }

E também às propriedades do carrinho:

.append.cart-extra-fields { display: block !important; }

Opção 2: exibir dados específicos

Também é possível exibir apenas certos campos e ocultar outros.

Primeiro, realize as configurações da Opção 1. Isso fará todos os campos aparecerem.

Em seguida, descubra qual é a classe específica dos campo extra que quer ocultar. Para isso, acesse a plataforma e-commerce e simule uma compra até chegar na tela de Carrinho ou de Pagamento. Inspecione os campos extras usando a ferramenta de desenvolvedor do seu navegador preferido (como o Google Developer Console). Você poderá verificar que cada campo extra (cujo pai é uma tag <ul>) tem uma classe CSS específica, nomeada conforme o slug do campo. Exemplo: "modelo_do_aparelho", "descricao" etc.

Para ocultar esse campo extra especificamente, adicione uma regra CSS para sua classe no arquivo de estilos do seu checkout.

Por exemplo: para ocultar o campo extra com classe "my_custom_extra_field", adicione esta regra:

.cart-row .append.extra-fields .my_custom_extra_field { display: none !important; }

Inclusive, você pode usar essa classe para fazer outras customizações, como mudar a cor, remover a borda, criar uma animação no mouse over, aumentar a fonte etc.

O mesmo vale para as demais possibilidades de campos extras no checkout conforme mostrado acima, alterando-se somente as classes iniciais conforme os exemplos.