CSS product_categories shortcode

Hi @hebhansen,

Does the attribute class=”” work for PC shortcodes? If so can I add more classes by comma seperation?

Yes, you can use the class attribute for product categories shortcodes. However, you cannot add more classes by comma separation. Instead, you should use a space to separate multiple classes.

• First of all get to them. Which div / class will do that?
• round radius the images
• Center align text for some
• Color txt for some
• Place txt absolute/relative over the images and respect the image container
• Hide txt for some
• Display alternative txt on mouse over
• Perhaps alter the font-family. Just defining them as P or H1,2,3 etc might work for this….

• To target the product categories, you can use the .product-category class in your CSS.
• To round the images, you can use the border-radius property.
• To center align text, use text-align: center;.
• To change the text color, use the color property.
• To position text over the images, you might need to use a combination of position: absolute; for the text and position: relative; for the image container.
• To hide text, you can use display: none;.
• To display alternative text on mouse over, you can use the :hover pseudo-class.
• To alter the font-family, use the font-family property. If you want to define them as P, H1, H2, H3, etc., make sure to target these elements specifically in your CSS.

Or is shortcodes dying in favour of the Query loop block, and should I go in that direction instead?

It really depends on your specific needs. Shortcodes are still widely used and supported, but the Query loop block might offer more flexibility and options for customization.

You can even use the Products or Product by Category Block, which offers more styling options. For detailed information on the WooCommerce block, you can check out this guide: https://woo.com/document/woocommerce-blocks/

I hope this helps! Let us know if you have any other questions.

Ok thanks, so more specifically hacking along.

First block (Generic for all) works and text centers. Next two blocks with extra class does not work. One should give me white txt and the last should remove text. So it’s clear my classes are not working:

/*** product_categories - Grid Shortcode center ***/
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
	text-align: center;
}

/*** product_categories - Class "white-text" ***/
.woocommerce ul.products li.product .woocommerce-loop-category__title .white-text,
.woocommerce ul.products li.product .woocommerce-loop-product__title .white-text,
.woocommerce ul.products li.product h3.white-text {
	color: white !important;
}

/*** product_categories - Class "text-gone" ***/
.woocommerce ul.products li.product .woocommerce-loop-category__title .text-gone,
.woocommerce ul.products li.product .woocommerce-loop-product__title .text-gone,
.woocommerce ul.products li.product h3.text-gone {
	display: none;
}

To whom it may concern, this also works:

/*** product_categories - Image Styling ***/
.woocommerce ul.products li.product a img {
	border-radius: 25px;
}

So left challenges are bringing classes to life

Manoeuvre the txt on top of the image in an absolute/relative way…

Also, can I make product_categories not link anywhere, but just be their image?

• This reply was modified 1 year, 2 months ago by hebhansen.

Hi @hebhansen,

It looks like the classes white-text and text-gone are not working as expected. In your CSS, these classes are being applied to the title elements inside the list items. However, if these classes are assigned to the list items themselves, you should move these classes one level up like so:

.woocommerce ul.products li.product.white-text .woocommerce-loop-category__title,
.woocommerce ul.products li.product.white-text .woocommerce-loop-product__title,
.woocommerce ul.products li.product.white-text h3 {
color: white !important;
}

.woocommerce ul.products li.product.text-gone .woocommerce-loop-category__title,
.woocommerce ul.products li.product.text-gone .woocommerce-loop-product__title,
.woocommerce ul.products li.product.text-gone h3 {
display: none;
}

For positioning text over the image, you can use absolute positioning for the text and relative positioning for the parent element.

can I make product_categories not link anywhere, but just be their image?

Unfortunately, it’s not possible without overriding the WooCommerce template files: https://woo.com/document/template-structure/#how-to-edit-files

Could you share some more details about your goal or maybe provide a live link or screenshot? This will help us to understand better and address the issue you’re facing. For screenshots, you may use https://snipboard.io – please follow the instructions on that page, then paste the URL in this thread.

I hope this helps! If you have any other questions, feel free to ask.

Thx Shameem

[product_categories hide_title="0" columns="4"  parent="16" orderby="menu_order" class="white-text"]

Shortcode for white-text.

I have added your css to child, and it does not work. I am on a local install, so I can’t share link. Here are screens

Here i need white txt

