[ErnestasSysojevasParticipant]

Hi,

I’ve just started using product variations and do not like how dropdown menu in visualised in Ethos shop template (at first glance you don’t even see it’s a dropdown menu…). Please see the product “20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3”: http://www.mocondemand.net/courses/
Maybe you have already faced this issue with other clients and have any suggestions how to make this better?

Thank you in advance!

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.woocommerce li.product:hover .entry-wrap {
    top: calc(100% - 15.385em);
}

Hope it helps.

[ErnestasSysojevasParticipant]

No changes… How can it be?

[ErnestasSysojevasParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing back. The correct code has been provided already. It seems you have placed PHP code on Custom CSS box that doesn’t make any sense – http://prntscr.com/am2a7h

Kindly remove this to get expected result. When you add any custom code to your site, make sure you know what you are doing to avoid potential conflicts.

Hope this makes sense.

Cheers!

[ErnestasSysojevasParticipant]

Hi,

I’m sorry… this is what happens when you do these things without any coding knowledge 🙁
I’ve removed the code piece you showed in printscreen, but still no changes…

[ErnestasSysojevasParticipant]

Now it works… Was that you who did something? 🙂
One more little thing: now dropdown menu is visible, one can choose one or another variation, but there is no “Add to cart” button (or it’s not visible?).
I see two options:
1. Also having “add to cart” visible
2. Remove that dropdown menu at all. Only product name and price would be visible, and everything else could be done after clicking the product.

Thank you very much and sorry for my incompetence…

[LelyModerator]

Hello There,

There is an add to cart button but it is hidden because the space is not enough to display both variation dropdown and the add to cart button. It is recommended to hide the variation so customers can go directly to the product page to select product variation and then click add to cart. We cannot just hide the dropdown because the products have variations and we need to select that before clicking add to cart.
Please add this CSS:

form.variations_form.cart {
    display: none;
}

Hope this helps.

[ErnestasSysojevasParticipant]

Just perfect!
A huge THANK YOU 🙂

[LelyModerator]

You’re welcome!

Always,
X

[ErnestasSysojevasParticipant]

Hi once again… I’ve just noticed that ability to choose product variantions and “Add to Cart” buttons have totally disappeared from product pages as well! Now there is no way to buy the product which is very bad 🙁

[RadModerator]

Hi there,

Another support here, it’s a little confusing while reading the discussion. Would you mind clarifying? If you wish to remove the drop down, then you can just remove variations for each of your product.

Thanks!

[ErnestasSysojevasParticipant]

Hi, Rad,

sure, I’ll try to explain in simple words what we need. Firstly, variations is a must, because each of our products have two types: Basic Set and Package Set with different prices. So custumer should have a possibility to see a dropdowm menu on a product page and choose the variation they need. For example: http://www.mocondemand.net/courses/20331-core-solutions-of-microsoft-sharepoint-server-2013-moc-on-demand/ It seems ok for me as it looks now.
But the problem is with the shop page (called Courses in our case): http://www.mocondemand.net/courses/. Your Theme was very well visualised before we added variations (we did this only this week). Now it seems messy, because when a customer hovers over a certain product image, he sees the product name (it’s ok), a range of prices (it’s still not that bad but would be better to see only the lower price 670 USD at first), but has no possibility to choose the variation from a dropdowm menu or add the product to cart.
Two scenarios are possible as I imagine:
1. Make both the dropdown menu and Add to Cart button visible when hovering over.
2. Show only course name (maybe even without the price) in the shop page and hide everything else. The one simply has to click the product he’s interested in and can make all the actions later on the product page.

Your colleague has provided me the code to remove variations and I thought this would remove them only from the shop page, but it removed them at all, also from each product page. Which was really bad 🙂

I can imagine that those corrections are quite minor, but we are administering (and also built) this site without any coding knowledge, so I really need help from you Support 🙂

Thanks in advance!

[ZeshanMember]

Hi there,

Thanks for your detailed response!

If you want to hide the variations only from the shop page, please use this CSS code instead:

.post-type-archive-product form.variations_form.cart {
    display: none;
}

Hope this helps. 🙂

Thank you!

[ErnestasSysojevasParticipant]

This reply has been marked as private.

[Author]

Posts