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

Remove "from" in product prices with variants


Go to solution Solved by creedon,

Question

  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

This actually turns out to be harder than one might think. It's not just a matter of throwing some CSS at it. The way the structures are built and SS is manipulating those structures under the hood wh

There might be a way to do this with CSS but I don't know the code off the top of my head. I am wondering though, why would you want to hide the 'from'? Is that not misleading when people then clic

In this case, it's pretty straightforward. One variant is a single bottle of wine, the other is a case of 12 bottles, at a discount. Customers won't be let down, they'll be delighted at the opportunit

Posted Images

11 answers to this question

Recommended Posts

  • 0
Posted (edited)

This actually turns out to be harder than one might think. It's not just a matter of throwing some CSS at it. The way the structures are built and SS is manipulating those structures under the hood when variants are involved and one is changing menu selections makes this tricky. Basically the price text is being rebuilt on the when the user interact with variants.

The OP doesn't need to do this step but if you are follwing along and have not already done so add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

<!--

  begin remove word from, from prices on store pages
  
  Version         : 0.1d2
  
  SS Version      : 7.0, 7.1
  
  v7.0 Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                    Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt,
                    Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor,
                    Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro,
                    Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella, Thorne,
                    Vow, Wav, West )
                    
                    your template is not listed? then it is not currently
                    supported
                    
  Dependancies    : jQuery
  
  Notes           : the code is comprised of a style and script tag both of
                    which must be present for the effect to work
                    
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  do not change anything below, there be the borg here
  
  -->
  
  <style>
  
    .product-price {
    
      visibility : hidden;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      const $productPrices = $( '.product-price' ).each ( function ( ) {
      
        const $this = $( this );
        
        $this [ 0 ].firstChild.data = '';
        
        $this.css ( 'visibility', 'visible' );
        
        } );
        
      if ( ! $( '.ProductItem' ).length ) return; // bail if not product detail
      
      if ( ! 'MutationObserver' in window ) return;
      
      const observer = new MutationObserver ( function ( mutations ) {
      
        $.each ( mutations, function ( ) {
        
          if ( ! this.addedNodes.length ) return;
          
          const n = this.addedNodes [ 0 ];
          
          if ( n.nodeName != '#text' ) return;
          
          if ( ! n.data.includes ( 'from' ) ) return;
          
          n.data = '';
          
          } );
          
        } );
        
      // start listening for changes in product price
      
      observer.observe ( $productPrices.first ( ) [ 0 ], {
      
        childList : true,
        characterData : true 
        
        } );
        
      } );
      
    </script>
    
  <!-- end remove word from, from prices on store pages -->

This is for v7.0 using the Brine template family and v7.1. It may work on other v7.0 templates. I didn't test those. If anyone has an interest let me know.

Let us know how it goes.

Edited by creedon
version 0.1d2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
4 hours ago, XianNewman said:

Maybe @tuanphan or @kerstinmartin know a way to make this happen! 🍷 

There might be a way to do this with CSS but I don't know the code off the top of my head.

I am wondering though, why would you want to hide the 'from'? Is that not misleading when people then click on the dropdown list and see the different prices because you have set the expectation that it's all the same price? Plus, the from indicates that there are more options which can people make curious and entice them to check out the different options. That's just how I would feel as the consumer.

Link to post
  • 0
2 hours ago, kerstinmartin said:

There might be a way to do this with CSS but I don't know the code off the top of my head.

I am wondering though, why would you want to hide the 'from'? Is that not misleading when people then click on the dropdown list and see the different prices because you have set the expectation that it's all the same price? Plus, the from indicates that there are more options which can people make curious and entice them to check out the different options. That's just how I would feel as the consumer.

In this case, it's pretty straightforward. One variant is a single bottle of wine, the other is a case of 12 bottles, at a discount. Customers won't be let down, they'll be delighted at the opportunity to buy more and save.

Rise Digital | Google Cloud Partner (250).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to post
  • 0
35 minutes ago, XianNewman said:

In this case, it's pretty straightforward. One variant is a single bottle of wine, the other is a case of 12 bottles, at a discount. Customers won't be let down, they'll be delighted at the opportunity to buy more and save.

then why not just keep the from?

Link to post
  • 0
6 minutes ago, XianNewman said:

The vast majority will buy individual bottles (and the client asked)

That's fair! I don't know the CSS for this but I'd be surprised if it couldn't be done. @Chris.SE is great with CSS, maybe he has a quick solution! 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...