- This topic has 21 replies, 3 voices, and was last updated 3 years, 4 months ago by
David.
-
AuthorPosts
-
September 26, 2019 at 12:47 pm #1019972
Alberto
Hello
I know this site is not developed in wordpress, but will it be possible to get something similar in the view of woocommerce products?
Below everything (before the footer), in the url.
Thank you in advance.
September 26, 2019 at 4:32 pm #1020074Tom
Lead DeveloperLead DeveloperHi there,
Just to confirm, are we talking about the products in the “Paquetes similares” section? I assume you’re wanting the overlay/slide effect?
Let me know ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 26, 2019 at 5:05 pm #1020084Alberto
Hi Tom.
Yes!
September 27, 2019 at 8:56 am #1020582David
StaffCustomer SupportHi there,
so this effect would it only be applied to the Related Products on the single product page?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 27, 2019 at 9:13 am #1020607Alberto
Hi David.
No. I need to see the product view too.
September 27, 2019 at 9:34 am #1020624David
StaffCustomer SupportTricky to do may have a few questions. First one thats real important: Are all your images the same size?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 27, 2019 at 9:36 am #1020626Alberto
The size of the images is not important, but it could be set so that all the thumbnails were the same size.
September 27, 2019 at 10:09 am #1020649David
StaffCustomer SupportDo you have a Site with your products in place so i can take a look?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 27, 2019 at 10:21 am #1020653Alberto
Currently not…
But I give you an example. This example is a slider (and it shouldn’t be) but it serves as a sample. (the first demo)
September 27, 2019 at 11:14 am #1020702David
StaffCustomer SupportLet’s try this.
First we need to add a wrapper around our title, price and button. Which will require two Hook Elements:https://docs.generatepress.com/article/hooks-element-overview/
Hook 1
Title: Open shop wrapper
Content:<div class="shop-item-wrap">
Please note the editor will add a closing</div>
you must remove this.
Hook: Custom Hook
Custom Hook field:woocommerce_shop_loop_item_title
Priority:9
Display Rules: Entire SiteHook 2
Title: Close shop wrapper
Content:</div>
Ignore any color warnings:
Hook: Custom Hook
Custom Hook Field:woocommerce_after_shop_loop_item
Priority:10
default
Display Rules: Entire SiteNow add this CSS:
@media (min-width: 769px) { .shop-item-wrap { background-color: rgba(0, 0, 0, 0.5); padding: 10px; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(0); transition: transform 0.3s; color: #fff; } #wc-column-container .product { position: relative; overflow: hidden; } #wc-column-container .product:not(:hover) .shop-item-wrap { transform: translateY(100%); transition: transform 0.3s; } }
Will require some tweaking
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 27, 2019 at 11:32 am #1020713Alberto
David.
First of all thank you very much for your help.
I just tried it on a local wp installation and it doesn’t work …
The images of each product and its title remain inside a dark gray container, that is, there is no opening or closing movement …
September 27, 2019 at 11:55 am #1020739David
StaffCustomer SupportHmmm… i added it to this test site – it needs some tweaking but the basics work:
https://floh.assemblewp.com/shop/
That link you provided didn’t have an image – but i would need to see the site to determine what the problem is.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 27, 2019 at 12:51 pm #1020799Alberto
David.
I just tried it on a production site and it works. Thank you! Spectacular!
The problem I have now is that the title and links are in black (which is the color selected for all system links?
How could I change the color to white so that only this color can be seen on this effect?
Thank you in advance!
September 27, 2019 at 1:30 pm #1020827David
StaffCustomer SupportAwesome ๐
So title and price this CSS:
h2.woocommerce-loop-product__title, .woocommerce ul.products li.product .price { color: #fff; }
Buttons for the product page only:
.woocommerce .products a.button { color: #000; background-color: #fff; } .woocommerce .products a.button:hover { color: #fff; background-color: #000; }
I suggest you include them within @media query so they only apply to the desktop.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 27, 2019 at 1:37 pm #1020829Alberto
Thanks a lot, David!
What I notice is that in the resolutions of tablets and phones the effect does not work. It only works on desktop resolutions …
-
AuthorPosts
- You must be logged in to reply to this topic.