- This topic has 9 replies, 5 voices, and was last updated 2 months, 2 weeks ago by
Leo.
-
AuthorPosts
-
June 5, 2020 at 10:03 am #1315889
David
Hello
Can you tell me what file I need to edit to change the product list view in woocommerce…
http://185.20.51.60/~thebeehivelifest/shop/
I need to change it so the product title and price appear on hover of the image like this…
Help very much appreciated!
Thanks
DaveJune 5, 2020 at 8:10 pm #1316341Tom
Lead DeveloperLead DeveloperHi there,
You may be able to use CSS. Check this topic out: https://generatepress.com/forums/topic/woocommerce-overlay-titleprice-on-product-image/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 8, 2020 at 1:59 am #1318792David
Thanks Tom, that kind of worked – but it’s messed the layout up when it comes to the footer…
http://185.20.51.60/~thebeehivelifest/shop/
Plus the product images are overlapping on mobile view, what’s the best way to sort this?
Also is it possible to have the title and price sit in the middle rather than at the top on hover?
Thanks
DaveJune 8, 2020 at 6:52 am #1319115David
StaffCustomer SupportHi there,
try this method.
1. Add this function to place a DIV wrapper around the title and price:
add_action( 'woocommerce_shop_loop_item_title', function() { echo '<div class="product-summary-wrapper">'; }, 9); add_action( 'woocommerce_after_shop_loop_item', function() { echo '</div>'; }, 15);
2. Add this CSS to overlay our
product-summary-wrapper
on top of the image:.woocommerce ul.products li.product { display: grid !important; } .woocommerce ul.products li.product .woocommerce-LoopProduct-link, .product-summary-wrapper { grid-row: 1; grid-column: 1; } .product-summary-wrapper { z-index: 1; align-self: center; justify-self: center; background-color: rgba(0, 0, 0, 0.5); opacity: 0; } .woocommerce ul.products li.product:hover .product-summary-wrapper { opacity: 1; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 8, 2020 at 9:15 am #1319481David
Hi David
That has sorted the layout issue out, but the title and price appear underneath the image on hover.
Any ideas how to get them to center on top of the image?
Thanks
DaveJune 8, 2020 at 9:20 am #1319489David
StaffCustomer Supportupdate this CSS rule to include
!important
statement:.woocommerce ul.products li.product { display: grid !important; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 8, 2020 at 9:31 am #1319506David
Thanks David – that did the trick 🙂
June 8, 2020 at 10:37 am #1319603David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 10, 2020 at 7:45 am #1525530MÃ¥rten
Hey,
I used your code and changed to white background color. Is it possible to make the background color cover the entire product image?
November 10, 2020 at 9:40 am #1525703Leo
StaffCustomer SupportCan you link us to the page in question?
Feel free to open a new topic if you need to use the private URL field.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.