Suppose you have 6 products: A, B, C, D, E, F, and 3 product categories: Bike, Car, Plane. You want products in each category to use the same accordion block (accordion will be under Add to Cart).
Instead of manually adding the accordion block into Additional Info, you want to add it automatically to products in these 3 categories, each with a different accordion.
#1. You create 3 tags: Bike, Car, and Plane, and assign them to corresponding products.
#2. Create a Section in Footer and add 3 Accordion Blocks
#3. Use below tool to find the ID of the Section and the ID of 3 Accordion Blocks
In my example, we will have:
Section ID: section[data-section-id="66b2f38aeba08e7a2aca632a"] Bike Accordion: #block-yui_3_17_2_1_1723456323817_6082 Car Accordion: #block-6a756d4bb38faeb1c5ff Plane Accordion: #block-a599ce29b69a05524dcd
#4. 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($){ // bike $('#block-yui_3_17_2_1_1723456323817_6082').insertAfter('.ProductItem.tag-bike .sqs-add-to-cart-button-wrapper'); // car $('#block-6a756d4bb38faeb1c5ff').insertAfter('.ProductItem.tag-car .sqs-add-to-cart-button-wrapper'); // plane $('#block-a599ce29b69a05524dcd').insertAfter('.ProductItem.tag-plane .sqs-add-to-cart-button-wrapper'); }) </script>
#5. Use this code to Custom CSS box
section[data-section-id="66b2f38aeba08e7a2aca632a"] { display: none !important; }
#6. Result