[Resolved] Display Product Taxanomy with style(Design)

[Author]

Posts

[wilfredC]

Normally when using toolset view to display the product taxonomy it will show the term name with "," seperate, like c1.jpg, but how can I design something like this (c2.jpg)?

[Nigel]

The separator can be markup, it doesn't have to be just a comma.

So you can include span tags with classes that you use to style the term names how you wish.

So if you were using the wpv-post-taxonomy shortcode to output the terms, for example, you would do something like...

<span class="round-label">[wpv-post-taxonomy type="colour" format="name" separator="</span><span class='round-label'>"]</span>

You would have to provide the opening and closing span tags directly, the "inner" tags are provided via the separator attribute.

The limitation with this is that all terms are output via the shortcode, and it doesn't provide a way to add different classes for different terms (to get different colour labels, for example).

For that you would have to create a taxonomy View to output the terms, where the Loop Output will iterate over the terms and which makes it easy to define the markup for each term and including "dynamic classes" by appending the taxonomy slug, for example, to generate classes such as round-label--red, for example.

[wilfredC]

Hi,

I try create a taxonomy view to output the terms, but how do I filter the taxonomy? As you can see the screenshot(hn.jpg) the single product display all the terms, in fact the particular only checked 2 colour(Green and red).

[Nigel]

You should add a Query Filter to specify the terms the View should display.

Depending on where you are inserting this View (in a template, or as part of the output of a posts View) you would want to choose "Set by the page where this View is inserted" or "Set by the current post".

See screenshot.