How to Apply Code Only to Product Pages with Variant Picker?

manbru · ‎10-11-2024

Hello,

I currently have a code that works well for product pages without products that have variant options. However, when I add a variant picker to certain products, it interferes with my previous code.

No variant picker:

With variant picker:

To resolve this, I’ve written the following new CSS code specifically for product pages that include a variant picker, to make products pages with variant pickers look normal again:

<style>
#ProductInfo-template--22029799948614__main > ul:nth-child(12) > li:nth-child(2) > img, #ProductInfo-template--22029799948614__main > ul:nth-child(12) > li:nth-child(1) > img {
    width: 15px;
    height: 15px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(10) {
    background-color: #f5f5f5;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(10) > li > img {
    width: 90px;
    height: 38px;
    margin-right: 5px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(10) > li > span {
    width: 330px;
    font-size: 15px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(10) > li {
    margin-left: 0px;
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-color: #482e2e40;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(12) {
    width: 430px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(12) > li:nth-child(2) > span {
    font-size: 13px;
}
#ProductInfo-template--22029799948614__main > ul:nth-child(11) {
    padding-top: 17px;
}
</style>

So what I need help with is how to do so it only applies to the product pages that have variant options enabled. But without the original code getting affected.

My product page: https://kidos.se/products/akpase-rondane-frost-mountain-grey

code: kidos24

Thanks in advance!

manbru · ‎10-11-2024

Yes?