WooCommerce Tag…

Hi Alfista,
Of course, you can swap your tag class name with a background image like pictogram and list all tags on one page in the way you need.
For example, on your product page template, you can list all tags attached to the product.
Referring to the codex you can use get_the_term_list function together with an example mentioned here: https://codex.www.ads-software.com/Function_Reference/get_the_term_list
And then you can add a background image to each of listed tags with CSS Customizer available from your panel at Appearance>Customiser>Additional CSS.
e.g., for a list of tags like here:

<ul class="styles">
    <li><a href="person1">Style 1</a>,</li> 
    <li><a href="person2">Style 2</a></li>
</ul>

you can add the following code in CSS customizer:

.styles li a{text-indent: -100000px;} /*it's for hiding the text */
.person1{background-image: url("person1.jpg");}
.person2{background-image: url("person2.jpg");}

etc.

Then you can customize the way these images will look like in the way you want using, e.g., flexbox (https://www.w3schools.com/css/css3_flexbox.asp)

I hope that will help you.

• This reply was modified 7 years, 4 months ago by Mariusz Szatkowski.

Hi,

please can you tell me what I have done wrong, while it will not work.

1. I added to the CSS customizer this code:

.tag_styles li a{
    background-color: cornflowerblue;
    width: 50px;
    height: 50px;
    margin: 5px;
}
.tag1{background-image: url("waterproof.gif");}
.tag2{background-image: url("dust.gif");}
.tag3{background-image: url("shockproof.gif");}
.tag4{background-image: url("temp.gif");}
.tag5{background-image: url("acid.gif");}
.tag6{background-image: url("wheels.gif");}

Then I changed the meta.php from woocommerce to:

<?php echo wc_get_product_tag_list( $product->get_id(), '', '<ul class="tag_styles"><li>', '</li></ul>' ); ?>

And the result on page is:

https://www.grand-tech.eu/2/product/small-case-dc-171305x/

• This reply was modified 7 years, 4 months ago by alfista.
• This reply was modified 7 years, 4 months ago by alfista.

Yes you can paste it to customizer.
PHP code can be included in file whre you want to display those tags of your child theme.

I have put it where needed and changed, but it will not work.
You can see what i have put and where on the message above (I edited it). But it still will not work.

I’m sorry I can’t make it work

Proxy Error

The proxy server received an invalid response from an upstream server.
The proxy server could not handle the request GET /2/product/small-case-dc-171305x/.

Reason: Error reading from remote server

Please try it more times. I have it on my small server where I test all before I release it on the big server.
Try it from this link: https://www.grand-tech.eu/2

I thing all problem is that I make some mistakes in the CSS.

Thanks.

• This reply was modified 7 years, 4 months ago by alfista.

Try <?php echo wc_get_product_tag_list( $product->get_id(), '', '<ul class="tag_styles"><li class="$product">', '</li></ul>' ); ?> or retrive the product id to get a class name inside your code.

Hi,

it doesn’t work.
When I put the CSS part with aground image to the .tag_style then I have the image thereabout it cropped and resized.
When I have the img links as next styles under .tag then it will not work. Isn’t necessary to add something to the .tag_style that it knows that it should use the .tagx styles? And how in the php command is set, that it choose the style .tag_style with the correct .tagx style?

I use now the CSS style:

.tag_styles li a{
	text-indent: -100000px;
    background-color: cornflowerblue;
    width: 50px;
    height: 50px;
    margin: 5px;
background-image: url("https://www.grand-tech.eu/2/wp-content/uploads/2017/07/wheels.gif");
}

and the php code where you have added
<li class="$product">
should nod be also in the class told that it is the .tag style and the $product gives only the number of the correct tag ID?

And it will not remove the tag name text.
I thing there will be needed to use another function, not wc_get_product_tag_list, which will only get the tag ID’s from the system and this ID’s will be added to this class:
<li class="$product">
But I don’t know how to do it, while I’m new in it this part of coding.

Thanks.

I know where is the problem.
There are two problems:

1. the function at self doesn’t return numbers of used tags, but the complete text string with the tags and there for it will not use more than one picture
2. in the code <li class="$product"> will not be the parameter $product substitute with the string stored in it, but it will be used as it is as the text. And there for this class doesn’t use another css style

but i don’t know how to resolve it, that I can show pictures (pictograms) instead of the text, which is shown from default.

Thanks.

• This reply was modified 7 years, 4 months ago by alfista.