Request for Custom CSS and Custom Page Template for Product Tags

Thanks for the help again.

One more thing can we add an eye icon for the quickview product option instead of the search icon in product grids or carousel.

Nevermind I did it using custom css.

Now I want to show both the cart and quickview icon for mobile devices, right now it is showing only cart icon.

Hello,

Use the code below for help:

body .wd-buttons :is(.wd-quick-view-icon,.wd-compare-btn) {
    display: block;
}

Kind Regards

Okay that worked. But also I want the cart icon on mobile device to be like the button it displays on desktop version, like the Select options thing. Help me get the custom css for this please.

Guys need a response on this one.

[Luke Nielsen]

Hello,

Try to use the code below for help, define the code for the Mobile CSS area:

body .wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop {
    width: 100%;
}

body .wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop span {
    display: flex;
}

body .wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop:before {
    transform: translateY(100%);
}

body .wd-add-btn-replace .add-to-cart-loop:hover:before {
    transform: translateY(0) translateZ(0) !important;
}

https://prnt.sc/Hpp0pAzk6-d4

Kind Regards

• This reply was modified 1 month, 2 weeks ago by Luke Nielsen.

What if I want to show the button only on product hover instead if making it sticky. Can we do that ?

Also the size of the button is too big. We want to make it small and in floating style.

Hello,

I suggest you create a preset with such a condition – https://prnt.sc/hE4BdASBVBpF then in its settings change the product style – https://prnt.sc/IFT-5FxMa3Ww so in such a way you can make another product design on mobile devices.

Kind Regards

But in theme setting there no option to set a particular product styles for mobile devices only.

Hello,

It’s possible through the presets, if you use such a condition – https://prnt.sc/hE4BdASBVBpF

https://xtemos.com/docs-topic/theme-settings-presets/

Let me know the result.

Kind Regards

I set the preset and everything but still I couldn’t achieve the same layout as desktop.
The select options button should appear only when it is hovered.

Also you didn’t provide me css to make them smaller, the text and top and bottom padding.

Hello,

Replace the above code with the below one:

body .wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop {
    width: 100%;
}

body .wd-product.wd-hover-quick .wd-add-btn .add-to-cart-loop span {
    display: flex;
}

.wd-product:hover .wd-add-btn{
    transform: translateY(0) translateZ(0);
}

.wd-product .wd-add-btn {
    transition: all .2s linear;
    transform: translateY(103%) translateZ(0);
}

Paste it into the Mobile CSS area. Clear the cache and recheck the issue.

Kind Regards

Can you look at the Dropdown mega menu for Brands ?
I have set up HTML templates and assigned the html to that particular dropdown but it is being cut and not full. So what is the right settings to achieve it ?

NEED RESPONSE PLEASE

Hello,

Sorry for the delay.

Please update access to the admin panel – https://prnt.sc/IqVPIP4ePVfR

I await your response.

Kind Regards

Shared with you the updated credentials.

Hello,

The full-width menu will not work for the dropdown menu items and for the vertical menu – https://prnt.sc/OgMuFeQGbu2F

So if you want to apply the full-width menu for the Brand item, remove those child menu items, then set the design as Full width: https://prnt.sc/Uv2-CB-udQFO , and define the HTML Block, as a result you will have something like this – https://prnt.sc/O7ifnYtA_3mB

Kind Regards

Okay we understand the full width menu can not be implemented. We opted for the drop down menu instead and in dropdown menu it is not showing all content and the drop down is not being scroll able.

Check the attached image.

Attachments:

You must be logged in to view attached files.

Hello,

You need to create an HTML Block with the “Extra menu List” element – https://prnt.sc/3yn-EM35SVJ3 then assign it to the menu item and enable scroll like shown in the image – https://prnt.sc/_2a_-PIEZAOj then you will be able to use scroll in such a menu item – https://prnt.sc/PWw5TMaT38cW

Kind Regards

[Author]

Posts