Translation for filters content (Standard from Tags and Product option - Set Size)

[saewelo]

Alloha,

From several conversations here I’ve understood that the fact that filters content not being translated is “a known limitation that is being worked on”.

So I’m wondering if there was any progress on removing this limitation, since the discussion seem to have started in the beginning of the year and it’s been some time now.

Super looking forward to the positive feedback!

Best regards,

Nika from saewelo

[richbrown_staff]

Hey Nika - thanks for this and the patience. The team responsible for custom filters (different team to Translate & Adapt) have made filter labels translatable (e.g. ‘Season’) but not filter values (e.g. ‘Winter’) - hence no bigger announcement just yet. But I am assured it will be done in July.

[georrrge]

Is there any update on this issue?

[richbrown_staff]

Hey @georrrge , it’ll be available by the end of the month - thanks for patience

[eba-tech]

@richbrown_staff , likewise we need this. Our filters just simply disappear in other languages.

Thanks for getting the ball rolling on this! Do update us all when it’s done, and where to find it.

Thanks,

[richbrown_staff]

Hi all, some good news: as of today both custom filter labels and custom filter values are translatable. Please try, and feed back with any issues.

[eba-tech]

Hi, our product filters are on the product tags. However, I can’t seem to find these, forgive me if I’m just missing it completely! could you point me in the direction?

[richbrown_staff]

Hi @eba-tech - I’m afraid product tags still aren’t translatable (and candidly are unlikely to be soon). Are you able to able add product metafields to do the same job? These will then be translatable.

[Beyond2]

Hi @richbrown_staff any news on the tags?
i havea lot of tags in my products but are only working for the one language.

if not please tell me a solution to this…

[richbrown_staff]

Hi @Beyond2 tags are not translatable and there is not a short term solve in the pipeline for that. Metafields are the recommended workaround

[lesterdefreitas]

Hi @richbrown_staff ,

Can you please show or explain how this is done as we cannot see how filter values (even if based on product metafields) are translated.

Are you referring to translating the metafield values on the products themselves? We can find the option for that, however even when translating them on the products it doesn’t seem to change the filters. Also, translating on the products is a big job as it means translating each value on each product. We are wanting to translate the values as used in the filters.

[lagunasolutions]

@richbrown_staff Can we get an explanation here, I have the same question/issue

Thanks!

[tedisabear]

Is there a way to bind a value to a translation? Now, whenever we are creating a new product, the English value we input will stay as English on other language sites, even when we’ve translated these values for many times.

[kas20]

For what it’s worth, you could try this solution.

1. It uses a tag in the tag: lang=”nl”
2. It uses the url of the filter tag: href=“/en/collections/stoelen/onderstel-materiaal_hout”
3. It hides the original filter text by making the font-size 0px, and then appends a custom text through a before (or after) CSS content element

I’m still working on it but you can see the live result in a few days for EN, NL and DE languages in Kalles theme. For example check: https://kas20.nl/en/collections/binnen-tafels

You could write a JS that maps al of these from a array to CSS or just copy and modify the code below. This won’t effect SEO but your users will see their native language . I’m only going to translate the new languages (EN and DE) and explicitly hiding per tag so the original language will act like a fallback.

This code may need some modifications based on your theme and theme settings.

First check the href’s of your tags

Check if your header has the lang=”en” tag

Add code to a css file

/* Hide all the text facets based on contain text matches */
html[lang="en"] a[href*="materiaal_hout"],
html[lang="en"] a[href*="materiaal_staal"],
html[lang="en"] a[href*="kleur_beige"],
html[lang="en"] a[href*="kleur_bruin"],
html[lang="en"] a[href*="kleur_grijs"],
html[lang="en"] a[href*="kleur_groen"] {
    font-size: 0;
}

/* default make all afters within facet content 14px */
.t4s-facet-content a:after {
    font-size: 14px;
}

/* Add after texts on hidden text facets */
html[lang="en"] a[href*="materiaal_hout"]:after {
    content: "Wood";
}

html[lang="en"] a[href*="materiaal_staal"]:after {
    content: "Steel";
}

html[lang="en"] a[href*="kleur_beige"]:after {
    content: "Beige";
}

html[lang="en"] a[href*="kleur_bruin"]:after {
    content: "Brown";
}

html[lang="en"] a[href*="kleur_grijs"]:after {
    content: "Grey";
}

html[lang="en"] a[href*="kleur_groen"]:after {
    content: "Green";
}

Hope this helps some people.

Good luck!