Hi There,
By default, we do have some customization on product category and product tag archives of woocommerce. Extra attribute is not included. You can see the customization on this file:
\wp-content\themes\x\woocommerce\loop\loop-start.php
On the last line on that file:
<ul class="products<?php echo $column_class; ?>">
The $column_class variable controls the number of columns. It is coming from Theme Options settings.
It is not working on those attributes because custom attributes is not included on the template customization. We do have two options here. First one is to create the brand template and then add the column class. Though this part is customization and it would be better to consult a developer if you are not familiar creating custom template. The second option, is we just target it using CSS. We will just copy how the default category works.
See this: https://screencast-o-matic.com/watch/cFV0nwo0e9
The cols-3 class holds the formatting. See how when I just add the class, the formatting change to what you wanted. Now, let’s add those formatting directly on the term classes. Try adding the following:
.woocommerce[class*="tax-"] li.product.first, .woocommerce[class*="term-"] li.product.first {
clear: both;
}
.woocommerce[class*="tax-"] li.product, .woocommerce[class*="term-"] li.product {
width: 30.66667%;
float: left;
overflow: hidden;
position: relative;
margin: 0 4% 4.5% 0;
padding: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}
.woocommerce[class*="tax-"] li.product.last,
.woocommerce[class*="term-"] li.product.last {
margin-right: 0;
}
See this: https://screencast-o-matic.com/watch/cFV0nGo0fP
At the end of the screencast, I have remove the class cols-3 but the formatting stays the same as you wanted because I have copied column style directly on the available classes.
Further customization from here would be getting into custom development. Hope this helps.
