diff --git a/api/actions/products.php b/api/actions/products.php
index 54f0541..1ce31ee 100644
--- a/api/actions/products.php
+++ b/api/actions/products.php
@@ -39,7 +39,8 @@ function handleGetProducts(): void
         $log("WooCommerce client initialized");
         
         // Only fetch fields needed for telesales app
-        $productFields = 'id,name,price,type,upsell_ids,cross_sell_ids';
+        // Include meta_data for ACF fields like upsell_informatie
+        $productFields = 'id,name,price,type,upsell_ids,cross_sell_ids,callcenter_upsell_info';
         $variationFields = 'id,price,attributes';
         
         $products = $woocommerce->get('products', [
@@ -70,6 +71,8 @@ function handleGetProducts(): void
         foreach ($products as $product) {
             $productId = (int) $product->id;
             
+            $log("Product Info from WooCommerce", $product);
+            
             // Get variations for variable products (only needed fields)
             $variation_details = [];
             if ($product->type === 'variable') {
@@ -112,7 +115,8 @@ function handleGetProducts(): void
                 'variation_details' => $variation_details,
                 'cuw_ids' => $cuw_ids,
                 'recommended_ids' => $recommended_ids,
-                'bogo_rules' => $bogo_rules
+                'bogo_rules' => $bogo_rules,
+                'upsell_text' => $product->callcenter_upsell_info
             ];
         }
 
diff --git a/index.html b/index.html
index 7056582..5592b51 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
     <!-- Load JavaScript modules with cache busting -->
     <script>
         // Change this version number to bust cache for all JS files
-        const APP_VERSION = '1.1';
+        const APP_VERSION = '1.1.1';
         
         const scripts = [
             'js/services/api.js',
@@ -200,7 +200,7 @@
                                         <span x-text="p.name"></span>
                                         <span x-show="p.bogo_rules && p.bogo_rules.length > 0"
                                             x-text="p.bogo_rules[0]?.badge_text || p.bogo_rules[0]?.label"
-                                            class="ml-2 px-2 py-1 bg-red-500 text-white text-[9px] font-black rounded-full uppercase">
+                                            class="ml-2 px-2 py-1 bg-red-500 text-white text-[9px] font-black rounded-full  max-w-48 truncate uppercase">
                                         </span>
                                     </div>
                                 </div>
@@ -253,39 +253,51 @@
                         Wellicht ook interessant</p>
 
                     <template x-for="u in recommendedOptions" :key="u.id">
-                        <!-- Product with BOGO discount - styled like action block -->
-                        <div x-show="getYProductBogoDiscount(u)"
-                            class="p-4 bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl text-white shadow-lg">
-                            <div class="flex items-center justify-between gap-3">
-                                <div class="flex items-center gap-3">
-                                    <div class="bg-white/20 p-2 rounded-full">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
-                                        </svg>
-                                    </div>
-                                    <div>
-                                        <p class="font-black text-sm uppercase tracking-wide" x-text="u.name"></p>
-                                        <p class="text-[10px] opacity-80" x-text="getYProductDiscountLabel(u)"></p>
+                        <div>
+                            <!-- Product with BOGO discount - styled like action block -->
+                            <div x-show="getYProductBogoDiscount(u)">
+                                <div class="p-4 bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl text-white shadow-lg">
+                                    <div class="flex items-center justify-between gap-3">
+                                        <div class="flex items-center gap-3">
+                                            <div class="bg-white/20 p-2 rounded-full">
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
+                                                </svg>
+                                            </div>
+                                            <div>
+                                                <p class="font-black text-sm uppercase tracking-wide" x-text="u.name"></p>
+                                                <p class="text-[10px] opacity-80" x-text="getYProductDiscountLabel(u)"></p>
+                                            </div>
+                                        </div>
+                                        <button @click="toggleUpsell(u)"
+                                            :class="isInCart(u.id) ? 'bg-slate-700' : 'bg-white'"
+                                            :disabled="isInCart(u.id)"
+                                            class="text-red-500 px-4 py-2 rounded-xl font-black text-xs uppercase shadow-md hover:bg-red-50 transition disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap">
+                                            <span x-text="isInCart(u.id) ? 'Toegevoegd' : ('+ €' + getYProductDiscountedPrice(u))"></span>
+                                        </button>
                                     </div>
                                 </div>
-                                <button @click="toggleUpsell(u)"
-                                    :class="isInCart(u.id) ? 'bg-slate-700' : 'bg-white'"
-                                    :disabled="isInCart(u.id)"
-                                    class="text-red-500 px-4 py-2 rounded-xl font-black text-xs uppercase shadow-md hover:bg-red-50 transition disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap">
-                                    <span x-text="isInCart(u.id) ? 'Toegevoegd' : ('+ €' + getYProductDiscountedPrice(u))"></span>
-                                </button>
+                                <!-- Upsell information text for BOGO products -->
+                                <div x-show="u.upsell_text && u.upsell_text.length > 0"
+                                   x-html="u.upsell_text"
+                                   class="text-xs text-slate-600 italic px-2 mt-2"></div>
+                            </div>
+                            
+                            <!-- Regular product without BOGO discount -->
+                            <div x-show="!getYProductBogoDiscount(u)">
+                                <div class="flex items-center justify-between p-4 border rounded-2xl bg-slate-50 hover:bg-white transition-all shadow-sm">
+                                    <span class="text-xs font-bold text-slate-700"
+                                        x-text="u.name + ' (€' + u.price + ')'"></span>
+                                    <button @click="toggleUpsell(u)" :class="isInCart(u.id) ? 'bg-red-500' : 'bg-green-600'"
+                                        class="text-white px-6 py-2 rounded-xl text-[10px] font-black uppercase shadow-md"
+                                        x-text="isInCart(u.id) ? 'Verwijder' : 'Voeg toe'">
+                                    </button>
+                                </div>
+                                <!-- Upsell information text for regular products -->
+                                <div x-show="u.upsell_text && u.upsell_text.length > 0"
+                                   x-html="u.upsell_text"
+                                   class="text-xs text-slate-600 italic px-2 mt-2"></div>
                             </div>
-                        </div>
-
-                        <!-- Regular product without BOGO discount -->
-                        <div x-show="!getYProductBogoDiscount(u)"
-                            class="flex items-center justify-between p-4 border rounded-2xl bg-slate-50 hover:bg-white transition-all shadow-sm">
-                            <span class="text-xs font-bold text-slate-700"
-                                x-text="u.name + ' (€' + u.price + ')'"></span>
-                            <button @click="toggleUpsell(u)" :class="isInCart(u.id) ? 'bg-red-500' : 'bg-green-600'"
-                                class="text-white px-6 py-2 rounded-xl text-[10px] font-black uppercase shadow-md"
-                                x-text="isInCart(u.id) ? 'Verwijder' : 'Voeg toe'">
-                            </button>
                         </div>
                     </template>
                 </div>
diff --git a/js/services/bogo.js b/js/services/bogo.js
index 6e56c92..12d6066 100644
--- a/js/services/bogo.js
+++ b/js/services/bogo.js
@@ -196,6 +196,7 @@ const BogoService = {
 
     /**
      * Get BOGO discount info for a Y product based on X product's rules
+     * Checks ALL BOGO rules on the X product, not just the primary one
      *
      * @param {Object} xProduct - The main product (X) with BOGO rules
      * @param {Object} yProduct - The upsell product (Y) to check
@@ -204,23 +205,26 @@ const BogoService = {
     getYProductDiscount(xProduct, yProduct) {
         if (!xProduct || !this.hasBogoRules(xProduct)) return null;
         
-        const rule = this.getPrimaryBogoRule(xProduct);
-        
-        // Only for buy_x_get_y rules
-        if (rule.type !== 'buy_x_get_y') return null;
-        
-        // Check if yProduct is in the get_product_ids
-        if (!rule.get_product_ids || !rule.get_product_ids.includes(parseInt(yProduct.id))) {
-            return null;
+        // Check ALL BOGO rules, not just the primary one
+        for (const rule of xProduct.bogo_rules) {
+            // Only for buy_x_get_y rules
+            if (rule.type !== 'buy_x_get_y') continue;
+            
+            // Check if yProduct is in the get_product_ids
+            if (!rule.get_product_ids || !rule.get_product_ids.includes(parseInt(yProduct.id))) {
+                continue;
+            }
+            
+            // Return discount info for the first matching rule
+            return {
+                rule_id: rule.rule_id,
+                discount_type: rule.discount_type,
+                discount_value: rule.discount_value,
+                label: rule.label,
+                badge_text: rule.badge_text
+            };
         }
         
-        // Return discount info
-        return {
-            rule_id: rule.rule_id,
-            discount_type: rule.discount_type,
-            discount_value: rule.discount_value,
-            label: rule.label,
-            badge_text: rule.badge_text
-        };
+        return null;
     }
 };