Enable Product Slots: Go to your Bundle's settings. Enable
Product Slotsand clickSave.Set a Quantity Condition: In
Category Rules, add a condition where the quantity is a specific number (e.g.,Quantity equals 4).Add the Code: Copy the provided code snippet. Paste it into the bundle settings > Custom CSS and click
Save.
Customize Placeholders: To change the discount or text, modify the code directly. For instance, replace
"child one"with"child three"to apply the same discount to a different slot.[check the video for how the code works]Preview: Check the bundle preview to ensure the slots and discount placeholders (e.g.,
5% off) are correct.[screenshot of a bundle preview showing enabled slots and discount text]
Make sure the discount you've set up in the Bundle Discount is reflected in the content section (5%off, 10$off) of the code below, based on the discount you've created in Easy bundles.
Note : Product slots only work when you have set up Equal to condition at step level in the Bundle
You can paste the following CSS code in the Easy Bundle > Additional Configuration > Bundle Level CSS section.
.gbbSlotFooterProductContainer:has(.gbbSlotFooterProductImage)::before {
content: "" !important; /* Empty the content if the condition is met */
}
.gbbSlotFooterProductContainer {
font-size: 0px; /* This hides the original content */
}
.gbbSlotFooterProductContainer::before {
font-size: 14px; /* Set the font size for the ::before content */
}
.gbbSlotFooterProductContainer:nth-last-child(1)::before {
content: "5% off";
}
.gbbSlotFooterProductContainer:nth-last-child(2)::before {
content: "5% off";
}
.gbbSlotFooterProductContainer:nth-last-child(3)::before {
content: "15% off";
}
.gbbSlotFooterProductContainer:nth-last-child(4)::before {
content: "15% off";
}