Woocommerce Product Category Widget - Ken Theme


Hi Everyone,

I’ve got two questions that I can’t seem to figure out.

  1. Is there a way to change the menu navigation on the WooCommerce Product Category Widget for The Ken theme to dropdown on click rather than hover? I have a page that has a large number of subcategories and customers are having trouble navigating due to the speed with which the subcategories expand/collapse.

  2. Is there a way to change the appearance of the images in the Product Category Loop? Ie; Move the category title from the middle of the product category image to the bottom? And remove the product count?

The changes in question apply to the following page; http://www.davenportmotorsports.com/horsepower-packages/

Thank you!




With respect to your first question, there are a number of methods to achieve what you want:

  • introduce a delay somewhere in a (custom) css file :

.product-category h4 {
transition-delay: 1s !important;

and note that this will make the page more easy for the eye, but will not remove the transition function

  • remove the transition function(s) completely from css that applies to .product-category h4
  • add custom css to allow for transition function(s) on click only

and I would strongly recommend to introduce the transition-delay mentioned above.

Note that it can be the case that a custom css file will not yield the desired effect without the !important part.

With respect to your second question, there actually two (sub-)questions, being

a) [quote=“Rafael_Lopez1, post:1, topic:8508”]
Move the category title from the middle of the product category image to the bottom?

and I would say “yes”, but this is rather a hassle in your current setup.

I would simply recommend to enlarge the product items and images, so the issue of “product categories” would be less relevant AND the whole overview of the product range would be more clear for your customers.

b) [quote=“Rafael_Lopez1, post:1, topic:8508”]
And remove the product count?

Did you try the following snippet?

add_filter( ‘woocommerce_subcategory_count_html’, ‘hide_category_count’ );
function hide_category_count() {
// No count

I hope that you can solve your issues a bit and, if not, just send me a private message.



Thank you so much Trialotto! Working on it right now with those changes!



No problem, if I can be of any further assistance, just send me a private message.




Hi Trialotto,

I introduced the transition delay into the custom.css file and it didn’t make any changes. So I went into the mk-woocommerce.css to make the change right in the file to see what would happen, and placing the transition delay under .product-categories and .product-category h4 didn’t do anything.