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 comment
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

15 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
Link to comment
  • 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 comment
  • 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 comment
  • 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.

Link to comment
  • 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 comment
  • 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 comment
  • 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.

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 @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 comment

Create an account or sign in to comment

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

×
×
  • Create New...