Center "ALL" category

Site URL: https://www.terroir-imports.com/produits

Hi guys, 

I am looking for some help. I added a custom code to change the "ALL" category to "Tous nos vins" for my french version of my site. However, this new text does not center like all of the other categories.

Here is the code I used:

<style>

.ProductList-filter-list-item--all a {

    visibility: hidden;

}

.ProductList-filter-list-item--all a:before {

    visibility: visible;

    content: “Tous nos produits”;

}

</style>

Can anyone help me find a custom CSS?

Thank you 🙂

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Remove or comment out your previous CSS code and add the following to Store Settings > Advanced > Page Header Code Injection.

<script>

  $( ( ) => {
  
    $ ( '.ProductList-filter-list-item--all a' )
    
      .html ( 'Tous nos produits' );
      
    } );
    
  </script>

The issue with the CSS is that making the visibility of the anchor tag hidden doesn't take the space it consumed out of flow. This causes the content text to be off center. We can't use display none on the anchor as that would remove the link.

So we need to use a little Javascript to change the anchor tag text.

Let us know how it goes.

8 hours ago, creedon said:

<script>   document        .querySelector ( '.ProductList-filter-list-item--all a' )          .innerHTML = 'Tous nos produits';        </script>

Hey @creedon, when I switch out the code to add the Javascript it reverts back to the original "ALL" and does not change it to the French version "Tous nos produits". Any ideas what could be causing this?

Thanks!

Let's give this another go. I updated my previous post with new info.

1 hour ago, creedon said:

Let's give this another go. I updated my previous post with new info.

It worked perfectly! Thank you @creedon