-
AuthorPosts
-
August 14, 2017 at 7:08 am #838461
Hello!
I am trying to reverse the overlays on the products, so that the product name doesn’t show until hover, as well as add sliders to product category pages.
See example: Trying to recreate this: http://deboulle.com/p-category/fine-jewelry/fine-jewelry-pearl-collection/
Thanks in advance!
- This topic was modified 7 years, 4 months ago by a3brown4.
August 16, 2017 at 7:57 pm #840061Hey a3brown4,
Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
BasilisAugust 16, 2017 at 9:04 pm #840081Hi Basilis-
But this is an Enfold option? It isn’t something that Woocommerce has by default… meaning that it should be something that was specified by the theme, so it should be customizable. If it was a Woocommerce styling issue, that would be something that I can see a developer was needed for, however this is in regards to the Enfold theme.
It is a menu option in the Enfold Shop Options: http://imgur.com/a/OndWD
August 17, 2017 at 5:25 am #840204Better yet, here is the EXACT look I am trying to achieve in your own theme demo! See here: http://kriesi.at/themes/enfold-minimal-photography/
The on hover effect on the gallery is exactly what I am trying to get for the product grid…
August 19, 2017 at 5:49 pm #841331Hi a3brown4,
I got a 404 on bridal collection. Which is the page you need help with? Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaAugust 21, 2017 at 2:03 am #841807Hi Victoria-
I was able to achieve my desired outcome on the product grids with a plugin, but it does not allow me to use the plugin features on the related products at the bottom of a single product page. See here: http://new.deboulle.com/product/de-boulle-collection-black-diamond-swirl-ring/
August 21, 2017 at 2:33 am #841811On other question: On mobile, my product pages are all pushed to the left of the screen. Is there a way to fix this?
Thank you for any and all help!
- This reply was modified 7 years, 4 months ago by a3brown4.
August 23, 2017 at 6:02 am #842867Hi,
Thank you for the screenshot.
Did you add any css modifications? Please check the css codes and make sure that the curly braces are closed properly. The product layout is not getting the correct css media queries so it’s possible that there are invalid css modifications in the Quick CSS field. Temporarily, you can add the following css code to fix the product layout on mobile view.
@media only screen and (max-width: 989px) { /* Add your Mobile Styles here */ .single-product-summary { width: 100%; } .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product { width: 50% !important; } }
Best regards,
IsmaelAugust 23, 2017 at 10:13 pm #843304Hi Ismael-
Awesome! Thanks for your help!
Any ideas on how to reverse the dark overlays for the related products and the padding?
Thanks again!
August 24, 2017 at 1:11 pm #843467Hi,
What do you mean by “reverse”? How did you add the dark overlays? Try to use css media queries so that the modification will only affect the desktop view.
@media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ }
Move the “dark overlay” css modification inside the css media query above.
Best regards,
IsmaelAugust 24, 2017 at 6:19 pm #843644Hi Ismael-
I didn’t modify the overlays on the products; it was a setting in the Shop Options in the Enfold Admin menu. I am looking to have them show without the overlay, but show the overlay on hover, similar to the photos in your Enfold Photography demo.
Thanks again,
-AJAugust 26, 2017 at 5:25 am #844278Hi,
Did you check the css modifications? Again, the css media queries for the products are not being applied correctly, probably because of the invalid css modifications in the QuicK CSS field. If you want to remove the overlay, try this css code.
#top #wrap_all .av-product-class-minimal-overlay a .inner_product_header { opacity: 0; }
Best regards,
IsmaelSeptember 1, 2017 at 9:26 pm #846988Hi Ismael-
Thanks for the last CSS, it worked. However, I still would like the Product name and Price to show on hover.
I double check all the Quick CSS I have used, but there isn’t anything corresponding to the product grid or images that I have added. Any idea how to add the overlay only to “on hover” events?
I have added my quick css for reference.
Thanks for the great support!
- This reply was modified 7 years, 3 months ago by Ismael.
September 4, 2017 at 8:46 am #847577Hi,
There is an invalid css code.
/* WOOCOMMERCE PRODUCT OVERLAYS */ (HOLD)..related.products { display: none !important; }
Remove the part.
(HOLD).
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.