Hi Mike,

Your code works great!
I added some CSS to increase the padding between thumbnails and titles.

Now the last thing I need to achieve is to align titles vertically. You could find a mockup in private content.
Which code do I need to add?

Thanks a lot!

Hi Yigit,
Thanks for your reply.
Double the values works but it would need to create new thumbnails for images as soon as I would like to change them.
So I would prefer your first solution. It works but images are not correctly centered… How could I move them to the left?
Thanks a lot!

Hi Yigit,
Thanks for your reply.
It works fine for this specific image because it’s a square, but not for the other ones in my main menu…
In fact, I created special images sizes to make them the perfect size for my menu. That’s the reason why I added special image size in the code, like “250×250” or “300×327”.
So now, as you told me, I changed all my code to this one (in private content), but as you can see on the screenshot, other background images are not correctly resized so there are white borders on top and bottom.
How could I fix this?
Thanks a lot!

Hi Mike,

Thanks for your reply.

1) Your code works great! Thanks a lot!
Now how could I hide the product counter and the “Add to cart” button when product is “Available on backorder”?
And how could I modify “Read more” (on catalogue pages when product is out of stock), “Out of stock” and “Available on backorder” (both on product pages) texts?

2) Also, could you please help me with the second part of my previous message?

Thanks a lot!

Hi Victoria,

I spent many hours on this but I finally found a solution to achieve what I wanted.
But now I’m trying to do something more… Maybe you could help me for that ;-)

I would like to add borders to images ONLY. I did it with some CSS but there is a problem: borders belong to the the image, so they disappear on hover.

Do you have an idea?

Thanks a lot! :-)

Hi Ismael,

Thanks for your reply.

1) In private the link to the page of a product that is out of stock, exactly! I finally changed my mind and the design of it is ok for me, I’m sorry.
I added some CSS to define “Out of stock” text color to red, but if the product is “Available on backorder”, the text is red too but I would need it to be orange. I also would need to hide the product counter and the “Add to cart” button, when product is “Available on backorder”.
How could I do this?
Moreover, I would need to modify “Read more” (on catalogue pages when product is out of stock), “Out of stock” and “Available on backorder” (both on product pages) texts.
What do I need to add to achieve this?

2) For my shop, attributes are always different. So I applied them directly in the Edit Product page of each product, this is maybe the reason why there is no attribute on the Attributes page. Is it a problem if I proceed like this???
In private the link to an actual variable product page and an exact mockup of what I would need to achieve. In fact the same design as a simple product page, only with the option selector between price and “Add to cart” button.
If it could help, I already added some CSS to adjust product counter and “Add to cart” button on simple products:

.single-product-summary form.cart {padding-top: 14px !important;}
#top div.single-product-summary .quantity input.plus, #top div.single-product-summary .quantity input.minus,#top div.single-product-summary .quantity input.qty {
	line-height: 10px !important;
	width: 33px !important;
	height: 33px !important;
	margin-bottom: -10px !important;
}
#top div.single-product-summary button[name=add-to-cart] {padding: 10.4px !important;}
div.single-product-summary form.cart div.quantity {min-width: 50px !important;}

Maybe it would only need to add a tiny piece of code to apply it to all pages of all types of products…

Thanks a lot!!

Hi Victoria,
Thanks for your answer.
I added a zoom on hover effect to images and if you try it, you can see that images overflow is hidden on top, left and right of the images, but not on their bottom. That is what I would need to resolve.
Thanks a lot!

Hi Mike,
It works perfectly!
Thanks a lot!

Hi,
Any help on this?
Thanks a lot!

Hi again ;-)
I’m now sooooooo close to achieve what I wanted!
I only need one tiny little thing…
If you could have a look to my menu in private content, I only need to hide overflow at the bottom of the images during animation.
Could someone help me?
Thanks a lot!

Hi Jordan,
Thanks a lot for your reply!
Your code works great for the first part, but which code do I need to add if I want the button and the prices to not be horizontally centered?
To be clear, what I would need to do is this: https://imgur.com/rZP0h2M
Best regards.

Hi Victoria,
Thanks a lot for your reply.
Your code is working great!
I’m really annoyed with the last step. Is there really no way to add animation to the images in mega menu? :-(

Hi Jordan,
I have two questions more about this price filter:
– what is the code to adjust the padding between the price slider and the “Filter” button?
– what is the code to adjust the padding between the price slider and the prices?
Thanks a lot!

Ok.
Thanks Victoria!

Hi Victoria,

Thanks for your reply!

I finally found another solution, trying to customize this mega menu and it solves the issues and does exactly what I want, using this code:

#top #header #menu-item-2080 .avia_mega_div > .sub-menu.avia_mega_hr {
	padding: 10px!important;
}
#menu-item-2080 .sub-menu {
	padding: 10px!important;
}
#top #header #menu-item-2080 .avia_mega_div > .sub-menu > li {
	padding-left: 10px!important;
	padding-right: 10px!important;
	padding-top: 10px!important;
}

I also disable the vertical lines using this code:

#header .avia_mega_div .units {
    border-right-width: 0;
}

But now I would like to do some customizations more:
1) Disable the horizontal line
2) Increase a little bit the padding between images and texts
3) And add a zoom hover effect on images

Could you help me on these points?

Thanks a lot!