Display all product alt tags

Hi @sherry22

Is there any reason for wanting to show the product alt tags in the product pages?

Alt tags, also known as “alt descriptions,” are used within an HTML code to describe the appearance and function of an image on a page, so they are hidden by default because they are a part of the website’s backend code, and mainly used for SEO. Showing them on product pages will require adding a custom code to your theme’s file. I recommend hiring a developer to help you with the code.

Please note that we can’t provide support for code customization as per our support policy. Still, if you need customization, we do our best to offer advice and direct you to appropriate resources. Based on the feedback we get from our customers, we highly recommend contacting one of the services on our Customization page.

I hope that helps!

Hello, I want to add category text on the product image (on product page and shop pages). I added custom css but it conflicted with another plugin.

Hi @sherry22

Does it work when the conflicting plugin was deactivated? Can you share with us the CSS code you’ve used?

Hello,

This css is working on the product page – https://mymatchmentor.com/product/becku-lanlonger/

.woocommerce-product-gallery .woocommerce-product-gallery__image {
position: relative;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:after {
content: attr(data-thumb-alt);
position: absolute;
bottom: 2em;
left:0;
padding: 5px 10px;
background-color: #000;
color: #fff;
}

but NOT on the shop page

I was trying to copy the code below but I can’t get the content attribute to show – https://mymatchmentor.com/startups/ (click on Accountants toggle)

.et_shop_image:after {
content: attr(data-thumb-alt);
position: absolute;
bottom: 2em;
left:0;
padding: 5px 10px;
background-color: #000;
color: #fff;
}

• This reply was modified 1 year, 4 months ago by Sherry22.

I figured out a way. You can close my post. Thanks

Hi @sherry22

It’s great to know that it is now working on your end, I will be marking this thread as solved now. We’d also appreciate it if you could share how you solved it, I’m quite curious myself. ?? It will also be a big help to the community.

Cheers!

You can add product image labels through css:

li.product_tag-category-name .et_shop_image:after {
content: ‘category name’;
position: absolute;
bottom: 2em;
left: 0;
padding: 5px 5px;
background-color: #666;
color: #000;}

.product_tag-category-name .woocommerce-product-gallery__image:after {
content: ‘category name’;
position: absolute;
bottom: 2em;
left: 0;
padding: 5px 5px;
background-color: #666;
color: #000;}

• This reply was modified 1 year, 3 months ago by Sherry22.
• This reply was modified 1 year, 3 months ago by Sherry22.