[Share] Assign Accordion based on Product Category

If you can't make code work, you can share link to site url & let me know which tags you create, I can check your case easier.

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 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 ID of Section and 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