Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Center "ALL" category


Recommended Posts

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:


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

    visibility: hidden;


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

    visibility: visible;

    content: “Tous nos produits”;



Can anyone help me find a custom CSS?

Thank you 🙂

Edited by codefordummies
Link to post
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Posts

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

It worked perfectly! Thank you @creedon

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.


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

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.

Edited by creedon
version 2

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
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?



Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...