Várias pessoas perguntaram sobre como exibir as subcategorias na página Categorias. Isso se refere ao componente Modern Category + Group Boxes, mas como ele não tem um tópico próprio (certo?), compartilharei minhas descobertas aqui:
Isso funciona:
/* Exibe subcategorias */
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategories {
display: inline-flex;
flex-flow: wrap;
}
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategory {
display: inline-flex;
align-items: baseline;
margin-right: .3em;
}
/* Remove as imagens de categoria da lista */
.custom-category-boxes:not(.above-discovery-categories-outlet) .subcategories .subcategory .subcategory-image-placeholder {
display: none;
}
Além disso, se você tiver muitas subcategorias, talvez queira exibir uma categoria por linha.
/* Uma categoria por linha */
.custom-category-boxes:not(.above-discovery-categories-outlet) {
grid-template-columns: 1fr;
}
O resultado se parece com isto:
Acho que as caixas têm um limite de altura, mas ainda não encontrei uma maneira de removê-lo. Ainda não temos subcategorias suficientes para ver o problema no desktop, mas estamos atingindo o limite no celular:
Alguma ideia para resolver este problema?