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

Move additional product info to under product description


raego

Question

Recommended Posts

  • 0
13 hours ago, NKutz said:

Thanks @tuanphan for your help! Attached are screenshots from my header and footer - let me know if you need anything else.

Screen Shot 2021-05-18 at 8.10.12 AM.png

Screen Shot 2021-05-18 at 8.10.22 AM.png

Add to last line in Code Injection Footer

<script>
  $(document).ready(function() { 
		$('.product-description').insertAfter('.product-sharing');
	});
</script>

image.thumb.png.ddce2c8bd98937ebba22fda1c77d708b.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 8/30/2020 at 10:14 PM, Alan-Squareflair said:

Yes, you can do this using jQuery. 

Add this to your PAGE HEADER CODE INJECTION— in the settings on your main product page.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
  $('section.ProductItem-additional').appendTo('.ProductItem-details-share');
});
</script>

 

http://share.sqr.fr/SopdM2x+/Screen+Shot+2020-08-30+at+10.12.16+PM.png 

Notes:
1. this assumes you're not running jQuery on the site; if you are, you can just use the second script.

2. The template I'm using is MOJAVE in the Brine Family (7.0), although this should work for most 7.0 templates. 

3. You have to make sure that SOCIAL SHARING is turned on in the Design Styling area— as that's the container I'm using to hold the additional content. It's a little hacky, but it was the easiest way to make it happen.

http://share.sqr.fr/7CAmcyI+/Screen+Shot+2020-08-31+at+9.55.42+AM.png

 

THIS WORKED FOR ME! Any idea why an "Add to Cart Button" would be hidden when the "Addition Info" is located under the details? It is invisible until a hover over and then it appears per usual.

Please see here https://www.bloomingrocks.com/shop-unique-planters/planters-br2100085

THANKS!

 

 

Link to comment
  • 0
Posted (edited)

Thanks all, this was just what I've been looking for.

The code from @Alan-Squareflair worked perfectly for me. I used it on the main site wide header injection, but it also works great if just used on the individual product header injections

Edited by JonJonJon
Link to comment
  • 0
On 5/27/2021 at 12:21 AM, dcc2021 said:

THIS WORKED FOR ME! Any idea why an "Add to Cart Button" would be hidden when the "Addition Info" is located under the details? It is invisible until a hover over and then it appears per usual.

Please see here https://www.bloomingrocks.com/shop-unique-planters/planters-br2100085

THANKS!

 

 

It looks like you solved?

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hi- Thanks to everyone who has been posting answers here. I am still having trouble getting this to work. I am trying to make a 'pay what you can' ebook by adding a donate button as well as a download button. So far so easy. However, what I want is for the donate button and the download button to both be together. As it stands, on desktop, the download (ie purchase) button is to the right of the image but the donate button stays below it. Because the image is fairly long, this means you can't see it unless you scroll down! Tried the code from @tuanphan above both with and without addition but no luck! Any suggestions?

Link to comment
  • 0

@Intermittentcat

Please post the URL for a product detail page on your site with this 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 is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

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

Link to comment
  • 0
Posted (edited)

@Intermittentcat

Add the following to Settings > Advanced > Code Injection > HEADER. The poster doesn't need to do this step as they have already installed jQuery.

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

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d8/twcsl.js"></script>

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

