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

How to change the 'ALL' text on the product page when 'Sort & Filter' option is on

Question

Hey there!

I'm wondering if anyone knows how to change the text that says 'ALL' in the 'Sort & Filter' option on the products page (shop page).
I'm finding this page very minimal in choices when filtering. 

Website: https://artbuzz-today.squarespace.com/
passcode: today
Page:  shop
Template: Brine

I just need to change 'ALL' to say 'ALL ARTISTS' instead. Is this possible?

Also...is there a way to add the tags as well as the category here?

Thank you!

Carrie

Share this post


Link to post

23 answers to this question

Recommended Posts

  • 0

Hi @carrie1. You currently have this in your Custom CSS:

.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px;
}

Remove the line that you've included to set the color:

   color: #000;

It should be unnecessary and is overriding the active color.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post


Link to post
  • 0

Add to Design > Custom CSS

.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Hi @tuanphan

Thanks so much for that code. It worked!
Would you happen to know if we are able to somehow add a header to this section?
Something like 'Artists'?
I see there's a header in the mobile view and it says 'Category' Would love to change that as well to 'Artists' if possible.

THANK YOU!

Share this post


Link to post
  • 0

add header text to above of right side (images)?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Thanks @tuanphan I think I've sorted something out.

One last question if that's ok! 🙂

With the code you provided to change the 'ALL' to 'ALL ARTISTS', I've lost the active link color unfortunately. So when someone is on that particular page, it isn't showing the red active link color. it's just grey/fade.  Would you know how to add that back? Thanks so much. Carrie

Share this post


Link to post
  • 0

Hey 

How do you do the same thing ( just need to change 'ALL' to say 'ALL ARTISTS' instead. ) for the template ALAMEDA

I tried it like you said up there, but unfortunately it didn`t work.

 

Share this post


Link to post
  • 0
40 minutes ago, carrie1 said:

Thanks @tuanphan I think I've sorted something out.

One last question if that's ok! 🙂

With the code you provided to change the 'ALL' to 'ALL ARTISTS', I've lost the active link color unfortunately. So when someone is on that particular page, it isn't showing the red active link color. it's just grey/fade.  Would you know how to add that back? Thanks so much. Carrie

.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    font-size: 20px;
    color: #bb545e;
}

 

25 minutes ago, inniminni said:

Hey 

How do you do the same thing ( just need to change 'ALL' to say 'ALL ARTISTS' instead. ) for the template ALAMEDA

I tried it like you said up there, but unfortunately it didn`t work.

 

difficult to help without site url


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
43 minutes ago, inniminni said:

hey tuanphan, sorry didn't know that. I am all new to this.

Website: https://pugsandpigs.squarespace.com
passcode: 123456
Page:  shop ceramics
Template: ALAMEDA

Where is "shop ceramics"?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
51 minutes ago, inniminni said:
a.category-filter-link.category-filter-link-all {
    visibility: hidden;
}
a.category-filter-link.category-filter-link-all:before {
    visibility: visible;
    content: "All artists";
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
10 hours ago, tuanphan said:

.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    font-size: 20px;
    color: #bb545e;
}

 

difficult to help without site url

Hi again @tuanphan

Very much appreciate your help.
This indeed makes the text red but I'm looking for it to only go read when the page/link is active...like the rest of the list below. 

Site URL is the same as listing in my original message:

Website: https://artbuzz-today.squarespace.com/
passcode: today
Page:  shop
Template: Brine

 

THANK YOU!

Share this post


Link to post
  • 0
15 hours ago, carrie1 said:

Hi @tuanphan!

Do you know of a way? I'm desperate! 🙂

Saved question, will check in the next 3-4 days


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
On 1/31/2020 at 6:21 AM, carrie1 said:

Hi @tuanphan!

Do you know of a way? I'm desperate! 🙂

Try this CSS

