- This topic has 3 replies, 2 voices, and was last updated 3 years, 4 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
November 13, 2020 at 12:42 am #1529375melvin wang
Hi Dear,
My objective : I would like to have the same effect as below to the plugin display [WCPS]
I am able to achieve that [using normal woocommerce not plugin] with the below code
.woocommerce ul.products li.product a.button { transform: translateY(0); width: 100%; opacity: 0; transition: all 0.4s; } .woocommerce ul.products li.product:hover a.button, .woocommerce ul.products li.product:hover .price { transform: translateY(calc(-100% - 10px)); opacity: 1; } .woocommerce ul.products li.product .price { opacity: 1; transition: all 0.4s; } .woocommerce ul.products li.product:hover .price { opacity: 0; transform: translateY(calc(-100% - 10px)); }
I would like to have the same effect on this area with the plugin used. I’ve tested with a amendment but failed to achieve that.
Could you assist me to let me know the correct CSS I shall use?
Thank you.
Regards,
MelvinNovember 13, 2020 at 7:58 am #1530065DavidStaffCustomer SupportTry this CSS instead:
/* Style WCPS button */ .wcps-container .owl-item .wcps-items-cart a { width: 90%; display: block; text-align: center; padding: 5px; margin: 20px auto 0; } @media(min-width: 769px) { .woocommerce ul.products li.product a.button, .wcps-container .owl-item .wcps-items-cart { transform: translateY(0); width: 100%; opacity: 0; transition: all 0.4s; } .woocommerce ul.products li.product:hover a.button, .woocommerce ul.products li.product:hover .price, .wcps-container .owl-item:hover .wcps-items-cart, .wcps-container .owl-item:hover .wcps-items-price { transform: translateY(calc(-100% - 10px)); opacity: 1; } .woocommerce ul.products li.product .price, .wcps-container .owl-item .wcps-items-price { opacity: 1; transition: all 0.4s; } .woocommerce ul.products li.product:hover .price, .wcps-container .owl-item:hover .wcps-items-price { opacity: 0; transform: translateY(calc(-100% - 10px)); } }
Note – i have added the hover effect inside an @media query so it only applies to larger devices. You don’t want the affect on mobile as it doesn’t have a hover state and may lead to your buttons never being displayed.
November 13, 2020 at 8:08 am #1530080melvin wangHi David,
It works well. Thanks.
I appreciate it very much.
Regards,
MelvinNovember 13, 2020 at 8:10 am #1530087DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.