<!--

  begin move product detail additional info first n blocks to end of product
  details
  
  Version         : 0.2d0
  
  SS Versions     : 7.0, 7.1
  
  v7.0 Templates  : Brine ( Aria, Blend, Burke, 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 )
                    
                    Wexley
                    
                    your template is not listed? then it is not currently
                    supported
  
  Dependancies    : jQuery
                    
                    twcsl
  
  Notes           : the code is comprised of several tags all of which must be
                    present for the effect to work
                    
                    this effect is not active in SS Preview. to test it use
                    private browsing < https://bit.ly/3f6lhq2 >
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <script>
  
    window.twc = {
    
      'af4b3333' : {
      
        numberOfBlocks : 1
        
        }
        
      }
      
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    /* no CSS needed for Wexley */
    
    .ProductItem-details .twc-af4b3333 { /* v7.1 */
    
      order : 999;
      padding-top : 0;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( window.frameElement !== null ) return; // bail if in Preview
      
      if ( ! twcsl.storePage.isDetail ) return; // bail if not detail
      
      const n = twc [ 'af4b3333' ].numberOfBlocks;
      
      let selector = [
      
        'product-description',
        
        'ProductItem-additional',
        
        ];
        
      selector = $.map ( selector, function ( v, i ) {
      
        return '.' + v + ' .sqs-block';
        
        } )
        
        .join ( ', ' );
        
      const $blocks = $( selector )
      
        .slice ( 0, n )
        
        .addClass ( 'twc-af4b3333' )
        
        .removeAttr ( 'id' );
        
      switch ( true ) {
      
        case twcsl.is70 :
        
          selector =
          
            '.ProductItem-details:not( .ProductItem-details--mobile), ' + // Brine
            
            '#productDetails'; // Wexley
            
          break;
          
        case twcsl.is71 :
        
          selector = '.ProductItem-details .ProductItem-details-checkout';
          
          break;
          
        }
        
      $( selector ).append ( $blocks );
      
      } );
      
    </script>
    
  <!-- end move product detail additional info first n blocks to end of product
       details -->

Let us know how it goes.

Edited by creedon
version 0.2d0

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

Link to comment
  • 0

@creedon Sorry to jump in here, I was looking for a solution to a similar problem on my site: https://oleiajewelry.squarespace.com/shop-collection/diamond-eye-necklace 

I'm trying to move the Additional Info block (which is the PayPal messaging) in between the ADD TO BAG button and the social sharing icons. Are you able to help?

This is the current code I am using to move the Additional Info block closer to the button: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
  $('section.ProductItem-additional').appendTo('.ProductItem-details-share');
});
</script>

Appreciate any help!

Link to comment
  • 0

I have updated my June 5th code post. It is more generalized in that it will now move the first n blocks from additional info to the end of product details. It doesn't do any individual positioning of those moved blocks, just plops 'em at the end.

From there custom CSS needs to be created to move the elements around the way you want and style them. Think of this code as a base effect from which you build other effects. Let the Javascript do what CSS can't and let CSS handle the rest! 🙂

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

Link to comment
  • 0
9 hours ago, olenastasula said:

I'm trying to move the Additional Info block (which is the PayPal messaging) in between the ADD TO BAG button and the social sharing icons. Are you able to help?

I suggest removing the code you have, make a copy somewhere. Use the just updated code from my June 5th post.

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

<style>

  /* move paypal message between add to cart button and social icons */
  
  .ProductItem-details .twc-af4b3333 {
  
    order : 7;
    
    }
    
  </style>

Let us know how it goes.

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

Link to comment
  • 0

Thank you so much @creedon!! It works! 

However, one weird thing - I have to refresh my page 2x for that Paypal messaging to show up (similar thing happened to me when I was trying to integrate the Shopify Buy Button, it wouldn't load unless I refresh the page). 

Is there anything that can be done to fix this??

Link to comment
  • 0
4 hours ago, alexistaylor said:

I'm looking to move the "Instructions" and "Ingredients" up so that there isn't an awkward space in between Ingredients and Add to Cart.

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

<style>

  .ProductItem-details .sqs-add-to-cart-button-wrapper {
  
    margin-bottom : 0;
    
    }
    
  </style>

Let us know how it goes.

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

Link to comment
  • 0
On 5/12/2021 at 6:43 PM, tuanphan said:

Hi. Try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> jQuery(document).ready(function($) { $('section.ProductItem-additional .button-block').insertAfter(".ProductItem-details-excerpt"); }); </script> <style> .ProductItem-details-excerpt + .button-block>div>div { text-align: left; } </style>

 

Hi @tuanphan I tried this code and it worked, except the additional info sits above the product name and description. I'm using Brine on 7.1... any suggestions? Thanks

www.annasassi.com

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...