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

Change Quick View Button Text/Icon


peteryang

Question

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

16 answers to this question

Recommended Posts

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Yes. You can. Can you share link to shop page?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

If you don't share url, I need to create a demo site, upload a product, and then check it out. It is very time consuming.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 2/24/2021 at 8:15 PM, Ejderha said:

is it possible to centre the button, as in my block over the image click for more in fo is right side of the image

can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@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
  • 0

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

Create an account or sign in to comment

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

×
×
  • Create New...