Return to previous page

Grid Hover Effect - by rj - on WordPress WooCommerce support

This topic has 10 replies, 3 voices, and was last updated 4 years, 3 months ago ago by Olga Barlow

rj

Participant

November 1, 2020 at 08:13

Hi

How can I set this hover effect on grid/list layout on shop page and carousels?

https://prnt.sc/vb2gtm

Its showing on Niche Market demo and I’m using default classic Xstore.

Please, contact administrator
for this information.

#257242 Copied Theme version: 7.0.2

9 Answers
Rose Tyler

Support staff

November 1, 2020 at 09:11
Hi,

Add the next code in Theme Options > Theme Custom CSS > Custom CSS for desctop:

.products-loop .product:hover, .carousel-area .product-slide:hover{ box-shadow: 0px 0px 10px 3px rgba(0,0,0,.1); z-index: 2; transform: translateY(-5px) scale(1.007); border-radius:5px; } .products-loop .type-product { padding-top: 15px; } .products-loop .content-product { margin-bottom: 15px; } .products-loop .product, .swiper-container .product-slide{ transition: all .2s ease-in-out; }

Regards
#257250 Copied
rj

Participant

November 1, 2020 at 10:01

Thanks so much!

Is it possible to keep fixed height and width of all the grids? so even if images are of different sizes or if swatches are not shown, the columns and rows are of same size?

#257260 Copied
Rose Tyler

Support staff

November 1, 2020 at 12:00
.main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product { display: flex; justify-content: center; } .products-loop .ajax-content, .products-loop { display: flex; flex-wrap: wrap; flex: 1; } .content-product { flex-direction: column; justify-content: space-between; display: flex; flex: 1; } .content-product .quantity-wrapper { margin-right: auto; margin-left: auto; } .swiper-container { display: flex; align-items: stretch; } .product-slide .product { display: flex; height: 100%; } .swiper-wrapper { height: auto; }

Regards
#257279 Copied
rj

Participant

November 1, 2020 at 12:41

Thanks agian! But after using this code, some images disappeared from home page carousel. I already tried to regenerate thumbnails under woocommerce tools and re-saved permalinks but it did not help.

Some more strange things happening on home page carousel. I have done image swap setting on hover but now on one image swap is working and on another image slider is showing.

Shop page is working fine though.

#257289 Copied

Olga Barlow

Participant

November 2, 2020 at 15:52

Hello,

The mentioned issue caused by the compatibility of some third-party plugin (badge plugin or something) with the image lazy loading option. So to Theme Options > Speed optimization > Image Loading Type > Choose the Default.

Regards

#257385 Copied

rj

Participant

November 5, 2020 at 08:47

Hi

Instead of disabling the lazy loading for whole website, I have disabled the lazy loading in product slider settings and now its working fine.

Please let me know how can I increase the height of all the product sliders including related product slider on single product page. You can see top border is hiding on hover.

https://prnt.sc/vdtto5

Also how can I change the related product slider on single product page to full width of the page?

Also on all sliders, the cart icon on hover is showing with text (buy now/ select options). But I want to show only icon like in my main shop page product girds.

Please contact administrator
for this information.

#257878 Copied

Olga Barlow

Participant

November 5, 2020 at 16:48

Hello,

1) Check the hover effect now.
2) We don’t have uption to make related products full-width, it fits the container width that you set in the Theme Options > General > Site width.
3) Check now.

Regards

#257981 Copied

rj

Participant

November 6, 2020 at 07:17

Hi

1. After you edited the CSS, first the hover was working only on product carousels but not in main shop page product grids. And now all of sudden its not working even on product carousels.

2. I tried to change site width from 1170 to 1980 but it was still same. Actually I want the whole content of single product page to full width. Can you please let me know how its possible?

3. The text is gone but the width of the cart button is still same. In main shop page, the width is same for all three buttons (quickview, cart and wishlist). Is it possible to keep same width in product carousels also?

#258064 Copied

Olga Barlow

Participant

November 6, 2020 at 12:30

Hello,

1) It seems that you removed the code. Check now.
2) Clear the CDN cache
3) Check now.

Regards

#258148 Copied
Viewing 10 results - 1 through 10 (of 10 total)