Изображение продукта WooCommerce Наведите указатель мыши

Я создаю собственную тему для магазина одежды и установил плагин Woo-commerce. Но на странице магазина при наведении курсора на изображение продукта Woo-commerce мне нужна кнопка «Купить сейчас».

вот вид продукта по умолчанию от Woo-Commerce в моей пользовательской теме ------

введите описание изображения здесь

Но я хочу вот так при наведении ------------

введите описание изображения здесь

так что, пожалуйста, помогите мне кто-нибудь? я не мог найти способ на google.Thx


person Romi    schedule 09.12.2015    source источник
comment
Покажи свою работу до сих пор.?   -  person hemnath mouli    schedule 09.12.2015
comment
Я работаю на локальном сервере, но здесь вы можете получить аналогичную работу woocommerce @hemnath   -  person Romi    schedule 09.12.2015


Ответы (1)


Я пробовал этот код css, и он работает.

.woocommerce ul.products li.product a {margin: 0;position: relative;}
.woocommerce ul.products li.product a img {max-width: 100%;display:
 block;position: relative;}
.woocommerce ul.products li.product{overflow: hidden;}
.woocommerce ul.products li.product .product_details {opacity: 0;
-webkit-transform: translateY(100%);-moz-transform: translateY(100%);
-ms-transform: translateY(100%);transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s,opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;position: absolute;
bottom: 0%;left: 0%;background: #eee;color: #000;width: 100%;padding: 5px;}
.woocommerce ul.products li.product:hover .product_details {opacity: 1;
-webkit-transform: translateY(0px);-moz-transform: translateY(0px);   
-ms-transform: translateY(0px);transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s,opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;}
person Romi    schedule 27.01.2016