Markovan Posted December 29, 2020 Share Posted December 29, 2020 Is it possible to swap the original price and sale price around, so it shows the original price (Crossed out) first, then the sales price. I have attached a screenshot. The site is in 7.0 Thanks Mark Beyondspace 1 Link to comment
Beyondspace Posted December 30, 2020 Share Posted December 30, 2020 5 hours ago, Markovan said: Is it possible to swap the original price and sale price around, so it shows the original price (Crossed out) first, then the sales price. I have attached a screenshot. The site is in 7.0 Thanks Mark If would be helpful if you can show your current site url tazmeah 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Markovan Posted January 2, 2021 Author Share Posted January 2, 2021 Sorry, here it is: https://www.fionafinds.co.uk Link to comment
Beyondspace Posted January 2, 2021 Share Posted January 2, 2021 2 minutes ago, Markovan said: Sorry, here it is: https://www.fionafinds.co.uk Which product BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Markovan Posted January 2, 2021 Author Share Posted January 2, 2021 All of the products on this page: https://www.fionafinds.co.uk/sale I will be adding more Link to comment
creedon Posted January 3, 2021 Share Posted January 3, 2021 (edited) Please see Store Page Price and Sale Reverse. Let us know how it goes. Edited October 2 by creedon tuanphan and hae 2 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
Markovan Posted January 13, 2021 Author Share Posted January 13, 2021 @creedon Thanks, is there a way I can increase the gap between the two prices? At the moment they are very close. Link to comment
Markovan Posted January 13, 2021 Author Share Posted January 13, 2021 @creedon Sorry also forgot to ask, they have a product in the Sales section that has 'From' infant of the price, can we make the code ignore this one? Thanks again Link to comment
creedon Posted January 14, 2021 Share Posted January 14, 2021 2 hours ago, Markovan said: is there a way I can increase the gap between the two prices? chage the values for the following. grid-gap: 3em; gap: 3em; Keep the two values the same. You can also change the units used. You could go with pixels for example as in 25px. 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
creedon Posted January 14, 2021 Share Posted January 14, 2021 3 hours ago, Markovan said: they have a product in the Sales section that has 'From' infant of the price, can we make the code ignore this one? I didn't see a way with CSS alone. With a little Javascript it can be done. Add this after the CSS from above. <script> $( ( ) => { // for products with from in price unset flex-direction $( '.product-price' ).each ( function ( ) { let $this = $( this ); if ( ! $this.text ( ).trim ( ).startsWith ( 'from ' ) ) return true; $this.css ( 'flex-direction', 'unset' ); } ); } ); </script> This is for a v7.0 site using the a Brine family template. For others following along Markovan already has jQuery installed. If you don't then add the following to Settings > Advanced > Code Injection > HEADER. 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
Markovan Posted January 14, 2021 Author Share Posted January 14, 2021 @creedon Thanks, that extra script swapped 'From' to the other side but increasing the values didn't seem to change anything. Link to comment
creedon Posted January 15, 2021 Share Posted January 15, 2021 As far as I can tell none of the code I provided is installed. When it is and you change the gap it will work. 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
Markovan Posted January 15, 2021 Author Share Posted January 15, 2021 @creedon It's strange I was making the changes in Safari and it wasn't working so switched to Chrome, resaved and it seems to work. Thanks for your help creedon 1 Link to comment
Kairo Posted May 27, 2022 Share Posted May 27, 2022 I am on 7.1. I was able to swap the sale price with the original price. But it also swapped the "from" and "price". Is there a way to switch it back but keep the sale and price swap? Link to comment
creedon Posted May 27, 2022 Share Posted May 27, 2022 14 minutes ago, Kairo said: Is there a way to switch it back but keep the sale and price swap? Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. 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
Kairo Posted May 27, 2022 Share Posted May 27, 2022 12 hours ago, creedon said: Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. https://www.illights.com/chandeliersandpendants Does this work? Link to comment
creedon Posted May 27, 2022 Share Posted May 27, 2022 16 hours ago, Kairo said: Is there a way to switch it back but keep the sale and price swap? CSS can't get the job done as the from is a text node which can't be targeted. You need JavaScript to alter the structure of the page. Please see Store Product Price Swap Sale Original. 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
ShineOnEditingSOE Posted August 19, 2022 Share Posted August 19, 2022 Is there any way I could get the original price to show before the sales price on the CV and Resume Items in my store? https://www.jessicabuford.com/store Link to comment
creedon Posted August 20, 2022 Share Posted August 20, 2022 (edited) On 8/19/2022 at 12:23 PM, ShineOnEditingSOE said: Is there any way I could get the original price to show before the sales price on the CV and Resume Items in my store? Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <style> /* product price and sale price reverse tagged */ .products.collection-content-wrapper .grid-item.tag-price-sale-reverse .grid-prices .product-price, .ProductItem.tag-price-sale-reverse .ProductItem-details .product-price { display : -webkit-box; display : -ms-flexbox; display : flex; -webkit-box-orient : horizontal; -webkit-box-direction : reverse; -ms-flex-direction : row-reverse; flex-direction : row-reverse; gap : 1em; -webkit-box-pack : left; -ms-flex-pack : left; justify-content : left; } /* product price and sale price color change */ .products.collection-content-wrapper .grid-item.tag-price-sale-reverse .sqs-money-native, .ProductItem.tag-price-sale-reverse .ProductItem-details .product-price .sqs-money-native { color : unset; } .products.collection-content-wrapper .grid-item.on-sale.tag-price-sale-reverse .original-price .sqs-money-native, .products.collection-content-wrapper .tag-price-sale-reverse .original-price { color : #a8a6a1; } </style> This is for v7.1 and specific to the posters need. Then to each product you want to switch price and sale price, add a tag named price sale reverse Let us know how it goes. Edited August 21, 2022 by creedon 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
ShineOnEditingSOE Posted August 21, 2022 Share Posted August 21, 2022 (edited) On 8/19/2022 at 9:47 PM, creedon said: Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <style> /* product price and sale price reverse tagged */ .products.collection-content-wrapper .grid-item.tag-price-sale-reverse .grid-prices .product-price, .ProductItem.tag-price-sale-reverse .ProductItem-details .product-price { display : -webkit-box; display : -ms-flexbox; display : flex; -webkit-box-orient : horizontal; -webkit-box-direction : reverse; -ms-flex-direction : row-reverse; flex-direction : row-reverse; gap : 1em; -webkit-box-pack : left; -ms-flex-pack : left; justify-content : left; } </style> This is for v7.1 and specific to the posters need. Then to each product you want to switch price and sale price, add a tag named price sale reverse Let us know how it goes. -Oh my goodness, this worked PERFECTLY! Thank you so much! Is there a way to make the sale price the one in white, and the original price in grey? If not, no worries! The most important thing was that the sale price was last, so people could really see the deal they're getting. I really appreciate your help! Edited August 21, 2022 by ShineOnEditingSOE forgot something Link to comment
creedon Posted August 21, 2022 Share Posted August 21, 2022 10 hours ago, ShineOnEditingSOE said: Is there a way to make the sale price the one in white, and the original price in grey? I have updated my previous post. If you want to apply this effect to all on sale items you don't have to add a tag to the sale items. SS provides a CSS class for on sale items. <style> /* product price and sale price reverse tagged */ .products.collection-content-wrapper .grid-item.on-sale .grid-prices .product-price, .ProductItem.on-sale .ProductItem-details .product-price { display : -webkit-box; display : -ms-flexbox; display : flex; -webkit-box-orient : horizontal; -webkit-box-direction : reverse; -ms-flex-direction : row-reverse; flex-direction : row-reverse; gap : 1em; -webkit-box-pack : left; -ms-flex-pack : left; justify-content : left; } /* product price and sale price color change */ .products.collection-content-wrapper .grid-item.on-sale .sqs-money-native, .ProductItem.on-sale .ProductItem-details .product-price .sqs-money-native { color : unset; } .products.collection-content-wrapper .grid-item.on-sale .original-price .sqs-money-native, .products.collection-content-wrapper .on-sale .original-price { color : #a8a6a1; } </style> 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment