Sale Price Position

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

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

Sorry, here it is:

https://www.fionafinds.co.uk

2 minutes ago, Markovan said:

Sorry, here it is:

https://www.fionafinds.co.uk

 

Which product

All of the products on this page:

https://www.fionafinds.co.uk/sale

I will be adding more

Add the following to Store Settings > Advanced > Page Header Code Injection for the Store page.

<style>

  /* reverse price and sale price */
  
  .product-price {
  
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    
    grid-gap: 1em;
    gap: 1em;
    
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    
    }
    
  .ProductList-meta .product-price {
  
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    }
    
  .ProductItem-details .product-price {
  
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    
    }
    
  </style>

Let us know how it goes.

@creedon Thanks, is there a way I can increase the gap between the two prices? At the moment they are very close.

@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 

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.

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.

@creedon Thanks, that extra script swapped 'From' to the other side but increasing the values didn't seem to change anything.

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.

@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

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? 

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.

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? 

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.

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

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.

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!

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>