BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Wordpress » Не срабатывает lightbox в карточке товара woocommerce

Не срабатывает lightbox в карточке товара woocommerce

2016-10-10 / Вр:19:15 / просмотров: 1298

Вы не поверите! Над одним заказом интернет-магазина я ковырялся 5 дней, и вот, казалось, что все! Но, как только я подумал, что все, то было замечено, что на карточке товара перестал работать lightbox. То есть, вместо того, чтобы увеличить картинку на экране и затемнить задний вид фоном, картинка стала просто открываться в новом окне. Видимо, произошел какой-то конфликт с плагином или с кодами, которые я лично вставлял. Искать причину было лень, да и долго. Как же я решил эту проблему?

Откройте в админ-панели WordPress вкладку  «woocommerce» => «Настройки» => «Товары» => «Отображение»

Не срабатывает lightbox в карточке товара woocommerce

И в самом низу снимите птичку над пунктом «Активировать Lightbox для изображений товара»:

Не срабатывает lightbox в карточке товара woocommerce

Теперь скачайте и установите плагин «Responsive Lightbox»:

https://wordpress.org/plugins/responsive-lightbox-lite/

Далее откройте «functions.php» вашей темы и вставьте в самом начале сразу после символа «<?» вот такой код:

function df_woocommerce_single_product_image_html($html) {
$html = str_replace('data-rel="prettyPhoto', 'rel="lightbox', $html);
return $html;
}
add_filter('woocommerce_single_product_image_html', 'df_woocommerce_single_product_image_html'); // single image
add_filter('woocommerce_single_product_image_thumbnail_html', 'df_woocommerce_single_product_image_html'); // thumbnails

После проделанной процедуры все заработало!

В интернете можно найти и другие плагины lightbox для WordPress, если не подходит мной предложенный.

Пишу дополнение к теме.
Прошли сутки и я решил порыться в коде.
Я отключил плагин «Responsive Lightbox» и удалили код (выше указанный) с файла «functions.php».
Включил назад птичку над пунктом «Активировать Lightbox для изображений товара».
В CSS прописал вот такой код:

.pp_pic_holder.pp_woocommerce {
top: 20% !important;
left: 20% !important;
/* right: 0px !important; */
margin: 0 auto !important;
}

.ppt {
display: none !important;
}

div#pp_full_res img {
width: 300px;
height: auto;
}

Все заработало. Но это у меня так. Не знаю, поможет ли это вам.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

4 Ответов на комментарий - Не срабатывает lightbox в карточке товара woocommerce

  1. Александр

    Степа привет. Я как то сталкивался с такой фигней у лайтбокса. У меня на блоге стоял латбокс для увеличения картинок и всплывающих окон. Когда его ставил удалил все лишнии js файлы, и вроде все нормально пахало, но позже заметил точ такую же бяку, тоже открывалось в отдельном окне. У лайт бокса есть маленький js файл, ну это если весь его комплект скачать с официального сайта, вот его и нужно подключить и все будет путем, из за этого файла вот такая бяка и еще без этого файла не работает в IE. Честно уже не помню название этого файла, как вспомню дополню комент

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Привет, Саш. Было бы классно, если ты дополнишь комментарий. Я думаю читателям пригодиться эта ссылка на файл

    Ответить

  2. Alex

    не помогло

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    можно адрес сайта, посмотрю?

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки:

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 734
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4010