Jump to content

Is there a way to add anAudio Player Before Add To Cart Button

Recommended Posts

Please post the URL to the page you show.

You need Javascript to move something out of the additional info area into the product description area.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

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

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.

<style>

  .ProductItem-details .sqs-block-audio {
  
    order: 4;
    width : 61%;
    
    }
    
  </style>

<script>

  $( ( ) => {
  
    /*
    
      move first audo block in product additional info before add to cart button
      
      */
      
    $( '.ProductItem-additional .sqs-block-audio:first' )
    
      .insertBefore ( '.sqs-add-to-cart-button-wrapper' );
      
    } );
    
  </script>

This is for a v7.1 site.

This looks for the first audio block in additional info and moves it before the add to cart button.

You can remove any extra spacer blocks around the audio block in additional info as once the code moves the block they don't really apply anymore.

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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.