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

Product page- change code block position


kevin310

Question

Site URL: https://www.blankforces.com/allproducts/v2-titanium-edc-ink-pens-clip

Hi Squarespace gurus!

On my  "product page" I have a "code block" that I've placed in the "additional info" section.

The code in the code block is working but it is below all of the product info.... but I'd love to move it so that it is positioned right below the "product price" as indicated in the image below. Below is the code that I was trying to use.

Thanks for any help!

-Kevin 

376111841_designpage.jpg.2845f365c944eade1d1120f76e345bef.jpg

---------------

This code is from Code Injection >Footer:

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

This code is from my custom CSS:

.ProductItem-description .code-block {
    order: 4;
}

 

Link to post
  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Bingo! Thanks again rwp!!

Try this. Design -> CSS .ProductItem-details .sqs-block.code-block.sqs-block-code { order: 4; }  

Posted Images

16 answers to this question

Recommended Posts

  • 0

The code you used to move the code block only moves what is inside the code block, so the CSS is not being applied to it, because it is no longer in that div.

Try this:

$(document).ready(function() { 
        $('.product-description .code-block').insertAfter('.product-price');
    });

 

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
5 hours ago, rwp said:

The code you used to move the code block only moves what is inside the code block, so the CSS is not being applied to it, because it is no longer in that div.

Try this:


$(document).ready(function() { 
        $('.product-description .code-block').insertAfter('.product-price');
    });

 

Hi rwp... thanks so much for getting back to me so quickly! I really appreciate it!

Just so I understand. You just removed the <script> and <script/> from the code? and I should use it that way?

I made that change and don't see any change. the code block is still working at the bottom of the page. I am guessing that the actual names... like "product-description" and "product-price". I found those one this forum, but i'm not sure they are correct for my site.

Thanks again for your help!

Kevin

Link to post
  • 0

You will need to keep the script tags.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

Understood. So the code you posted is the exact same as what I posted then? I see no difference, and it is still not doing anything to move the code block.
Thanks for taking the time to respond!

Kevin

Link to post
  • 0

Yours is insert after product title mine is after product price.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

Sorry about that... yes I see. I am using your code in the Code Injection FOOTER and the Custom CSS show below. It is still not doing anything.

I'm not sure if i have the correct names that are highlighted in yellow below. I have tried to make these the same as well but I don't see an change in the code block's position. 

Also, for the CSS... I don't know what the "order number" actually does. Should it be 3? I also tried other numbers but don't see any change. 

 code.jpg.3a8acac260ab7b893140ebb0d704bf5d.jpg

Link to post
  • 0

You don't need any CSS, and it won't work anyway.

The code you are using moves the content of .ProductItem-description, not the entire div, so after you move it, it is no longer part of that class.

You need to put the jquery script in the header injection.  There are directions on how to do that in my signature.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

Fantastic!! It's working...Thanks so much rwp!!! You are awesome. 
One last question if you don't mind.

If I want to move the code block to this location... what would I change "product-price" to?

 

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

c2.jpg.c0eec6a5f46d29fe890b28237351d90c.jpg

Link to post
  • 0

Try .product-excerpt

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
On 7/14/2020 at 7:16 AM, rwp said:

Try .product-excerpt

Hi rwp,

Just reviving this thread - I've tried the code you provided, with some variations, and it only seems to insert the "Additional Info" code block above my product title, no matter what tag I give. The code I am using currently is as follows:

<script>
  $(document).ready(function() { 
        $('.ProductItem-additional .code-block').insertAfter('.ProductItem-details-title');
    });
</script>

It only seems to be able to move my "Additional Info" to above the title, and nowhere else. I want to try and have it above my product price/below the product title, as shown in the script. I am running a "star review" style code block in the "Additional Info" area.

What am I doing wrong here?

Link to post
  • 0
8 hours ago, Zurra said:

Hi rwp,

Just reviving this thread - I've tried the code you provided, with some variations, and it only seems to insert the "Additional Info" code block above my product title, no matter what tag I give. The code I am using currently is as follows:

<script>
  $(document).ready(function() { 
        $('.ProductItem-additional .code-block').insertAfter('.ProductItem-details-title');
    });
</script>

It only seems to be able to move my "Additional Info" to above the title, and nowhere else. I want to try and have it above my product price/below the product title, as shown in the script. I am running a "star review" style code block in the "Additional Info" area.

What am I doing wrong here?

Can you share link to product? WE can check easier.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

Try this. Design -> CSS

.ProductItem-details .sqs-block.code-block.sqs-block-code {
    order: 4;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

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

Try this. Design -> CSS


.ProductItem-details .sqs-block.code-block.sqs-block-code {
    order: 4;
}

 

Works beautifully, thank you!

Is there a way to reduce padding between the additional info block and the product title?

Link to post
  • 0

Hi @Zurra

Use this code in Design -> Custom CSS

.tweak-product-item-details-show-price .ProductItem-details .product-price {
    margin-bottom: 20px !important; /* change it - default: 30px */
}
.tweak-product-item-details-show-title .ProductItem-details h1.ProductItem-details-title {
    margin-bottom: 20px !important; /* change it - default: 30px */
}

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

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