Mobile version shop option from wishlist to compare

Hi,

Can you help me, on the mobile version of the shop archive I wanted to change the wishlist symbol on the top corner of the product image to the compare symbol so that the compare function is used not the wish list function.

I want to do this as you can see I have changed the nav bar to show compare rather than wishlist as this will be a more used feature for our product type.

I have attached a screen shot and only want the change for mobile.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Send me access to the admin panel so I can check it on your side and prepare a custom CSS to show Compare and hide the Wishlist.

Kind Regards

Hi,

Please see temp login to staging version of website as requested.

Thanks

Hello,

On mobile, I can show the Compare icon only in the same place as it is on the Desktop – https://prnt.sc/crDLNnTXGVSK

E.g. the “Quick” design – https://prnt.sc/X0wca2jaW30O , https://prnt.sc/AVvj5YQgkFvd

Kind Regards

ok so you are unable to make how was desired in the screenshot by replacing the heart in Mobile?

Ok please let me know the alternative you have shown me to show in the same place as desktop

Hello,

1) Navigate to Theme Settings -> Product archive -> Product styles -> and set e.g. Quick view design – https://prnt.sc/PnBij2MFT_mJ

2) Define the below code in Theme Settings -> Custom CSS -> Mobile CSS area:

.wd-product .wd-compare-btn {
    display: block;
}

.wd-product .wd-wishlist-btn {
    display: none;
}

Kind Regards

Hi,

Thanks but I do not wish to change the product style.

Earlier you said “On mobile, I can show the Compare icon only in the same place as it is on the Desktop – https://prnt.sc/crDLNnTXGVSK”

I am ok with this, what CSS do I need.

Thanks.

Hello,

There is no way to show the button there without changing the style. Then I suggest you create a preset in Theme Settings -> Settings preset with such a condition – https://prnt.sc/-M9_d1AwoIe_ save it and then edit the preset settings – https://prnt.sc/LPrCKpBrxrDh and in Product archive -> Product styles -> and set Quick view design and define in Custom CSS -> Mobile CSS area the below code:

.wd-product .wd-compare-btn {
    display: block;
}

.wd-product .wd-wishlist-btn {
    display: none;
}

Kind Regards

Hi,

I am not happy with any of the other style on mobile. the screenshot you first sent is now expired but I have made a similar screenshot for you. the compare button does not need to be at the top but can be as you first suggested by the view product button as shown in screenshot. How to do this for mobile.

Attachments:

You must be logged in to view attached files.

Hello,

In this case, use the below code, define the code in Theme Settings -> Custom CSS -> Mobile CSS area

body .wd-product.wd-hover-buttons-on-hover .wd-action-buttons {
    display: inline-flex;
}

.wd-product .wd-product-footer {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wd-product .quick-view {
    display: none;
}

https://prnt.sc/_wvADgmrYsOq

Kind Regards

Thank you this works perfectly

You are welcome!

In case you need any additional help, I’d be more than happy to assist you.

Have a good day!

Kind Regards

[Author]

Posts