Buy me a coffee

Add an Accordion FAQ under Add to Cart

This guide is for Product Detail Page Only. With Store/Category Page, it will require a different code. You can send me a message via email with your shop URL. I can adjust the code more easily.

All Products

#1. First, you need to edit all products > Additional Info > Add an Accordion FAQ
#2. Use this code to Code Injection>Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .accordion-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>

Result:

Add An Accordion Faq 02 Min

One Product

#1. You need to edit the product where you want to replace the add to cart button > Additional Info > Add an Accordion FAQ
#2. Paste code to Code Block

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .accordion-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>

It is the result

Add An Accordion Faq 02 Min

Add an Accordion FAQ under Product Description (each product has a different accordion)

Edit each product > Additional Info > Add an Accordion Block > Then use this code to Code Injection>Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .accordion-block').appendTo('.ProductItem-details-excerpt');
})
</script>

The result is like this
Add An Accordion Faq 01 Min

Add an Accordion FAQ under Product Description (all products have the same accordion)

#1. First, you need to edit Site Footer > Add an Accordion Block
#2. Use this code to Code Injection>Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('footer.sections .accordion-block').appendTo('.ProductItem-details-excerpt');
})
</script>

#3. Use this code to Custom CSS box 

footer.sections .accordion-block {
  display: none !important;
}
body[class*="type-products"].view-item .ProductItem-details .ProductItem-details-checkout .accordion-block {
  display: block !important;
}

You will have this

Add An Accordion Faq 01 Min