On the course detail page it shows the buy button on the right side of the website view. However, when in mobile view of the buy button is all the way on the bottom. It should be on the top where they can see right away.
Thanks
Staff replied
Templates
Edulif UX Design Needs to Be Updated
20 replies
Mehtaz Afsana Borsha Staff
Hi,
Could you please give me a screenshot of this issue?
Rixie Asked this
Here you go. The images shows it's under the FAQ in the Course details page.
Mehtaz Afsana Borsha Staff
Ok I will inform our team
Rixie Asked this
Will this be updated soon?
Ofi Khan Staff
Hello Rixie
Sorry, UX will not be updated in any template. We just update the template compatibility. Recently, Edulif got an update. Please check this.
Best regards
Rixie Asked this
Ok but if you really look at the user experience the customer would need to scroll all the way down to click on the Buy Button. That not good for me or your customers that use this template. I'm just saying you sould reconsider. Thank you for reading this. It's just my thought.
Rixie Asked this
By the way I'm talking about the mobile view.
Ofi Khan Staff
Thanks for your feedback. I will share it with the developers. They will consider it for the upcoming templates.
Rixie Asked this
Thank you for you and your team.
Ofi Khan Staff
Infact I am sharing a hot fix for you. Please use this CSS to Template Options -> Custom Code -> Custom CSS and check the Buy Course button in mobile after that.
@media (max-width: 767px){
.view-course a#addtocart {
bottom: 0px;
position: fixed;
left: 0px;
right: 0px;
border-radius: 0px;
padding: 12px 20px;
font-size: 13px;
z-index: 99;
}
}
Rixie Asked this
NICE... Thanks for that. It's a quick fix alright. On phase 2 I'm placing ads there but for now that's a good idea!
Rixie Asked this
When clicking on the BUY Button with your custom css. the cart doesn't pick up the call (i think it's the ajax). You have to refresh the browser to display the course in the cart.
Ofi Khan Staff
Apology for the delay. This is the right CSS
@media (max-width: 767px){
.view-course a#addtocart, .view-course .btn.btn-primary {
bottom: 0px;
position: fixed;
left: 0px;
right: 0px;
border-radius: 0px !important;
padding: 12px 20px !important;
font-size: 13px !important;
z-index: 99;
}
}
Rixie Asked this
The issue is still happening. When clicking on the buy button on mobile view the cart still doesn't display the item. You have to refresh the site for it to display.
Also I recommend placing the price as well. Can you add the price?
Rixie Asked this
5 years ago
· edited
Actually, the buy button doesn't work on both mobile and desktop. When click on the buy button it doesn't appear on the menu icon cart. You have to refresh for the red dot to display. Normally like your demo once you click on the buy button it automatically appear a red dot and displays the item in the dropdown menu.
Ofi Khan Staff
The button works on my localhost Quickstart. Please remove the previous CSS and use this to Template Options -> Custom Code -> Custom CSS
@media (max-width: 767px){
.view-course a#addtocart, .view-course .btn.btn-primary {
bottom: 0px;
position: fixed;
left: 0px;
right: 0px;
border-radius: 0px !important;
padding: 12px 20px !important;
font-size: 13px !important;
z-index: 99;
text-align: right !important;
}
.view-course .price_info .splms-price-box{
bottom: 0px;
position: fixed;
left: 0px;
right: 0px;
border-radius: 0px !important;
padding: 0px 20px !important;
z-index: 100;
width: 80%;
}
.view-course .price_info .splms-price-box
.splms-sale-price span{
font-size: 24px !important;
color: #fff;
}
.view-course .price_info .splms-price-box .splms-item-price span{
font-size: 16px !important;
}
}
Rixie Asked this
The image shows that the cart didn't pick up the call. You have to refresh in order for it to display the selected course. Am using chrome, safari, edge, and duck duck go
Ofi Khan Staff
The cart is behaving exactly as it should. Please check the below screencast.
Rixie Asked this
I thought once you clicked on the button it's suppose to appear on the cart icon dropdown.
Ofi Khan Staff
No problem. This is the actual design.
Log in to reply.