Я хочу изменить изображение продукта при наведении курсора в WordPress WordPress - PullRequest
Новая
       38

Я хочу изменить изображение продукта при наведении курсора в WordPress WordPress

0 голосов
/ 23 апреля 2020

Я пытаюсь изменить имидж своих товаров при наведении курсора на woocommerce в wordpress !!! Я попробовал некоторые плагины, которые я видел как Woocommerce Product Image Flipper & Magni Image Flip для Wocommerce , но они по какой-то причине не работают, и я попробовал решения, которые вы предлагаете здесь, в некоторых похожих вопросах .

Так вы знаете, что другой плагин бесплатный или нет, мне все равно, или вы знаете, может быть, другое решение с CSS, может быть, я не знаю,

Я использую

  • Версия Wordpress: 5.3.2
  • Тема Wordpress: Flatsome
  • Версия Woocommerce: 3.9.2

Спасибо за помощь и извините за мой английский sh:)

Ответы [ 5 ]

1 голос
/ 27 апреля 2020

ок @ st3ph3n92 у меня работает !!! Я просто пишу custom css для 10-20 продуктов, которые у меня есть каждый день, так что пока все хорошо !!! Теперь в будущем я надеюсь, что есть плагин для этой работы ^^

Еще раз спасибо за вашу помощь @ st3ph3n92

0 голосов
/ 24 апреля 2020

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

Мне удалось решить эту проблему, отключив плагин Autoptimize. Я не знаю, если вы используете тот же плагин, но, возможно, мой ответ поможет вам.

0 голосов
/ 24 апреля 2020

Спасибо St3ph3n92 за ваш ответ. Могу ли я изменить этот код на что-то подобное ??? 

.product-image {
  height: 770px;
  width: 1155px;
  border: none;
  margin: 0 auto;
  background-image: url("img1");
  background-size: contain;
}

.product-image:hover {
  background-image: url("img2")
}
<div class="product-image"><div>

Я имею в виду, что я хочу что-то более автоматическое c, потому что у меня более 700 продуктов, поэтому я не могу вставить собственные URL-адреса для каждого !!! Мне нужен код, поэтому при наведении моего основного изображения продуктов смените второе изображение из галереи продуктов

Еще раз спасибо за ваш ответ !!!

0 голосов
/ 24 апреля 2020

@ N. Мар, да, пользовательский URL, который я использовал, был только в качестве примера. С background-image: url("img2") это выберет img2, если это та же папка, что и ваш CSS файл. Однако, если ваши изображения хранятся в отдельной папке, например, «images», CSS может быть background-image: url("images/img2").

. Здесь есть сообщения StackOverflow о путях к папкам, которые могут быть весьма полезны: Что означает «./» (точка sla sh) в терминах HTML пути к файлу?

Поскольку вы используете WooCommerce, я представляю, как вы Изображения хранятся немного по-другому. Эта статья может пролить некоторый свет на это: https://enviragallery.com/where-does-wordpress-store-uploaded-images/

Если вы хотите, чтобы это было автоматизировано c в Wordpress, вам нужно будет использовать PHP. Проблема в том, что вы не можете использовать PHP в CSS. Вместо этого вам необходимо добавить встроенные стили или в заголовок темы html (в отличие от отдельной таблицы стилей), а затем использовать PHP для ссылки на изображение. Это немного сложнее. Здесь есть еще один пост Stackoverflow: CSS фоновые изображения в WordPress

0 голосов
/ 23 апреля 2020

если у вас есть доступ к CSS, вы можете попробовать установить изображение в качестве фона для div, в котором оно находится. Затем вы можете использовать селектор :hover, чтобы установить новое фоновое изображение.

Вы можете увидеть это в CodePen здесь: https://codepen.io/St3ph3n92/pen/BaopGQx

Или запустить этот фрагмент: 

.image-holder {
  height: 300px;
  width: 300px;
  border: 3px solid black;
  margin: 0 auto;
  background-image: url("https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
  background-size: contain;
}

.image-holder:hover {
  background-image: url("https://images.unsplash.com/photo-1514218953589-2d7d37efd2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")
}
<div class="image-holder"><div>

Надеюсь, это поможет.

...