.ProductList-filter-list-item--all a.ProductList-filter-list-item-link:active:before {
    color: #bb545e !important;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@tuanphan do you know how to do a filter for the shop? Not just by categories and tags, but like a proper filter you see on other websites. 

I would like to have one where you can sort by artists and one where you can sort by object.

and if you pick a artist and an object at the same time it will show you all plates from that artist or so

Website: https://pugsandpigs.squarespace.com
passcode: 123456
Page: under neon gallery , ceramics

Template: ALAMEDA 

squarespace 7.1

Share this post


Link to post
  • 0
6 hours ago, inniminni said:

@tuanphan do you know how to do a filter for the shop? Not just by categories and tags, but like a proper filter you see on other websites. 

I would like to have one where you can sort by artists and one where you can sort by object.

and if you pick a artist and an object at the same time it will show you all plates from that artist or so

Website: https://pugsandpigs.squarespace.com
passcode: 123456
Page: under neon gallery , ceramics

Template: ALAMEDA 

squarespace 7.1

Hi @inniminni

I've seen a few plugins out there with this feature. I seem to locate one of them I had found but here's the second one.
Not sure if that helps.

https://www.squarewebsites.org/products/universal-filter

Share this post


Link to post
  • 0
11 hours ago, tuanphan said:

Try this CSS


.ProductList-filter-list-item--all a.ProductList-filter-list-item-link:active:before {
    color: #bb545e !important;
}

 

Hi @tuanphan,

Thanks for taking the time on this. This code makes the link the right color upon clicking on it but it doesn't remain that color while that catagory is active on the page. Thanks for your efforts. Much appreciated.

Share this post


Link to post
  • 0
1 hour ago, paul2009 said:

Hi @carrie1. You currently have this in your Custom CSS:


.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px;
}

Remove the line that you've included to set the color:


   color: #000;

It should be unnecessary and is overriding the active color.

Hi @paul2009

You're right...it worked.

I was starting to pull out my hair trying everything! This quick fix now seems so obvious. 

THANK YOU!

Share this post


Link to post
  • 0

 

On 2/2/2020 at 10:39 AM, paul2009 said:

Hi @carrie1. You currently have this in your Custom CSS:


.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px;
}

Remove the line that you've included to set the color:


   color: #000;

It should be unnecessary and is overriding the active color.

Hey @paul2009!
Curious if you'd know how to change the 'ALL' in the 'Sort & Filter' option on each individual product page?

I currently have code to change the 'ALL' to 'ALL ARTISTS' but now I have 3 individual product pages and one of them I would love to say 'ALL PHOTOGRAPHERS' instead of all artists. 

Website: https://artbuzz-today.squarespace.com/
passcode: today
Page:  shop-art (photography)
Template: Brine

Code I currently have:

.ProductList .ProductList-title {font-size:16px!important;}

.ProductList-outerImageWrapper{filter:drop-shadow(5px 5px 8px #000)}

.ProductList-filter-list-item
a:hover{color: #E1EA99}

.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    font-size: 18px;
  }
 

Thank you for any direction you may be able to provide!

Share this post


Link to post
  • 0

@carrie1 You just need to 'wrap' the existing CSS with something that limits it to a single 'Collection'. A 'Collection' is how Squarespace refer to a 'Page'! 

You can then repeat the CSS for each Collection, changing the content as needed. For example, the code for All Artists would be modified to this:

#collection-5e23480b6570d547549f8f66 {


  .ProductList-filter-list-item--all a {
    visibility: hidden; 
  } 
  .ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px; 
  }


}

I've added spacing to emphasise the new code (top and bottom lines) but the spacing isn't necessary. Repeat this for the photographers page using the collection "#collection-5e72aaacdbc5156b756b1275" and modifying the "content" line. 

Here's a guide that wrote (some time ago!) explaining how to find the Collection IDs and limit your code to affecting a specific page:

https://sf.digital/squarespace/how-to-apply-css-to-specific-pages-in-squarespace

Hopefully that's clear. Let me know if you need me to clarify anything.

Stay safe. Stay healthy. 

-Paul


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post


Link to post
  • 0
On 3/23/2020 at 10:31 AM, paul2009 said:

@carrie1 You just need to 'wrap' the existing CSS with something that limits it to a single 'Collection'. A 'Collection' is how Squarespace refer to a 'Page'! 

You can then repeat the CSS for each Collection, changing the content as needed. For example, the code for All Artists would be modified to this:


#collection-5e23480b6570d547549f8f66 {


  .ProductList-filter-list-item--all a {
    visibility: hidden; 
  } 
  .ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px; 
  }


}

I've added spacing to emphasise the new code (top and bottom lines) but the spacing isn't necessary. Repeat this for the photographers page using the collection "#collection-5e72aaacdbc5156b756b1275" and modifying the "content" line. 

Here's a guide that wrote (some time ago!) explaining how to find the Collection IDs and limit your code to affecting a specific page:

https://sf.digital/squarespace/how-to-apply-css-to-specific-pages-in-squarespace

Hopefully that's clear. Let me know if you need me to clarify anything.

Stay safe. Stay healthy. 

-Paul

This is absolutely perfect.

THANK YOU!

Apologies for the late response as I've been nose deep in other projects and only coming up for air now. 
Thanks so much for your help and well wishes. 

Stay well and healthy yourself my friend. Positive spirit and positive attitude will get us through anything. 🙂

Carrie

Share this post


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...