Пропали картинки превью у товаров в WooCommerce. Как восстановить и почему пропали?

Question

[huliganov]

Неожиданно пропали все картинки-превью в карточках товаров.
Т.е. поле где картинка есть, по нажатию на область - открывается полноразмерная картинка, но самих превью в карточках товаров нет, ни основного изображения товара, ни галереи.

Как исправить?

Answer 1

[Павел]

Woocommerce обновляли? в 3-ей версии новая галерея товара. Картинка появляется по загрузке страницы. Смотрите ошибки в консоли.. Возможно jQuery выделывается. В разметке картинка же присутсвует? и 404 не выдает на загрузку миниатюры?

UPD. У вас не отрабатывает один из скриптов woocommerce, который делает галерею непрозрачной
Возможно в functions.php темы отключены встроенные скрипты вукомерса

Пропишите в стилях этому блоку opacity:1!important;

Comments

[huliganov]

Как найти этот блок?
У меня

opacity: 0

в стилях только в одном месте -

#carousel .slides li.flex-active-slide .overlay{
opacity: 0;

Никакие

woocommerce-product-gallery

найти не могу ни в теме "retailer" ни в родительской "storefront".

[Павел]

huliganov: Так допишите.. а еще лучше в файлах темы не менять ничего, а зайти в админку - Внешний Вид -> Настроить и в кастомайзере выберите "дополнительные стили" и напишите туда

.single-product div.product .woocommerce-product-gallery {
    opacity: 1 !important;
}

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

[huliganov]

Павел: да, заработало, только всё послетало, всё разметка.
Дополнительные картинки галереи огромные как и главная картинка товара... Чтото с темой страшное случилось.

[Павел]

huliganov: Как я и писал выше. В новой Woocommerce 3 совсем другая галерея. и разметка у неё совсем другая. А тема писалась по Woocommerce v2.* Тут два варианта, или дописывать все самому(стили) или ждать обновления темы( если вы в ней ничего не меняли) Пропишите для доп изображений width: 25%, например

[huliganov]

Павел: ДА, косяк с темой. Временное решение - откатил тему на предыдущую версию.
Буду ждать или очередного обновления темы или буду думать о переходе на другую тему просто.

Спасибо за уделённое время и помощь в поиске проблемы.

[Павел]

huliganov:
Для оформления css стилей галереи Вам необходимо использовать следующие классы:
.woocommerce-product-gallery – Контейнер галереи. Этот класс также содержит класс, который указывает на количество колонок миниатюр, например .woocommerce-product-gallery--columns-4
.woocommerce-product-gallery__wrapper – Контейнер слайдера
.woocommerce-product-gallery__image – figure, который содержит само изображение
.woocommerce-product-gallery__trigger – ссылка-триггер для активации лайтбокса (иконка с лупой)
.flex-control-thumbs – если используется функционал слайдера, то Flexslider создает навигацию из миниатюр в ol с этим классом

Чтоб активировать новые фичи галерии (сейчас у вас даже лайтбокс не работает) нужну в functions.php добавить поддержку 3 новых фич, например так:

add_action( 'after_setup_theme', 'yourtheme_setup' );
 
function yourtheme_setup() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}

Новая галерея выглядит, примерно так https://youtu.be/ialMKuaVHm8

[Павел]

huliganov: можете отметить решение еще

[huliganov]

Павел: как активировать новые фичи галереи - понятно. Это просто.
Как использовать классы вообще не понятно.

[Павел]

huliganov: писать для них css стили) вы, в принципе, и так можете открыть код страницы и увидеть какие классы там используются.

[huliganov]

Павел: этого я не умею :-(
Где бы почитать поподробнее?

[Павел]

huliganov: та где угодно) всевозможных курсов по "основам верстки" хватает.. посмотрите на ютубе

Answer 2

[Site Developer]

Как исправить?

Если с хостингом всё нормально и картинки загружены в медиатеку, а "пропали" - физически, то поможет https://wordpress.org/plugins/regenerate-thumbnails/

Comments

[huliganov]

Пробовал, второе что попробовал после отключения плагинов.
В посте выше выяснили что какой то косяк с темой.

[Site Developer]

huliganov: тогда отметь ответ maxxannik -а как решение.

[huliganov]

Site Developer: тогда уж скорее ответ Павел.

Answer 3

[huliganov]

Woocommerce 3.0.6, кстати может после обновления и глюкануло...
В разметке есть, 404 нет.

"Ошибки в консоли" - это где? Консоли всего WordPress? Не вижу или не понимаю где смотреть.

Comments

[Павел]

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

[huliganov]

Павел: извините, впервой здесь. Буду комментировать.
В общем проблема в теме. Выбираю другую тему - нормально. Вот уже думаю, может перенастроить тему и всё... хотя я первоначально вроде на "Retailer" остановился...
Сайтик... одно название. Пожалуйста: сметана.рус

[Павел]

huliganov: обновил ответ