Here I go by generic style and it works and I consider if txt should drop on top of the icon or maybe fade on hover. Not sure.

Here icons are selfexplanatory, so I want no txt

Here Icons represent vendors on the site and will display random order on top of a fixed image. I am using random_product_categories shortcode. A snippet someone cool wrote. And that has hide-title as an attribute, so I am good there.

[random_product_categories hide_title="1" number="6" columns="6" parent="581"]

Plan is 6 logos only across. One row. and then logos show random on a fixed background image. That works fine

To bad I can’t cut the link. Maybe I should use another block for these logos then… Not sure which one.

Thx

• This reply was modified 1 year, 2 months ago by hebhansen.

Hi @hebhansen,

Thanks for providing the detailed context!

To turn the category title white, you can add this custom CSS:

.page-id-3081 .woocommerce-loop-category__title {
    color: white !important;
}

Remember to replace the page ID with the correct one.

For the part about the icons and text, you might need to experiment with different CSS hover effects to decide whether the text should drop on top of the icon or fade on hover. There are plenty of tutorials and examples online that can guide you.

For the logos, if the random_product_categories shortcode is working fine and you’re happy with it, there’s no need to change it. If you want to explore other options, you could consider using a custom HTML block or a plugin that specifically handles logo displays.

Please note that writing custom code or providing customization is not within the scope of our support policy. If you are still having problems, we recommend asking development questions on the #developers channel of the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question. You can also seek help from the following:

• A local web developer
• Codeable.io
• WooExperts

I wish I could help more, but hopefully, this gets you going in the right direction to get the job done.

Hey Shameem

Your shortcode turns any and all titles on that page white. I need to add a class to one specific category with fx id 16. How do I add a class to icons on black background only?

As you can see text is black on black. All white, and I loose the txt in other parts of the page. Thx This is not a developer question. It’s a question of How to add the class, and then turn that one only white…

Thx

My solution is as follows and can be seen on link. Text overlay onto image. All titles white with slight transparency. Titles set to size 1.2rem:

/**** Category Image Container in Grid ****/
  ul.awf-product-categories li.product-category,
  ul.awf-product-categories li.product-category.last,
  ul.awf-product-categories.columns-3 li.product-category,
  ul.awf-product-categories.columns-4 li.product-category,
  ul.awf-product-categories.columns-5 li.product-category,
  ul.awf-product-categories.columns-6 li.product-category {
	position: relative !important;
	margin: -3px 1px !important;
	width: 24,5% !important;
}

		
/**** Category Grid Title - Text Overlay ****/
.woocommerce-loop-category__title {
	position: absolute !important;
	bottom: 20px !important;
	left: 10px !important;
	color: rgba(255, 255, 255, 0.8) !important;
	font-size: 1.2rem !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	font-weight: thin !important;
	letter-spacing: 0rem !important;
}

		
/*********** Tablet ***********/
@media (max-width: 768px) {
  ul.awf-product-categories li.product-category,
  ul.awf-product-categories li.product-category.last,
  ul.awf-product-categories.columns-3 li.product-category,
  ul.awf-product-categories.columns-4 li.product-category,
  ul.awf-product-categories.columns-5 li.product-category,
  ul.awf-product-categories.columns-6 li.product-category {
    margin: 0 2% 0 0;
    width: 49%;
  }
  
  ul.awf-product-categories li.product-category:nth-child(even) {
    margin-right: 0;
  }
}

/************ Mobile *********/
 @media (max-width: 400px) {
  ul.awf-product-categories li.product-category,
  ul.awf-product-categories li.product-category.last,
  ul.awf-product-categories.columns-3 li.product-category,
  ul.awf-product-categories.columns-4 li.product-category,
  ul.awf-product-categories.columns-5 li.product-category,
  ul.awf-product-categories.columns-6 li.product-category {
    margin: 0;
    width: 100%;
  }
}

Thx for helping out. It’s a great help. Still don’t understand why class=”” for shortcode product_categories does not work

Btw… is there a way to display category description in the grid? An attribute for the shortcode

Hello @hebhansen,

Unfortunately, the WooCommerce [product_categories] shortcode does not support displaying category descriptions directly. However, you can achieve this by customizing your theme template files or using a plugin that provides this functionality.

I hope this clarifies your concern. If you have any other questions, feel free to ask.

Alright… Thx

Marked as solved