Featured product buttons are not working

Solved
Highlighted
Tourist
11 0 3

As said in the title the featured product buttons "quantity" and "ships from" are not working on my product page. Whenever I try clicking on them I get no response back. The same exact buttons on my home page are functioning properly. Does anyone know why these buttons are not working on my product page?

site: https://enacord.com/

Product buttons on Home page:

Capture.PNG

product buttons on product page:

Capture2.PNG

0 Likes
Highlighted
Astronaut
1085 178 213

This is an accepted solution.

Do this to fix your problem in 20 seconds @magoulasp 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

 

.template-product .single-option-selector,
.template-product .product-form__quantity-input{
    opacity: 1 !important;
    padding-left: 0 !important;
}

.template-product .product-form__item select,
.template-product .product-form__quantity-selector{
     display: flex !important; 
}

.template-product .product-form__item  > *:nth-child(1),
.template-product .product-form__quantity-selector > *:nth-child(1){
max-width: 40%;
width: 100%;
display: inline-block !important;
position: relative !important;
}


.template-product .product-form__item  > *:nth-child(2),
.template-product .product-form__quantity-selector > *:nth-child(2){
max-width: 60%;
    width: 100%;
    display: inline-block !important;
    position: relative !important;
}

 
Let me know whether it works please.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Tourist
11 0 3

Looks like it worked! I appreciate the help!

Do you know what was the cause of the problem?

0 Likes
Highlighted
Astronaut
1085 178 213

Glad to hear that!

The typing field of your boxes - the inputs - were invisible by default. Sometimes developers do this when they want to make an animation on load or something.

On the home page there was some Javascript injecting CSS code to make them visible, that is why they were "working".

Ideally this type of style should not be dynamically injected, so I just went ahead and hardcoded it for you.

Next time you have an issue feel free to e-mail me personally, I'll be happy to help. 

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like