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

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

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

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

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

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

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

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

http://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;
}

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