Tagged: Drop down menu, dropdown menu, labels, main navigation, product listing, variant, woocommerce
- This topic has 10 replies, 2 voices, and was last updated 2 days, 17 hours ago by catwingz.
-
AuthorPosts
-
November 19, 2024 at 12:00 am #338151catwingzParticipant
<div class=”sc-jNjAJB fKEYND”>
<div class=”sc-fvNhHS vWuiX” data-testid=”MessageGroupNewUser”>
<div class=”sc-ezHeEz gywAWX”>
<div class=”sc-ihRHuF kWTPMV”>
<div class=”sc-cTsKDU cKaLQk” data-testid=”MessageGroupMessage”>
<div class=”sc-kkmGkm CGXRw”>
<div class=”sc-btlduw kMTXgk”>
<div class=”sc-hWZktu hFIbqG”>
<div class=”sc-tsGVs dwhOMr” data-testid=”AutoMessage”>Hi.</div>
<div data-testid=”AutoMessage”>I’m trying to resolve a problem in my product listings on the site. There are three layers – Printify, WooCommerce and the theme – and Printify support believes it can be resolved by a change to the theme styling.</div>
<div data-testid=”AutoMessage”></div>
<div class=”sc-tsGVs dwhOMr” data-testid=”AutoMessage”>A sample link is https://tractorcats.com/product/indy-on-international-disk-2025-puzzle-252-520-1014-piece/</div>
</div>
</div>
</div>
<div class=”sc-bXmHAB gCpUSt”></div>
</div>
</div>
<div class=”sc-ihRHuF kWTPMV”>
<div class=”sc-cTsKDU cKaLQk” data-testid=”MessageGroupMessage”>
<div class=”sc-kkmGkm CGXRw”>
<div class=”sc-btlduw kMTXgk”>
<div class=”sc-hWZktu hFIbqG”>
<div class=”sc-tsGVs dwhOMr” data-testid=”AutoMessage”>The only thing telling a customer that there are choices are what I have stuffed into the title and that the price shows a spread of options. Otherwise under the default number of pieces they see “Clear” which is meaningless until you figure out it is a label/command hiding a dropdown. This is a roadblock to sales because it is causing unnecessary confusion for the customer.</div>
</div>
</div>
</div>
</div>
</div>
<div class=”sc-ihRHuF kWTPMV”>
<div class=”sc-cTsKDU cKaLQk” data-testid=”MessageGroupMessage”>
<div class=”sc-bXmHAB gCpUSt”></div>
</div>
</div>
<div class=”sc-ihRHuF kWTPMV”>
<div class=”sc-cTsKDU cKaLQk” data-testid=”MessageGroupMessage”>
<div class=”sc-kkmGkm CGXRw”>
<div class=”sc-btlduw kMTXgk”>
<div class=”sc-hWZktu hFIbqG”>
<div class=”sc-tsGVs dwhOMr” data-testid=”AutoMessage”>At first I thought it would be at least more helpful if “Clear” was replaced by “Choose” or “Select” as one word suggestions. Printify support believes the theme’s configuration is dictating how the variant dropdown menus appear on the product listings and suggests it might be possible to remove the “Clear” button entirely and allow the other variant options to become visible.</div>
<div data-testid=”AutoMessage”></div>
</div>
</div>
<div data-testid=”AutoMessage”>Can you help with this?</div>
</div>
</div>
</div>
</div>
</div>
</div>November 19, 2024 at 12:06 am #338159sujeetKeymasterHello @catwingz,
If you want to hide the “clear” link, then please add the following css code to Dashboard -> Appearance -> Editor -> Styles -> Additional Css.
a.reset_variations { visibility: hidden !important; display: none !important; }
Thank you.
Regards,
SujeetNovember 19, 2024 at 12:28 am #338162catwingzParticipantThank you @sujeet. That’s much better.
Is there any way to make it so the default variation is “choose an option” instead of whatever size happens to be at the top of the list?
November 19, 2024 at 11:30 pm #338177sujeetKeymasterHello @catwingz,
To make the default variation a “choose an option”, you need to remove default form values from product. For that you need to edit the product and go to Variations option, there you will find Default From Values. Please check the screenshot as well.
Please try and let me know if that worked. Thank you.
Regards,
Sujeet- This reply was modified 2 weeks, 1 day ago by sujeet.
November 23, 2024 at 8:57 pm #338217November 23, 2024 at 9:34 pm #338219catwingzParticipantIt might be better if I started with a new thread, but these are additional tweaks I’m trying to make to the product pages.
The label and product variations are all light grey and I am trying to make them white.
These aren’t working but so far I have tried these and left them in place:
.woocommerce div product form.cart .variations label, .woocommerce div product form.cart .variations select, .woocommerce div product form.cart .variations th{ color: #ffffff !important; }
November 23, 2024 at 11:33 pm #338221sujeetKeymasterHello @catwingz,,
The css code seems to be correct. It should work. However, I can’t see the code that you added in the website. Did you add that in additional css? Please add the following css code.
.woocommerce div.product form.cart .variations label { color: #ffffff !important; } .woocommerce div.product form.cart .variations select { background-color: #353535 !important; color: #ffffff !important; }
Please let me know if that worked. Thank you.
Regards,
SujeetNovember 25, 2024 at 1:54 am #338234catwingzParticipant@sujeet that worked. My reply got deleted before I could send it.
Thank you so much.
I have one more tweak and then I think I’ll be done. I’m trying to change the main navigation to black. I was able to change the mobile menu but not the desktop version. This time I have published my code that’s not working. I added and subtracted up the chain. I’m sure there’s more there than is needed now but I’m not sure where I’m going wrong.
div#primary-menu-wrapper.menu-wrapper div.menu-inside-wrapper nav#site-navigation.main-navigation ul#primary-menu.menu.nav-menu li{ color: #000000 !important; }
What am I missing?
November 25, 2024 at 11:40 pm #338259sujeetKeymasterHello @catwingz,
Please add the following code to make navigation black.
.absolute-header .menu-toggle { color: #000000 !important; } @media screen and (min-width: 75em) { .navigation-classic.absolute-header .main-navigation a { color: #000000 !important; } }
Please let me know if that worked. Thank you.
Regards,
SujeetDecember 2, 2024 at 4:52 am #338327catwingzParticipantHello @Sujeet,
That worked, and it led me to making a few other fixes. Thank you again!
I keep saying I’m done but have run into one more that I am stuck on. The Home page has three “featured content” pages linked to it. Two of them now have white text. One is resistant. https://tractorcats.com/featured-content/2024-machines
should have white text where it says “This is the farm equipment featured in the Tractor Cat photos. More about them to follow.” I don’t see what is making that page different. What am I missing?
Thank you
December 2, 2024 at 5:15 am #338334sujeetKeymasterHello @catwingz,
I can see that you’ve put white color(#ffffff) for <p> tag, but the text “This is the farm equipment featured in the Tractor Cat photos. More about them to follow.” is not inside <p> tag. So the paragraph is of different color.
So what you need to do is, either you put that text inside the <p> tag, of just add the following css code to additional css.
.entry-content { color: #ffffff; }
Hope this works for you.
Regards,
SujeetDecember 2, 2024 at 2:33 pm #338336 -
AuthorPosts
- You must be logged in to reply to this topic.