Jump to content

Change Quick View Button Text/Icon

Recommended Posts

Hi there,

Just had two quick questions about the Quick View feature in the e-shop. I'm using the Brine Template (non-updated version).

1. Is it possible at all to change the text on the "Quick View" button to another text like "Preview" or something? 

2. As another option can the entire button change to my own button icon?

Thanks in advanced!

Link to comment
  • 2 weeks later...
17 hours ago, cherylr said:

I'd like to know this too. Here's a shop page, thanks. 

https://olddognewsaxophones.com/alto

It seems you solved with this CSS

span.sqs-product-quick-view-button:after {
    visibility: visible;
    content: "click for more info";
    background: #fff;
    color: #100f43;
    padding: 10px 20px;
    border-radius: 5px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
1 hour ago, sandracheesman said:

@tuanphan Hi, do you know how I can hide the SS Quick View button so I can use the above css instead?

Thank you!

To hide quick view, add to Home > Design > Custom CSS

.sqs-product-quick-view-button-wrapper {
    display: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button:after {
    visibility: visible;
    content: "click for more info";
    background: #fff;
    color: #100f43;
    padding: 10px 20px;
    border-radius: 5px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
  • 3 months later...
5 hours ago, PastaRodriguez said:

@tuanphan I have the same question as Ejderha about centering the altered 'QUICK VIEW' button in the image.
Site: www.hamsub.club
Temp Password: abc123

Hi. Can you enable quick view?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan Quick View is enable, but I currently have this code altering it:
 

span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button:after {
  visibility: visible;
  content: "QUICK VIEW";
  background: #FFD600;
  font-family: 'Futura';
  font-weight: 800;
  color: #EA0029;
  padding: 10px 20px;
  border-radius: 5px;
}

Just to be clear, I'm referring to the 3 products on the home page. I can remove this code if you need me to. With the above code I'm able to style it how I want, but doing so shifted the button off-center.

Screen Shot 2021-06-12 at 12.26.16 PM.png

Link to comment
  • 3 months later...

I was able to solve the centering on my site. The :after is causing the button to move to the right, "after" where the original button was. @PastaRodriguez in your case it would look like this instead to fix the centering:

.sqs-product-quick-view-button-wrapper .sqs-product-quick-view-button {
  visibility: visible;
  content: "QUICK VIEW";
  background: #FFD600;
  font-family: 'Futura';
  font-weight: 800;
  color: #EA0029;
  padding: 10px 20px;
  border-radius: 5px;
}
Link to comment
  • 7 months later...
On 4/29/2022 at 2:24 PM, IndiahSaunders said:

@tuanphan The CSS you provided is making the Quick View button off centre for me. I tried removing the ':after' but that makes the button disappear all together. Could you please help?

https://heron-helix-4csn.squarespace.com/
Password: 'TEST'

Can you enable quick view? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...

I'm having the same issue  Im trying to change the QUICK VIEW text to MORE INFORMATION on the uttons in the product summary blocks. Can you take a look here > https://everumbaughart.squarespace.com/ethereal-collection

I tried this code fro the above example: but when I change the content id it still reverts to QUICK VIEW. Notice! I removed the :after to center align the button in your code (amended)

span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button {
  visibility: visible;
  content: "MORE INFORMATION";
  background: #FFD600;
  font-family: 'Futura';
  font-weight: 800;
  color: #EA0029;
  padding: 10px 20px;
  border-radius: 5px;
}
Link to comment
On 12/16/2022 at 9:56 PM, musbkc said:

I'm having the same issue  Im trying to change the QUICK VIEW text to MORE INFORMATION on the uttons in the product summary blocks. Can you take a look here > https://everumbaughart.squarespace.com/ethereal-collection

I tried this code fro the above example: but when I change the content id it still reverts to QUICK VIEW. Notice! I removed the :after to center align the button in your code (amended)

span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button {
  visibility: visible;
  content: "MORE INFORMATION";
  background: #FFD600;
  font-family: 'Futura';
  font-weight: 800;
  color: #EA0029;
  padding: 10px 20px;
  border-radius: 5px;
}

What is password?

image.png.a432451e3e6a00a9011008d82e58d224.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

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