How to attach icons to a widget

Hi @intman1958

How to display categories in the widget similar to the one on this page?

You can display categories like that using the Product Categories List block. On the block settings, you must enable “Show category images”:

To add an image to a category, just go to:

• Products ? Categories ? Select Category ? Thumbnail

How to add folder icons?

You can add folder icons next to categories names on a categories list by going to Appearance ? Customize ? Additional CSS and adding the following code:

/* Add folder icon to category names on category list
https://www.ads-software.com/support/?p=15847626 */
.wc-block-product-categories-list-item a:before {content:"??"}

And for continued support with customizations, I recommend hiring a developer or one of the customization experts listed here:

https://woocommerce.com/customizations/

Best

Thank you. The CSS code you provided basically works. But I need to make an exact copy of the site. And there are other icons. And two more questions. 1. How to change the image of the icon. 2. What should be the CSS code for subcategories – they need a different icon.

• This reply was modified 2 years, 4 months ago by intman1958.
• This reply was modified 2 years, 4 months ago by Jan Dembowski. Reason: Redundant link deleted

Hi @intman1958,

The CSS code you provided basically works. But I need to make an exact copy of the site. And there are other icons.

Glad to hear the CSS worked for you. In order to add other icons, you’d need to target the correct selector and use the appropriate CSS declaration. If you want to know more about CSS we recommend the tutorials at W3Schools – https://www.w3schools.com/css/default.asp.

How to change the image of the icon

You can replace the content with the corresponding Unicode value. Here’s a list of the icons with the Unicode next to them: https://astronautweb.co/snippet/font-awesome/.

So it would be something like this:

.wc-block-product-categories-list-item a:before {
  content:"\f054";
  Font-family: "Font Awesome 5 Free";
}

—

What should be the CSS code for subcategories – they need a different icon

Try with this CSS:

.wc-block-product-categories-list-item a:before {
  content:"\f07b";
  Font-family: "Font Awesome 5 Free";
}
.wc-block-product-categories-list.wc-block-product-categories-list--depth-1 a:before {
  content:"\f07c";
  Font-family: "Font Awesome 5 Free";
}

—

Hope this helps!

Hi there @intman1958,

Hope Mirko’s code did the trick! We haven’t heard back from you for a while, so I’m going to mark this post as resolved now. If you need any further help here, please let us know. Or, if you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

Thank you!