Return to previous page

Product content effect – no background on hover to show quick view button

This topic has 9 replies, 2 voices, and was last updated 5 years, 10 months ago ago by Olga Barlow

Stefan

Participant

July 24, 2019 at 12:59

Hi support!

I have a few of questions about product content effect and quick view option on shop page. It show no background any more on product hover.

Question #1 – default option
Since one of the last updates (maybe 5.0) at shop page … while hover a product image its showing the QUICK VIEW button but no dark transparent background behind as usually. What happend? How could I get back this transparent dark background behind the QUICK VIEW button?

Question #2 – grid builder
So, I build up new grid element. Everythings fine. But the quickview has a short delay. (In this moment your xstore default QUICK VIEW button would be showing a loading circle to give a feedback to the user. Maybe it calls a short javascript.)
… back to my grid element! Is it possible to call this javascript inside a button out of grid builder with “On click code” function of the button? Then grid builded buttons would be able to give a loading feedback to the user too.

Hope you can help.

Thanks in advance!

Please, contact administrator
for this information.

#217644 Copied Theme version: 5.4 WooCommerce version: 3.6.5

8 Answers

Stefan

Participant

July 24, 2019 at 15:07

You can delete my request! Sorry! Now, I realize now it works already with VC Grid Builder, but the icons color was pretty dark so I didn’t see it. Thank you and sorry for the confusion!
The product buttons in option template in grid builder contains already a responding loading icon after clicking quick view button and covers so the delay to the moment quick view appears finally.

#217650 Copied

Stefan

Participant

July 24, 2019 at 15:29

But perhaps you can show me how to color this small icon of grid builder’s product button template appearing after clicking Quick View button. Because the icon is still pretty dark on a dark background so its hard to see.

#217652 Copied

Stefan

Participant

July 24, 2019 at 17:32

I find a solution! The browers onboard dev tool did show me the javascript event and created CSS classes. So it was about handling SVG graphics with CSS. In my case:

.et-loader circle.loader-path { stroke: #fff;}

At first I thought it would be about background-color or color instead of CSS atrributes stroke, stroke-weight .. and so far. Maybe that helps anybody sometimes.

Conclusion: Xstore’s predefined grid builder elements are great and work properly.

Thanks a lot!

#217668 Copied

Olga Barlow

Participant

July 24, 2019 at 17:37

Hello,

Sorry for the late reply.
So, do you still need any help from our side?

Regards

#217671 Copied

Stefan

Participant

July 24, 2019 at 17:46

The next problem comes up … with grid builder media queries. Below screen width 760px the grid on shop page got still 2 columns. It should be one. Maybe it can switch later at 640 or 480pixels.

Please contact administrator
for this information.

#217672 Copied
Olga Barlow

Participant

July 25, 2019 at 18:23
Hello,

1) Remove the following code from the child theme style.css http://prntscr.com/ok0lda
2) Add the following code to make products 100% width for mobile

@media only screen and (max-width: 480px){ .products-grid .product { width: 100%; } }

Regards
#217747 Copied
Stefan

Participant

July 26, 2019 at 13:58

Yeah, I thought already about something like this.

Thank you!

#217785 Copied

Olga Barlow

Participant

July 26, 2019 at 15:52

Hello,

You are welcome.

Regards

#217799 Copied
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘product content effect – no background on hover to show quick view button’' has been successfully resolved, and the topic is now closed for further responses

Product content effect – no background on hover to show quick view button

Recent Community Activity

Jack Lee started a topic

Marius started a topic

LVRB replied in

DonDigital started a topic

Helpful Topics

Browse by popular tags

Explore our best WordPress WooCommerce Themes collection