URGENT – Custom CSS for subcategories is not working
- This topic has 9 replies, 2 voices, and was last updated 4 days, 18 hours ago by
.
-
Posts
-
Hello WoodMart Support Team,
I need your help with a CSS issue on my category pages. I want to style the subcategories to appear as simple, imageless buttons.
The settings in Customize > WooCommerce > Product Catalog are correctly set to “Show subcategories & products”, and my shop layout is “Full Width”.
The subcategories appear, but I cannot style them correctly with custom CSS. My goal is to hide the image and style the text container as a button.
This is the HTML structure of a single subcategory on my page:
HTML
<div class=”wd-col wd-cat cat-design-zoom-out without-product-count wd-with-subcat product-category product first” data-loop=”1″>
<div class=”wd-cat-wrap”>
<div class=”wd-cat-inner”>
<div class=”wd-cat-thumb”>
<div class=”wd-cat-image”>
</div>
</div>
<div class=”wd-cat-content wd-fill”>
<div class=”wd-cat-header”>
<h3 class=”wd-entities-title”>
Category Name
</h3>
</div>
</div>
</div>
</div>
</div>
I have tried adding the following CSS to “Additional CSS”, but it results in a very bad layout, the text disappears, and the shape is wrong. It seems your theme’s JavaScript or an internal stylesheet is overriding it.CSS
/* This is the code I tried */
.product-category.wd-cat .wd-cat-thumb,
.product-category.wd-cat .wd-cat-content > a.wd-fill {
display: none !important;
}
.product-category.wd-cat {
border: 1px solid #e0e0e0;
border-radius: 5px;
}
.product-category.wd-cat .wd-entities-title a {
display: block;
padding: 15px 20px;
color: #333333 !important;
}
Could you please provide me with the correct CSS code to achieve a simple, imageless button style for the subcategories that works with your theme’s structure?The temporary admin access I provided before is still active. Thank you.
