Assign Additional Info based on Category

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 additional information.

Instead of manually entering the description into Additional Info, you want to add it automatically to products in these 3 categories, each with a different description.

#1. You create 3 tags: Bike, Car, and Plane, and assign them to corresponding products. (We have to create tags because we cannot target categories with code.)

#2. Create 3 Pages in Not Linked with Name/URL

Bike – /bike
Car – /car
Plane – /plane

#3. Add Text to these pages, here I used a random text.

#4. Install this Plugin

The plugin will give you some code to add to the Code Injection Header and footer, like this.

#5. Use this code to Code Injection – Footer or Shop/Store Page Header Code Injection

<div data-wm-plugin="load" data-target="/bike"></div>
<div data-wm-plugin="load" data-target="/car"></div>
<div data-wm-plugin="load" data-target="/plane"></div>

#6. Use this code to Code Injection – Footer or Shop/Store Page Header Code Injection, under #5 code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
  if (detail.target !== '/bike') return;
  $('[data-target="/bike"]').insertBefore('section.ProductItem-additional');
})
</script>
<script>
document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
  $('.wm-load-container').insertBefore('section.ProductItem-additional');
})
</script>

#7. Use this code to Custom CSS box

/* CSS */
.tag-bike [data-target="/bike"] {
    display: block !important;
}
.tag-car [data-target="/car"] {
    display: block !important;
}
.tag-plane [data-target="/plane"] {
    display: block !important;
}

#8. Result