Jump to content

Product pages block order gone wrong

Recommended Posts

Hi everyone!

Did anyone notice that product pages had been changed? I had reorganised the blocks use the CSS order line and all was working fine before today. The price should be above the button, the free shipping line was above the button, and the additional information (markdown block) tucked behind the text - see screenshot. It only happens on desktop, mobile is fine.

https://www.rustique.uk/available/p/antibes-painting

Is it just me?

Thanks!

Paul

Screenshot 2024-05-24 at 13.52.23.png

Link to comment
  • Replies 13
  • Views 805
  • Created
  • Last Reply

Top Posters In This Topic

I managed to get the price in the right position by assigning an order to it, but I can't find the way to have the additional information under the text as it was before - if anyone has the same problem.

Link to comment

I have had this same issue on all of my sites made with Squarespace. I have tried using CSS to reorder things, but it doesn't seem to be working at all. Really hoping for a solution quickly!

Link to comment
19 hours ago, prustique said:

I managed to get the price in the right position by assigning an order to it, but I can't find the way to have the additional information under the text as it was before - if anyone has the same problem.

Use this code to bottom of Code Injection > Footer

<script>
  $(document).ready(function(){
    $('section.ProductItem-additional').insertAfter('div.ProductItem-details-excerpt-below-price');
});
</script>
<style>
  section.ProductItem-additional {
    order: 6 !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
</style>

image.png.45113667cfc1dab5b7e6f712fa94a7c4.png

18 hours ago, Stefik said:

I have had this same issue on all of my sites made with Squarespace. I have tried using CSS to reorder things, but it doesn't seem to be working at all. Really hoping for a solution quickly!

You can share link to a product, we can help easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan Thanks for this - with the code I have everything in the right column including the reviews, which actually get just below the price (see screenshot). I've tried changed the order in your code but it didn't change anything. 

Screenshot 2024-05-25 at 13.56.20.png

Link to comment
19 hours ago, prustique said:

@tuanphan Thanks for this - with the code I have everything in the right column including the reviews, which actually get just below the price (see screenshot). I've tried changed the order in your code but it didn't change anything. 

Screenshot 2024-05-25 at 13.56.20.png

Yes, the code will move all elements inside Additional Info. So which element you want to move?  I will adjust the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
18 hours ago, Stefik said:

Here is a link to one of my product pages:

https://www.tastebytiff.com/order/p/pesto-steak

It seems to appear fine on desktop, but on the mobile versions the product description sits right at the bottom. 

So move description to?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan  Ideally, I'd like the following to be in the right column: price, buttons, description and additional infos (the accordion menu with dimensions and delivery).

And the reviews underneath the image taking up the whole width of the page (like it's now).

Link to comment
On 5/27/2024 at 6:32 PM, prustique said:

@tuanphan  Ideally, I'd like the following to be in the right column: price, buttons, description and additional infos (the accordion menu with dimensions and delivery).

And the reviews underneath the image taking up the whole width of the page (like it's now).

I see you figured it out? It looks fine to me now

On 5/27/2024 at 8:43 PM, Stefik said:

@tuanphan Ideally would like the order to be: Title, price and product description.

I see you changed product to custom layout, I don't see these fields now

https://www.tastebytiff.com/order/p/pesto-steak

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan Originally I had some code to place an accordion in the product description but scrapped that as it wasn't appearing on mobile. Now on desktop my product variants appear below the add to cart and on mobile, the order is right except for the product description being at the very bottom below add to cart. 

Link to comment
On 5/29/2024 at 7:58 PM, Stefik said:

@tuanphan Originally I had some code to place an accordion in the product description but scrapped that as it wasn't appearing on mobile. Now on desktop my product variants appear below the add to cart and on mobile, the order is right except for the product description being at the very bottom below add to cart. 

I don't see variant, add to cart, product description, accordion on the link you shared

https://www.tastebytiff.com/order/p/pesto-steak

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.