Add product name to category picture

Hi Support Team,

How can I add the product name to the category thumbnails. Now I only see picture and price.

See the site on: www.zaaldesign.nl/kf

Hope you can help me.

Thanks in advance.
Jan

Hello Jan,

It should appear by default. However the below extra CSS code hides it.

    .type-product h2 {
        display: none;
    } 

To display the title on products archive page without removing that code, add the below CSS code:

    .archive.woocommerce .type-product h2 {
        display: block;
    } 

Regards,
Kharis

HI Kharis,

Thanks for your quick response. I was my mistake. I had set the display on “none” by mistake.

Regards,
Jan

You’re welcome Jan!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,

Just noticed that if the product name in the category thumbnails is set to “block”, text mentioning “related products” shows behind the picture. See: http://www.zaaldesign.nl/kf/product/koga-myata-28-2/. How can I hide these text and still keep the product name in the category thumbnails?

Thanks in advance for your support.

Regards,
Jan

Hello Jan,

Please add the below extra CSS code:

    .related.products:before {
      content: '';
      display: block;
      clear: both;
    } 

Regards,
Kharis

Thanks Kharis,

Works fine.

I still have some questions:
Where can I change the text and move the text some px to the right.

Thanks again for your support.

Regards,
Jan

Hello Jan,

You can use this CSS code:

    .related.products > h2 {
      margin-left: 20px;
    }

To change the text, try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){
      
      $('.related.products > h2').text('My custom text');

    })(jQuery);
  1. Update

Regards,
Kharis

Hi Kharis,

Thanks works perfect as usual.

Regards,
Jan

You’re welcome Jan!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis