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

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

manbru
Pathfinder
125 0 30

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:

Skärmavbild 2024-10-11 kl. 13.33.44.png

 

 

 

 

 

 

 

 

With variant picker:

Skärmavbild 2024-10-11 kl. 13.33.04.png

 

 

 

 

 

 

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!

Reply 1 (1)
manbru
Pathfinder
125 0 30

Yes?