Os itens vendidos no e-commerce podem ser compostos por outros itens, alterando seu preço e configuração a partir do seu cadastro na plataforma ERP. Por padrão, os componentes adicionados junto ao item no carrinho estarão ocultos para o usuário nas etapas de carrinho e pagamento, mas isso pode ser facilmente customizado via CSS no seu arquivo de estilos do checkout na plataforma.

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:

.cart-row .append.components { 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 (com isso todos os campos serão exibidos).

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 a seção de components usando a ferramenta de desenvolvedor do seu navegador preferido (como o Google Developer Console). Você poderá verificar que cada grupo de componentização (cujo pai é uma tag <ul>) tem uma classe CSS específica, nomeada conforme a descrição do mesmo do campo. Exemplo: Para o grupo de componentização "Meu grupo de componentização" o slug deverá ser algo como "meu_grupo_de_componentizacao".

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

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

.cart-row .append.components .meu_grupo_de_componentizacao { 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.