Как отобразить цену при наведении на товар в WooCommerce

В некоторых темах, адаптированных по WooCoomerce, вы можете увидеть, что название товара и его цена отображаются на цветном фоне при наведении на товар, и при этом само изображение товара становится блеклым. В сегодняшней статье мы покажем как достичь такого эффекта, если в вашей теме не предусмотрена такая возможность. Потребуется выполнить несколько несложных шагов.

1) Добавляем необходимые хуки в файл functions.php

Код ниже просто группирует название товара и цену в один элемент /div, чтобы мы могли работать с ними одновременно. Просто добавляем код в свой файл functions.php.
s.php

// Alter produt loop individual products

add_action( 'woocommerce_before_shop_loop_item_title', 'new_product_defaults_wrap_open' , 20 ); //открываем
add_action( 'woocommerce_after_shop_loop_item_title', 'new_product_defaults_wrap_close', 40); //закрываем

function new_product_defaults_wrap_open() {
  echo '<div class="product-details">';
}
function new_product_defaults_wrap_close() {
  echo '</div><!--/.product-details-->';
}

2) Добавляем необходимые стили в файл custom.css

Вторым, и заключительным, шагом будет добавление код в таблицу стилей вашей темы (custom.css, style.css или любой другой файл таблицы стилей).

/*Код ниже просто сделает скрытой область цена-название и задаст ей фон. Учтите, что вам придется изменить фон и высоту для того, чтобы адаптировать код под цветовую схему вашего сайта и высоту товара. Но сначала вставьте код как есть, а потом уже начинайте его адаптацию*/

.products .product .product-details {
      position: absolute;
      background: rgba(119, 203, 109, 0.95);
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #f7f7f7;
      padding: 1.618em;
      text-align: left;
    opacity: 0;
    height: 167px;
    filter: alpha(opacity=@opacity * 100);
  -webkit-transition: all ease 0.4s;
  -moz-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
      -o-transition: all ease 0.4s;
      transition: all ease 0.4s;
  }

  ul.products li.product:hover .product-details {
  filter: alpha(opacity=@opacity * 100);
  opacity: 1;
  }

  ul.products li.product a img:hover {
  opacity: 0.9;
  }

Если вы начинаете разбираться с WooCommerce, то не забудьте посетить нашу рубрику WooCommerce, где мы публикуем материалы специально по тематике магазинов на этой платформе.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.