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:
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 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 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