HTML output of woocommerce product_categories shortcode is not responsive

[Erik]

Erik

August 15, 2016 at 1:49 pm

Hi!
I noticed that when I use a shortcode on a page, the HTML output is not responsive. I use the shortcode
[product_categories number=”8″ parent=”XX”]

which generates this code (for one product category):

<div class="tcol-md-3 tcol-sm-4 tcol-xs-4 tcol-ss-6 kad_product" style="position: absolute; left: 0px; top: 0px;">
<div class="product-category grid_item product first">
<a href="XXXXX"><img src="XXXXX" width="300" height="150" alt="XXXXX"> <h5>Title of category<mark class="count">(36)</mark> </h5>
</a>
</div>
</div>

On smaller screens (from 600px and lower) this generates 4 images which all stack upon each other.

For instance, the introduction widget on the homepage, has this code, which has perfect responsive behaviour:

<div class="tcol-lg-3 tcol-md-3 tcol-sm-6 tcol-xs-6 tcol-ss-12 home-iconmenu kad-animation homeitemcount2" data-animation="fade-in" data-delay="300" style="opacity: 1; top: 0px;"><a href="XXXXX" target="_blank" title="XXXXX" class="home-icon-item"><img src="XXXXX"> <h4>XXXXX</h4></a></div>

Is there a way to give the product_category shortcode the same bootstrap grid definitions?