Jump to content

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 🙂

Link to comment
  • Replies 4
  • Views 429
  • Created
  • Last Reply

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.