Can someone please help me with code to add an accordion of FAQs in our Store (V 7.0)

We'd like to add an accordion of FAQs on our shop page (not within each individual product) but are still on Version 7.0.

Can anyone help with code to make this possible?

I'm an absolute beginner so please don't assume any coding knowledge!

Any help will be very much appreciated,
Bron 

You can add an accordion block to Site Footer, above "Wadawurrung country..." Text, then we can give code to move it to your desired position in Shop Page

On 10/16/2023 at 2:08 PM, tuanphan said:

You can add an accordion block to Site Footer, above "Wadawurrung country..." Text, then we can give code to move it to your desired position in Shop Page

Thanks @tuanphan! I'll be in touch as soon as I have the accordion block up in the Site Footer. Many thanks for your help with this.

You're welcome

On 11/3/2023 at 5:54 PM, tuanphan said:

You're welcome

Hello again @tuanphan I have now added the accordion block to the Site Footer as you suggested. I would be super grateful if you could help me with the code needed to move this to the Workshops at Bluebird House page, underneath all the products (as shown in my original post here on the 15th Oct).

Thanks in advance!!

You can add this code to last line in Website > Website Tools (under Not Linked) > Code Injection > Footer

<script>
  $(document).ready(function(){
    $('div#footerBlocks .accordion-block').insertAfter('#productList');
});
</script>

2 hours ago, tuanphan said:

You can add this code to last line in Website > Website Tools (under Not Linked) > Code Injection > Footer

<script>
  $(document).ready(function(){
    $('div#footerBlocks .accordion-block').insertAfter('#productList');
});
</script>

 

Thanks @tuanphan!

I've added that code and the accordion block does indeed now appear on the Workshops at Bluebird House page.

I now have 2 more questions:

1. Is there a way to make it so that it DOESN'T also appear in the footer on all other pages?
2. Is there a way to bring the "Workshop FAQs" text block onto the Workshops at Bluebird House with the accordion block?

Thank you so much for your help!!

On 11/8/2023 at 5:07 PM, BluebirdBirdy said:

Thanks @tuanphan!

I've added that code and the accordion block does indeed now appear on the Workshops at Bluebird House page.

I now have 2 more questions:

1. Is there a way to make it so that it DOESN'T also appear in the footer on all other pages?
2. Is there a way to bring the "Workshop FAQs" text block onto the Workshops at Bluebird House with the accordion block?

Thank you so much for your help!!

#1. Add this code to Website Tools > Custom CSS

div#footerBlocks .accordion-block {
	display: none !important;
}
#productList ~ .accordion-block {
	display: block !important;
}

#2. 

You mean this text?

Use this new code

<script>
  $(document).ready(function(){
    $('div#footerBlocks .accordion-block').insertAfter('#productList');
    $('div#footerBlocks div#block-yui_3_17_2_1_1699262170562_36898').insertBefore('#productList ~ .accordion-block');
});
</script>

On 11/10/2023 at 7:42 PM, tuanphan said:

You mean this text?

Yes - thank you @tuanphan! The "Workshop FAQs" text block is now visible on the Workshops at Bluebird House page - hooray!

You have helped me get everything almost right... One final request now (thank you for your patience):

Is there a way to make the "Workshop FAQs" text block NOT visible in the footer on all other pages?

Hi @tuanphan! You've been very generous with your time and knowledge. I'm hoping you can help me get this final piece right...

Is there a way to make the "Workshop FAQs" text block NOT visible in the footer on all other pages?

Add this code to Website > Page > Website Tools > CUSTOM CSS

/* Hide Workshop FAQ text */
div#block-yui_3_17_2_1_1699262170562_36898 {
	display: none !important;
}
#productList ~ div#block-yui_3_17_2_1_1699262170562_36898 {
	display: block !important;
}

2 hours ago, tuanphan said:

Add this code to Website > Page > Website Tools > CUSTOM CSS

/* Hide Workshop FAQ text */
div#block-yui_3_17_2_1_1699262170562_36898 {
	display: none !important;
}
#productList div#block-yui_3_17_2_1_1699262170562_36898 {
	display: block !important;
}

 

Thank you!

Small issue... this has indeed hidden the text in the footer BUT it has also hidden it on the Workshop page too.

Any suggestions?

Woo hoo! That's fixed it... thank you so much for persisting with me @tuanphan - I really appreciate the help.