Woocommerce adds a symbol where there should be a space

%20 is a URL encoded space. So somewhere along the line, these attribute terms had the names encoded.

If you go edit the term in WooCommerce, do you see the %20? If so, have you done any importing or such perhaps?

If it does not show up when editing the attribute / term, but it does on the frontend, then there is a problem with how it is being output. Your theme or another plugin might be doing something incorrectly. To test, you can follow this guide to rule out possible conflicts: https://docs.woocommerce.com/document/woocommerce-self-service-guide/#section-4

I checked in the attributes of woocommerce and in the product page itself:

View post on imgur.com

It looks normal there for the products that have the %20 on the product page itself.

I will look into the guide rule you provided though. However we do import all the products from our POS system (Vend). Still, it is a bit weird that some products come out normal and other do get weird.

Think I might have narrowed it down to the theme we use. Switched to the “Twenty Seventeen” theme and then there is no issue. We use the “Porto” theme.

If you know a solution to this would be appreciated but I will also contact the people from there.

Right, that’s what I was leaning towards being the problem. The theme is encoding/escaping the output incorrectly. This is something the theme authors will need to address.

Yeah that′s true, already contacted them and they were aware of the problem.

This blows though because the website is ready to go live and of course now we have to wait until they release an update.

I found an article of someone saying that %20 is injected in woocommerce download urls.
and can be fixed by adding "\n" but I am not sure I can use that as you mentioned the theme is encoding the output incorrectly.

Thanks for your help though.

Yea, that won’t be the same process for fixing this.

You could try temporarily removing template overrides from the theme until you find the template override causing this problem (assuming it is coming from a template override).

Yeah I found the template override and it is this part doing it:

$html .= '<li>';
                        $html .= '<a href="#" class="'. $a_class .'" data-value="' . esc_attr( $term->slug ) . '" '. ( sanitize_title( $args['selected'] ) ==  $term->slug ? ' class="active"' : '' ) . $a_attrs . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $term->name ) ) . '</a>';
                    $html .= '</li>';

Although I cannot seem to find out what to do next, maybe just comment out that section in the override template file.

Which template file is this in? Can look at what WooCommerce core does in the default template file and copy that: https://github.com/woocommerce/woocommerce/tree/master/templates

In the theme folders it sits like this: theme/inc/functions/woocommerce.php

So I am not sure yet what it is overriding at the moment.