Add to Compare button on mobile

This topic has 12 replies, 2 voices, and was last updated 32 minutes ago by Alex.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
February 3, 2025 at 4:39 pm #635045

Alex
Participant

Theme Default prebuilt

No Compare button on mobile:
On products on product catalog pages (regardless of whether it is grid or list format), Related products, You may also like…, Wishlist page

However, the button is available on product pages.

Compare page:
There is no Add to Wishlist button on products either on mobile or desktop

Attachments:
You must be logged in to view attached files.

February 4, 2025 at 10:55 am #635187
Luke Nielsen
Keymaster
Hello,

Paste the code below in Theme Settings -> Custom CSS and then recheck the issue.
```
.wd-product .wd-buttons :is(.wd-quick-view-icon,.wd-compare-btn) {
    display: block;
}
```
Kind Regards
February 4, 2025 at 11:30 am #635216

Alex
Participant

Added CSS to Theme Settings -> Custom CSS – Global. It added the add to Compare button only for products on catalog pages in list mode on mobile.

The add to Compare button on mobile is still missing:
– in grid mode on catalog pages
– Related products
– You may also like…
– Wishlist page
– Products Gutenberg (any product block added via Gutenberg, for example: Recently viewed, NEW, Popular etc)

The add to Wishlist button mobile/desktop is missing:
– Compare page

As far as I understand, this is the case on all sites that have Theme Default prebuilt. Because I see the same problem on your demo. But I think it is important, especially when more than 70% of users are from mobile devices

February 4, 2025 at 11:38 am #635220

Luke Nielsen
Keymaster

Hello,

Paste it to the Mobile CSS area – https://prnt.sc/PWTNeDbt7xK5

Clear the cache and check how it works. If it still does not work, send me access to the admin panel.

Kind Regards

February 4, 2025 at 11:59 am #635228

Alex
Participant

Nothing has changed. Everything is the same as when adding to the Global tab

February 4, 2025 at 12:21 pm #635240

Luke Nielsen
Keymaster

Hello,

Navigate to Theme Settings -> Settings presets -> create a preset with such a condition – https://prnt.sc/NfgfTLjZsWD0 then edit its settings https://prnt.sc/Johk8YKP0FJt and set this https://prnt.sc/5l2Op1wN0MRb design.

Clear the cache and check how it works on mobile. Currently, you use such a style that has a compare button at the bottom so it would be better to change the style on mobile devices and use the code I have sent before.

I await your response.

Kind Regards

February 4, 2025 at 12:24 pm #635241

Alex
Participant

But I need a preview of the product description. It’s only in the style I’m using now.

February 4, 2025 at 2:28 pm #635286

Alex
Participant

I did it a little differently:
– created a mobile preset
– created another preset (for the product page, to change the style for Related products and You may also like… and so that it works on the desktop too)
– changed the style selection for Products Gutenberg

I chose the style everywhere as on the screenshot (Standard button style). Cleared the cache

Therefore, the question arose:
How can I make it so that I can choose the same style (as on this screenshot) for the grid mode on the catalog pages for the desktop, but so that when hovering there is also an “Excerpt”. The styles for the list mode should remain the same as now

This problem remained:
The add to Wishlist button mobile/desktop is missing:
– Compare page

Attachments:
You must be logged in to view attached files.

February 4, 2025 at 3:39 pm #635331

Luke Nielsen
Keymaster

Hello,

1. Do you mean to show the description by default when the product is not hovered? https://prnt.sc/HihSW2LxXeTz

2. If you do not want to use another style, change it back for mobile devices https://prnt.sc/S9_IIIj4xCUh and then I will prepare a custom CSS to show the compare icon.

3. The compare grid items are not designed to show the “Add to wishlist” button, unfortunately, you can leave a future request here – https://woodmart.canny.io/feature-requests so our developers will take it into account.

Kind Regards

February 4, 2025 at 3:46 pm #635340

Alex
Participant

No, I want to display the description when hovering over the product on desktop, but at the same time use the layout as on the screen (Standard button style)

Attachments:
You must be logged in to view attached files.

February 4, 2025 at 3:50 pm #635344

Luke Nielsen
Keymaster

Hello,

Okay, understood. Unfortunately, adding such style for the “Standard button style” requires Customization and this is beyond our limitations and support policy scope. Hope you can understand.

Kind Regards

February 4, 2025 at 3:57 pm #635345

Alex
Participant

If I use this template https://prnt.sc/HihSW2LxXeTz (current) for desktop, is it possible to move the add to Compare, add to Wishlist buttons to the product image (display grid) using CSS?

February 4, 2025 at 4:25 pm #635365

Alex
Participant

If this is not possible, then I have created suggestion branches:
https://woodmart.canny.io/feature-requests/p/product-styles-summary-additional-information-quantity-per-product
https://woodmart.canny.io/feature-requests/p/show-the-add-to-wishlist-button-on-compare-page
Author

Posts