I need help with Hamburger icon on desktop and Wishlist

Hi there, I need help in the following topic.
1. I have added a hamburger menu icon on the top left of the header but it is not working. (Explained in the video)
2. I want to make Wishlist visible even without hover on product card. (Explained in the video)
3. I want to hide the product count on the cart icon when its empty. (Explained in the video)
4. Increase space in between rows on the product grid. (Explained in the video)

Here is the video link where I explained this. https://youtu.be/HXj3rGccnSg

[Hung Pham]

Hi ahemon0722,

Thanks for reaching to us.

1. Switch to the parent theme, update both the WoodMart theme and WoodMart Core to the latest versions, deactivate all third-party plugins, and then recheck the issue.

3. Unfortunately, there is no such option by default.

2, 4. Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

div.wd-product :where(.product-wrapper,.product-element-bottom) {
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px;
}

.wd-product-footer{
    width: 100%;
}

div.wd-product.wd-hover-buttons-on-hover {
    --text-align: center;
}

/* Removing cart icon */
.wd-add-btn-replace a.add-to-cart-loop:hover span {
    transform: none;
}

.wd-add-btn-replace a.add-to-cart-loop:before
{
    font-size: 0;
}

Best Regards,

• This reply was modified 5 days, 11 hours ago by Hung Pham.

Hello there, Thanks for getting back to me.
I have explained everything on this video. Please check and you can also check i directly on the website as I already shared the login information. Thanks

https://youtu.be/QgWGrGbw9zM

Hi ahemon0722,

1. Wishlist

Please use below Custom CSS:

.wd-wishlist-icon.wd-action-btn>a{
    color: #000;
}

2. Counter

It seems you found the way, please let me know.

3. Full screen menu

Please clear cache and double check.

Regards,

Hello, Thanks for getting back to me.
.wd-wishlist-icon.wd-action-btn>a{
color: #000;
}
I am actually not sure what this code does? because its still grey even after I added it. It becomes black on hover.

About the product counter: Yes I have added a code that has solved the issue.

And about the hamburger menu, Its already selected as fullscreen menu. But still the hamburger menu don’t work. Can you please login to my site and check this? I have sent you the admin login credentials before and I am doing it again.

Hello there, Is there any update?

Hi ahemon0722,

To assist you in the best possible manner, I kindly ask that you provide me temporary FTP info (server, username, password, port) to Private Content area, I need to enable debug log and this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

Here is the login details. Please give me an update.

Hi ahemon0722,

I mean FTP info (server, username, password, port), not just WordPress admin account.

Regards,

Here is the FTP login details. Please get it worked out.
And No need to work on the hamburger menu as I am using mobile menu there. But is it possible to remove the divider under each menu item? I have explained it in the video. Also, please help me with the wishlist thing. I have explained it in the video as well. Thanks

Here is the FTP login details. Please get it worked out.
And No need to work on the hamburger menu as I am using mobile menu there. But is it possible to remove the divider under each menu item? I have explained it in the video. Also, please help me with the wishlist thing. I have explained it in the video as well. Thanks
Here is the video.
https://youtu.be/Q4ocRNuS7Z4

Hi ahemon0722,

FTP credential is incorrect, please check again https://ibb.co/Psm8tprj

Regards,

The link you have attached isn’t working

Hello there, I just tried and the FTP details is 100% working. I have made a video where I copy pasted the info to connect FTP using filezilla. Please check the video. I am attaching the video in the Private area. Since it has my login access.

Hi ahemon0722,

I’ve passed this topic to one of our developers, and I will let you know once get an answer in the Monday.

Thanks for your patience.

Best Regards,

Thanks: Not all the above topics need attention as I fixed some myself. So, here’s the list of the things needed now.

1. Wishlist Icon needs to be Black. (Currently it becomes black on hover) (Explained in the video)
2. When you hover over a product. Select Option button pops in from below. I don’t want that (Explained in the video)
3. I need some space between Product Title and the image on the products grid. (Explained in the video)
4. Is it possible to remove the “X” icon from the Wishlist page. We just need the “remove” button. (Explained in the video)
5. I want to remove the dividers above and below from each menu items in the mobile menu. (Explained in the video)
6. Can you please remove some spacing above and below title of each category page? Also, can we please remove the arrow? (Explained in the video)
7. Products columns variations don’t work. Whatever I choose it shows 4 columns. (Explained in the video)
8. In the header when I click the search icon, it opens up below. But is it possible to make it appear on the left. (Explained in the video)

You have the FTP details as well as the wordpress details. So, Please look into those issues and please have a look at the video below as I have explained every points mentioned above. https://youtu.be/e0sdAkUOuvM
Thanks

Hi ahemon0722,

1, 2. Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

/* 1 */
.wd-action-btn.wd-wishlist-btn>a {
    color: #000;
}

/* 2  */
@media (min-width: 1025px) {
    .wd-product.wd-hover-buttons-on-hover div.product-element-bottom {
        margin-bottom: 0;
    }
    
    .wd-product.wd-hover-buttons-on-hover div.wd-product-footer {
        opacity: 1;
    }
    
    div.wd-product.wd-hover-buttons-on-hover:not(:is(.quick-shop-shown,.wd-loading)):is(:hover,.wd-variation-active) :is(.product-element-bottom,.wd-product-grid-slider-pagin) {
        transform: none;
    }    
}

@media (min-width: 1025px) {
    .wd-product.wd-hover-buttons-on-hover div.product-element-bottom {
        margin-bottom: 0;
    }
    
    .wd-product.wd-hover-buttons-on-hover div.wd-product-footer {
        opacity: 1;
    }
    
    div.wd-product.wd-hover-buttons-on-hover:not(:is(.quick-shop-shown,.wd-loading)):is(:hover,.wd-variation-active) :is(.product-element-bottom,.wd-product-grid-slider-pagin) {
        transform: none;
    }    
}

/* 3 */
div.wd-product.wd-hover-buttons-on-hover .product-element-top {
    margin-bottom: 20px;
}

/* 4 */
.wd-action-btn>a.wd-wishlist-remove:before {
    display: none;
    content: '';
}

/* 5 */
ul.wd-nav-mobile>li>a, .wd-nav-mobile>li>ul li>a,
div.mobile-nav .wd-heading{
    border-bottom: 0;
}

div.mobile-nav .wd-nav-opener{
    border: 0;
}

6. I can see the spacing is now smaller, let me know if you found the way.

7. It worked well on my end, please double check https://go.screenpal.com/watch/cTf2jFnjTXp

8. Provide me with the mockup of the styles that you try to achieve and we’ll send proper instructions if it’s possible.

9. And the full screen menu has been resolved, please double check.

Regards,

Hello, Thanks so much for sending me the codes. Most of them works but there are still a few that don’t work. I will list its down.
1. Wishlist Icon needs to be Black. Currently it becomes black on hover. It needs to be black even without hover. (Explained in the video)
2. When you hover over a product. Select Option button pops in from below. I don’t want that. What I meant here is that I don’t want that Select Option button at all. You can remove it and there should be no movement at all. The only thing is that the image should switch to the next one and thats what its doing right now. (Explained in the video – Image attached)
3. In the header when I click the “search” icon, it opens up below. But is it possible to make it appear on the left. (Explained in the video)
4. When there are no products in the cart. The text “Your cart is currently empty.” is too big. Can you tell me how can I reduce the size of the text? (Image attached.)

Explaination video
https://youtu.be/3jcwEmECFvM

Attachments:

You must be logged in to view attached files.

[Author]

Posts