How to fix that?

I added my custom css for single product in archive page. Check the video: https://youtu.be/zvTRsYFPxJk

Hi,

Products in the grid and carousel can’t be styled identically because they have different HTML structures. Side paddings on the product archive grid layout can’t be removed because they will break grid layout.

Kind Regards

I mean shifting other product after hover on single, how to block items in product list for block it shifting? Watch at the video

Hi,

Content shifts because you have added padding-bottom on the hover which increases the height of the overall product. Try to remove this padding to stop product shifting on the hover.

Kind Regards

But i need that for better UX, how can i block other product for stability when i hover other product?

I have this padding without hover, look at picture

Attachments:

You must be logged in to view attached files.

But i need that for better UX, how can i block other product for stability when i hover other product?

Other products can’t be “blocked” if the height of previous items was changed. Height was changed because of the use “padding-bottom” value. Unfortunately, a design that you want to achieve is cant be done with only CSS code. It requires customizations that are out of our theme support scope.

As an alternative, we recommend you to use “Show summary on hover” product style, which has a similar hover design.

Kind Regards

I want to something like that product list design, i can’t do that just with your theme and css?

Our theme already has a product list view design (https://woodmart.xtemos.com/shop/?opt=list_view)

Your question is not clear enough. Please, explain in detail what do you mean by “product list design”, attach some screenshots.

Kind Regards

[Author]

Posts