peteryang Posted May 26, 2020 Share Posted May 26, 2020 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
tuanphan Posted May 26, 2020 Share Posted May 26, 2020 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
peteryang Posted May 26, 2020 Author Share Posted May 26, 2020 Hi tuanphan, Thanks for your quick reply! Sorry for asking, do you absolutely need to access the shop page? I'd prefer to not show it if I don't need to as I have new product on here. Link to comment
tuanphan Posted May 27, 2020 Share Posted May 27, 2020 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cherylr Posted June 8, 2020 Share Posted June 8, 2020 I'd like to know this too. Here's a shop page, thanks. https://olddognewsaxophones.com/alto Link to comment
tuanphan Posted June 9, 2020 Share Posted June 9, 2020 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
SunPureBotanicals Posted June 11, 2020 Share Posted June 11, 2020 Where was this CSS embedded? Thank you in advanced Link to comment
sandracheesman Posted June 25, 2020 Share Posted June 25, 2020 @tuanphan Hi, do you know how I can hide the SS Quick View button so I can use the above css instead? Thank you! Link to comment
tuanphan Posted June 25, 2020 Share Posted June 25, 2020 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
sandracheesman Posted June 25, 2020 Share Posted June 25, 2020 @tuanphan Thank you but unfortunately that hides the Squarespace quick view button completely including the CSS new button that I am using from above: span.sqs-product-quick-view-button:after { visibility: visible; content: "click for more info"; background: #fff; color: #100f43; padding: 10px 20px; border-radius: 5px; } GemmaErnst 1 Link to comment
tuanphan Posted June 25, 2020 Share Posted June 25, 2020 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; } sandracheesman and Ejderha 1 1 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
Ejderha Posted February 24, 2021 Share Posted February 24, 2021 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 Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
PastaRodriguez Posted June 12, 2021 Share Posted June 12, 2021 @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 Link to comment
tuanphan Posted June 12, 2021 Share Posted June 12, 2021 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
PastaRodriguez Posted June 12, 2021 Share Posted June 12, 2021 @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. Link to comment
christinedevs Posted September 13, 2021 Share Posted September 13, 2021 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; } tuanphan 1 Link to comment
ifd1704 Posted April 29, 2022 Share Posted April 29, 2022 @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' Link to comment
tuanphan Posted May 1, 2022 Share Posted May 1, 2022 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
musbkc Posted December 16, 2022 Share Posted December 16, 2022 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
tuanphan Posted December 21, 2022 Share Posted December 21, 2022 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? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment