How to adjust according/additional information on product page

Hi guys,

I have read through some posts on here for guidance but have become a bit stuck.

I would like an accordion to display on each product page. The accordion details will be the same for every product, apart from the description that will come under the 'product details' tab. I will need to edit the text here for each individual product (please see below the attached image for reference)

Currently, I am only trialing this on one product (link here: https://threadsonline.co.uk/store/p/cp-company-cargo-pants) but as mentioned I would like the accordion to show up on every product page, but be able to alter the details under the 'product details' tab if possible?

I also have some issues with the layout/spacing of the product page. I have created an 'ideal' version of my product page for mobile display, and was wondering if any CSS gurus could provide me with a magic code to make my ideal product page a reality? 😄 

Also one last thing, I cant seem to add a divider at the bottom of my product page to separated it from the footer, but I can do this on every other page. Any suggestions for that would also be appreciated. Thanks!

You mean

• All products will have accordion
• But each product, will have a different text inside accordion

?

12 hours ago, tuanphan said:

You mean

• All products will have accordion
• But each product, will have a different text inside accordion

?

 

Hey, all products will have an accordion. Every accordion will have the same dropdowns: 'product details', 'delivery options' and 'returns policy'. 

The text inside 'delivery options' and 'returns policy' will be the same for every product, but the text inside 'product details' will change every product. 

I hope that makes sense, thanks!

I don't have a solution for any of your issues but I have observations on the accordion you want.

Usually what we do in a case like this is put the boilerplate element, in this case an accordion block, in the footer of the site and hide it. That makes it available for code to move into a different location.

I have done a number of similar effects but not one specifically for this situation. So that would be part one, get the code to move the accordion to where you want. I do have some code that may work for this part.

Step two might be some code that would take the normal product description and move it into the appropriate place in the accordion block.

12 hours ago, creedon said:

I don't have a solution for any of your issues but I have observations on the accordion you want.

Usually what we do in a case like this is put the boilerplate element, in this case an accordion block, in the footer of the site and hide it. That makes it available for code to move into a different location.

I have done a number of similar effects but not one specifically for this situation. So that would be part one, get the code to move the accordion to where you want. I do have some code that may work for this part.

Step two might be some code that would take the normal product description and move it into the appropriate place in the accordion block.

Hey! Yes this does sound like a possible solution, thanks for your answer. I read the post about putting the accordion in the footer, I tested this and was able to make it work. I've got almost zero knowledge of CSS so I will have to hope & prey someone can provide a code for part two (putting the normal product description in the accordion)! Thanks again.