Cetegory boxes

Hello,
please check my link:
http://prisma5.jtwebs.eu/obchod/

On the TOP i have categories. Can you tell me please how to edit this? It is very difficult to edit via custom css. I need to have classic font style (regular as is category named), 18px in size and margin top 15px… I have just found that in typography Entities names font can change it, but it will also change top main menu and other stuff.

Please how to just design TOP categories like this? In your theme it is names “Category styles”. How to design it more clearly? Thank you

Hello,

Please check these two manuals to find the detailed instruction on how to configure the categories: https://xtemos.com/docs/woodmart/product-category-menu/ and https://xtemos.com/docs/woodmart/adding-menu-site/

If you have any questions please feel free to contact us.

Best Regards

Hello, thank you for your answers.
In the line I gave you, however, there was no top menu but no order of categories.
Please advise where I can edit styles for categories.
Thank you

Attachments:

You must be logged in to view attached files.

I would like to edit categories in the archive page where I added your category style function. However your defined style are not usable for most of your customers. I need to style small boxes with just image and category name. As is showed on the image above

Hello,

These categories: https://gyazo.com/71e338b05fcc0632aba37277c45da1cc are displayed by Product Category widget in appearance > widget. This is the Woocommerce functionality and WoodMart doe not have any options to customize.

These categories: https://gyazo.com/f6baef222b1c292531a55e7d3d1924a7 are disabled by means of the WoodMart Product Categories widget, please enter the widget and remove image size inside so that image got full width in this case the design was chosen here CATEGORIES-STYLES.png would be applied.

Best Regards

We would like to design Products Categories from your widget as is showed in this image.

I have created a Custom HTML Block with a custom DIV code. It looks good but I have to create the same box for each product category and if I remove / add category, I have to edit all blocks where to apply these changes. Your Category widget is good in this that it’s generate categories automatically. Or it is possible to do it in your customization service? Thank you for any help…

https://prnt.sc/26qqmoy

Hello,

WoodMart Product category widget shows the product categories automatically, you have the option to hide empty or exclude any by ID. We would recommend using this widget it would make the work easier.

Best Regards

We don’t understand each other at all. I know how your widget works. But it’s terribly ugly and impractical! I need to change its design according to myself, according to the attached image. Only 4 display options can be selected in the settings, but there is no option to make your own. I’ve made a few changes via Custom CSS, but these styles apply to all elements and it is wrong again.

In short, I need to make your product category widget as it is in the attached picture. How do I do that?

This is my code in HTML block

<div class="listing-subcategories_title">

<a href="/led-pasy/napatie-12v/" title="Napätie 12V" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Napätie 12V" src="//images-madalbal-cdn.rshop.sk/xs/categories/12564404110beea7083967ff05b423db.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Napätie 12V <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/napatie-24v/" title="Napätie 24V" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Napätie 24V" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Napätie 24V <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/ovladanie-k-led/" title="Ovládanie k led" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Ovládanie k led" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Ovládanie k led <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/prislusenstvo-k-led/" title="Príslušenstvo k led" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Príslušenstvo k led" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Príslušenstvo k led <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/profily/" title="Profily" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Profily" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Profily <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/profily-chladenie/" title="Profily (chladenie)" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Profily (chladenie)" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Profily (chladenie) <i class="ico icon-arrow-next"></i></div></a>

<a href="/led-pasy/specialne-led-pasy/" title="Špeciálne led pásy" class="listing-subcategories_element tree-categories">
<div class="listing-subcategories_img"><img alt="Špeciálne led pásy" src="//images-madalbal-cdn.rshop.sk/xs/categories/0e5f1744e70f81386660f5621749e748.jpg" class=" image"></div>
<div class="listing-subcategories_name"> Špeciálne led pásy <i class="ico icon-arrow-next"></i></div></a>

</div>

And this is css for it

/***************************/
/* BOXY Kategorii */
.listing-subcategories_title {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: auto;
    grid-gap: 5px;
    margin-bottom: 0;
    position: relative;
}
@media (max-width:1199px) {
    .listing-subcategories_title {
    grid-template-columns:repeat(4,1fr)
}
}
@media (max-width:1023px) {
    .listing-subcategories_title {
    grid-template-columns:repeat(3,1fr);
}
}
@media (max-width:599px) {
    .listing-subcategories_title {
    grid-template-columns:repeat(2,1fr);
/*display:flex;*/
  /*flex-direction:column*/
}
}

.listing-subcategories_element {
    display: flex;
    align-items: center;
    border: 1px solid #e4e6eb;
    color: #111;
    cursor: pointer;
    background: #fff;
    transition: all .2s ease;
    margin: 0;
    padding: 8px;
    min-height: 56px;
}

.listing-subcategories_img {
    position: relative;
    width: 48px;
    min-width: 48px;
    flex: 0 0 48px;
    margin-right: 12px;
    align-self: stretch;
    mix-blend-mode: darken;
}

.listing-subcategories_name {
    font-size: 13px;
    line-height: 19px;
    color: inherit;
    word-break: break-word;
    flex: 1 1 auto;
}
/***************************/

HOW TO APPLY MY CODE TO YOUR CATEGORY WIDGET

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

You need to assign the unique class to every div and assign styles to this class in this case the styles would be applied to this grid only. You need to add the styles to the Theme Setting > Custom CSS > General.

In order to apply the styles you show, you need to replace the selector: https://gyazo.com/5a5fd8ba2b35bc700e1dca572e122e00

If you want to have an image on the left and the category title on the right, you need to set “inline-block” for both and specify the width: https://gyazo.com/4cab23dc611c810da8008eeaf46cac09

Best Regards

I know that it has to be replaced but how?

When I style ” col-lg-20_0 col-md-3 col-sm-4 col-6 category-grid-item cat-design-center without-product-count product-category product” or “.products-bordered-grid.elements-grid:not(.elements-list) [class*=”-grid-item”]” products boxes are also changed.

Can you do it for me please?

Hello,

Please enable showing the categories in the Appearance > Customize > Woocommerce > Product catalog > shop view. Then chose the categories style in the Theme Settings > Product Archives > Category styles.

If you have any questions please feel free to contact us.

Best Regards

Your answer is ridiculous. Why can’t you do what I asked you to do ???
I’ve already ordered someone else to do it… it is done in 10 minutes.

Hello,

I was a bit confused with what you want to change and where.

We are glad you have solved the issue.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts