Archived topic
Display Secondary Image on hover on homepage Prime
19 replies · Started by Bart on July 30, 2019
In Site library the Niche demo-example-site displays a secondary image on hover on the homepage. Is it possible to have the same hover-effect on the home page of the prime variant of your site library?
Hi there,
yes, if the product has multiple images and you check Display secondary image on hover in Customizer > Layout > Woocommerece
Yes, this (= check Display secondary image on hover in Customizer > Layout > Woocommerce) works on the category pages, but not on the homepage (Prime-demo). See: https://vruchtbareaarde.nl/webwinkel/ (Do not look at the 'mess', I am still in the construction phase)
I think the latest version of the Woo Blocks plugin broke the secondary image hover function. Niche uses the Shortcode Block and the built in woocommerce shortcodes:
https://docs.woocommerce.com/document/woocommerce-shortcodes/
David, this WC shortcodes overview gives me some useful explanation about shortcodes in WC, thank you, but ... do I understand you correctly that -- to get the secondary hover effect working on my homepage after the latest update of the WC Blocks plugin -- I need the actual shortcode that keeps the hover effect working in Niche? And if "yes", what is this shortcode?
That link i provided above gives all the necessary shortcodes. The two i used were:
[product_categories number="0" parent="0" limit="3" columns="3"]
and
[products limit="4" columns="4"]
I was looking for shortcodes like [‘product_secondary_image’]... Instead ... the solutution for the not-hovering of product-images on the WC homepage is in these two shortcodes???? If yes, where to insert these two shortcodes?
The two shortcodes i provided above ( and those in the link ) will automatically output the same styles as the Woo Shop with secondary hover image.
Remove the Woocommerce Blocks and add the above shortcodes using a Short Code Block.
No difference! Only a secondary image hover effect on the category pages, not on the entry-homepage
Do you have any other woo related plugins or custom functions added to the site?
In Simple CSS I added to the frontpage the following css: .wc-block-grid.has-5-columns .wc-block-grid__product {
flex: 1 0 calc(20% - 16px);
}
And this is a printscreen of all installed plugins: https://app.box.com/s/tnsafpz3eimgipzmcygb686ccjzb31f8
Apart from the Woocommerce Blocks i can't see that any of the plugins would effect it.
What happens if you a. Disable the woo blocks plugin and b. create a new page with just the shortcodes on?
I guess I made a mess of the permalinks, because the category page "films" (https://vruchtbareaarde.nl/webwinkel/?page_id=11) has a different type of URL than the categorypage "tijdschriften": https://vruchtbareaarde.nl/webwinkel/?product_cat=tijdschriften.
In "films" the hover effect is lacking (and the font-size of the button is small); in "tijdschriften" the hover-effect is normal.
I guess ... the changed permalinks will be the reason of the hover-problems?
Permalinks printscreen 1: https://app.box.com/s/ym9u4hx6m2zpn2nd8ulhwlxzokllztls
Permalinks printscreen 2: https://app.box.com/s/xli4lg5ll41i3lj31ol4s25q2d31ve6t
I wouldn't think that would effect it, you could try rebuilding the links to see if it resolves it. What happens if you use the shortcode instead of the woo block plugin on that new page?
I was comparing the problem-pages with the non-problem-pages... all problem-pages are listed as "pages" in the menu, while the non-problem pages as "category"... So I tried to set the problem-pages "films" and "home" as categories ... But in the meantime I checked all the GP display and dashboard options and still can not find a way to qualify a page as category... Where is the blind spot? What do I overlook?