возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2024-02-13 в теме: WooCommerce и WordPress
Запросто с WordPress создание и продвижение сайтов ATs media

Обновление woocommerce пропал lightbox – галерея – решаем проблему

Новое обновление WooCommerce 3.0 принесло много сюрпризов владельцам магазинов на woocommerce, и особенно тем, которые используют кастомные темы (впрочем, не только).

Это обновление wooc является глобальным – крупным ! и имя этой новой обнове присвоили экстравагантное – “Бионические бабочки” “Bionic Butterfly”.

В статье рассмотрим такой (как его называют – баг) хотя это вовсе и не баг ! когда владельцы shops обнаруживают, что в админпанели “настройки” “товары” “отображение товаров” пропал чекбокс подключения галереи lightbox и более того, те админы, которые используют лайтбокс, с горечью обнаруживают на страницах магазина полную “поломку” внешнего вида прежней галереи: и коли так, то – нынче решим эту проблему “поломки”… подключим в своей теме необходимые (новые) модули zoom, lightbox и slider и добавим требуемые им стили css.

Приступим: акуна матата…

 


 

 

 

 

Стоит ли обновлять woocommerce N-?

 

 

 

обновление woocommerce пропал lightbox - галерея

 

 

 

 

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

 

 

Однако, перед всяким крупным обновлением woocommerce, следует как следует подумать, и особенно тем владельцам, которые мало смыслят в механике плагина!

 

 

В среде пользователей wooc так прямо и говорят, что – пока обновляться не советуют.

 

 

 

Лично я всегда обновляюсь… Как? сначала на тестовом сайте, чтобы выловить “новшества” и подготовиться… и уж потом окончательно – на рабочем…

 

 

 

То, что галерея wooc перестала правильно работать – я обнаружил сразу:

 

 

…основная фотка товара была как и прежде на своём месте, однако все фотографии галереи сдвинулись под основную и потеряли вид миниатюр. Словом, никаких модальных окон и пр. атрибутики всяких лайтбоксов…

 

 

 

Но – по порядку!..

 

 

Например, одно из изменений функционала в ядре wooc такое:

 

 

 

Создавай, читай, обновляй и удаляй… объекты и хранение данных – CRUD

 

 

 

Такие классы CRUD в версии 3.0 wooc несут в себе фундаментальные изменения в работе с объектами данных в ядре – это товары, заказы, купоны, клиенты и пр.

 

 

Всё это открывает новую дорожку в развитие плагина и его функциональных возможностей (попросту всякие эстетические и функциональные удобства для пользователя) …

 

 

Об этих изменениях я много рассказывать не буду, цель статьи несколько иная… Однако тем, которые заинтересованы в близком знакомстве с обновой, могут замечательным образом прочитать подробную инструкцию разработчиков – ссылку дам чуть ниже.

 

 

А пока поближе разберёмся и посмотрим как работает

 

 

 

 

Важно: в ЭТОМ посте помещена большая подборка полезного кода для работы с магазином на Woocommerce.

 

Условные теги для работы с woocommerce

 

 

 

 

 

новая товарная галерея woocommerce

 

 

 

 

Обновив плагин до версии 3.0 и далее, увидим такие возможности:

 

 

  1. Посетители получит доступ и к лупе, и к зумированию (lightbox) – мне понравилась примочка)
  2. Более новый подход к отображению галереи – интуитивнее для пользователя: к примеру, клик на миниатюру обновит главное изображение товара, – lightbox открыт в этом случае не будет (лайтбокс откроется при клике на иконку “лупа” или если изображение загружено по соответствующим размерам… картинки отдельного товара)).
  3. Также изменены “ручные” действия посетителя в целом: листаем… чтобы просматривать иллюстрации товаров галереи; щипком увеличиваем фото (проведите по экрану вверх-вниз) чтобы приблизить или уменьшить картинку… похожие действия совершаются в некоторых фото-редакторах.
  4. Открытие картинки в режиме lightbox на мобильных устройствах, отныне отобразит фото в его реальном (зауженном) размере, который как правило крупнее того, который показан на странице галереи.

 

 

 

Вот мы и подошли к главной цели статьи:

 

 

Для того, чтобы избежать неполадок лайтбоксов в кастомных темах (не дефолтных WordPress-темах) – необходимо включить новый функционал галереи, используя для этого – add_theme_support().

 

 

 

Посмотреть примерную работу галереи – ну, как в принципе должны гармонично играть между собой миниатюра и сопутствующие картинки товара, причём – внимание!! – даже если картинки разнокалиберные (т.е. разных размеров) –
взглянуть можно у меня в шуточном разделе Скрипт кайпера-квайзера
Скрипт кайпера-квайзера – Вашему вниманию скриптовалютный кайпер-квайзеропилогон-миилафон… будет интересен тем мастерам, которые привыкли работать головой, но не руками…
(тест)…

 

 

 

 

как включить обновлённые функции галереи woocommerce

 

 

 

 

Добавляем краткое описание (Description) к товару в каталоге WooCommerce.

 

 

 

 

Для того, чтобы подключить функционал (ну, чтобы в вашей теме обеспечить поддержку) новой галереи woocommerce, нужно прописать в файл функций functions.php вашей активной темы на постоянное место жительства такие строки кода, изменив “вашатема” на имя своего шаблона:

 

 

 

ко сведению:

нечто подобное мы проделывали в описании этой статьи, когда обеспечивали поддержку wooc в сторонней теме.

 

 

/** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/
function вашатема_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'вашатема_setup' );
/** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/

 

 

 

Как понимаете, этот код замечателен тем благом, что можно по своему желанию включить/исключить предлагаемый функционал… просто комментируя (отключая) строки.

 

 

Однако…

 

 

Внимание: нужно знать !

код в таком варианте не всем владельцам магазинов подходит: всё в зависимости от названия (имени) шаблона…

Возможные решения описаны замечательно в комментариях… так что повторяться не стану… Пройдите, почитайте…

 

 

Далее…

 

Если пройтись по ядру плагина, то – обнаружим несколько добавочек в папке assets…

 

 

wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.css

 

и…

 

wp-content/plugins/woocommerce/assets/css/photoswipe/photoswipe.css

 

 

 

Вот всю эту прелесть и нужно подключить посредством вышепоказанного кода!

 

 

Но ведь появятся лишние мета ссылки в шапке сайта, воскликнет внимательный читатель!?

Кое-что появится! – ответит писатель))

 

 

И непременно нужно сказать:

Загружаются стили и т.п. плагина только на странице где реализуется галерея… на иных страничках магазина, к примеру – при оформления заказа и подобных – никаких лишних загрузок и ссылок !! (картинка кликабельна)…

 

 

 

 

обновление woocommerce пропал lightbox

 

 

 

 

Т.е. если взглянуть на исходный код … скажем, витрины – никаких лишних “мета” не будет. На мой взгляд, неплохой подход разработчиков…

 

 

 

 

обновим стили css wooc в своей теме

 

 

 

 

Тем админам, которые переносили стили css плагина в свой шаблонПолезно почитать, ибо работа со стилями CSS важнейшее обстоятельство, с которым приходится иметь дело администратору. Организация стилей – должна быть в шаблоне, но не в плагине: целесообразнее во всех отношениях. Подборка статей о WOOC
Как перенести в свой шаблон стили css плагина woocommerce
, теперь нужно добавить обновлённые CSS из нового:

 

 

путь такой: /wp-content/plugins/woocommerce/assets/css/woocommerce.css

 

 

Почему это обновление css необходимо сделать: а потому что если оставить “старые” стили, то не избежать некоторых накладок отображения галереи, например – значок “Распродажа” будет прятаться за картинку товара и пр. и пр. А посему я добавил некоторые свойства/значения – к примеру z-index:9;

 

 

 

Все необходимые нам нынче css стили я подготовил, и вам только останется добавить их в свой файл css активного шаблона, например, так:

 

 

.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
position:absolute;
top:1.4em;
left:.2em;
font-size:2em;
z-index:9;
width:36px;
height:36px;
background:#fafffa;
text-indent:0.5%;
border-radius:100%;
box-sizing:content-box;
text-decoration:none;
}

 

 

и ещё…

 

 

.woocommerce div.product div.images .flex-control-thumbs li{
width:25%;
float:left;
margin:2px 0 0;
list-style:none;
opacity:.8;
}

 

 

и…

 

 

.woocommerce div.product div.images .flex-control-thumbs li{
opacity:9;}

 

 

ну и…

 

 

.woocommerce div.product div.images .flex-control-thumbs{
overflow:hidden;
zoom:1;
margin:0;
padding:0;
}

 

 

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

 

 

 

 

как эпилог:

 

Тем администраторам, которые по неосторожности обновились и претерпели разлад в работе галереи – но пока не готовы править файлы своей темы для восстановления работоспособности магазина и его галереи, – возможно поступить мудро (как говорил Винни-пух) – откатить обновлённый wooc на прежнюю его версию…

 

Откат можно выполнить воспользовавшись плагином WP Rollback – скачайте из репозитория и установите… в настройках всё ясно и просто: описывать не буду… однако замечу: с его помощью возможно откатить любое обновление на любую же прежнюю версию плагинов вообще!

 

Однако, коли возникнут трудности, спрашивайте в комментариях…

 

 

 

Как работает новая галерея, можно посмотреть здесь

 

Полное описание перехода (обновления) на иные функциональные широты тут или тут.

 

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…


...город веб мастеров Михалика.ru © - запросто с WordPress - ATs media squad

 

 

Подписаться на life-News ATs media squad
SendPulse - NoSpamX || ATs media ©

 

 

 

 

В WordPress 5.5 добавлена XML-карта сайта — wp-sitemap.xml – подробнее в видео.

 

 

 

 

 

 

Турбо Страницы Яндекса (на канале – видео о том, как удалить эти Турбо страницы из индекса Я.

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


  1. Уффф, спасибо братишка!!! Только по поводу “Тем админам, которые переносили стили css плагина в свой шаблон, теперь нужно добавить обновлённые CSS из нового” у меня не работали превьюхи – я не переносил css! Но скопировав их в css шаблона – все заработало!

    Ответить - Alex

    • Здравствуйте, Alex!

      Но скопировав их в css шаблона — все заработало!

      Ну и как говорится – славно!! что заработало!
      Тебе спасибо, дорогой товарищ !! за комментарий и за то, что не прошёл с великим молчанием мимо, но поделился мнением.
      Вместе мы многое сможем: берегите себя… и заходите впредь))

      Ответить - Михаил

      • Вот и еще один магаз поправил)))

        Ответить - Alex

        • …с Вас процент, Alex! …в виде небольшого бочёнка сладкого спирта!
          ))

          Ответить - Михаил

  2. Здравствуйте, у меня что то не так получается, когда вставляю тия своей тему на код вообще нет никакой реакции, а если не впишу то снизу галерея отображается нормально но плюс еще в оригинальном размере появляется одна фото, с боку изображении товара и прячет описание.

    Ответить - Андрей

    • Здравствуйте Андрей!
      Насколько я понял по Вашим пояснениям проблему, то, как Вы говорите (никакой реакции css) – а нужно чтоб реакция css была! В стилях, вероятно, казус )
      Вы попробуйте ещё раз пояснить мне суть Вашей “нестыковки”.
      Понимаете, когда, например – “изображение прячет описание” – то как правило закавыка в css: стили организуют положения элементов.
      p|s – это если я правильно понял.

      Ответить - Михаил

  3. Добрый день, вы можете свой эл. адрес прислать, я ссылку скину на мой сайт.

    Ответить - Андрей

    • День добрый!
      У Вас мой адрес есть в письме, которое приходит к Вам в оповещении о комментариях…

      Ответить - Михаил

  4. Добрый день!
    После обновления и подключения галереи, как вы описываете, все начинает работать, но….
    Почему то пропадает Title на всех страницах сайта и вместо него просто адрес страницы.
    А, соответственно, как только отключаю галерея – Title возвращается.
    С чем это может быть связано?

    Ответить - Олег

    • Здравствуйте Олег!
      Связок может быть множество… У Вас какая тема: wooc или адаптированная под..?

      Почему то пропадает Title на всех страницах сайта

      “на всех страницах” – это странно!
      В статье описан принцип обновы касаемо преимущественно сторонних тем, в которых многие (скажем так, важные для владельца структурные и стилистические) файлы W перенесены в шаблон.
      …и с темой может быть связано!

      Ответить - Михаил

      • Тема Woocommerce – Alpha store.
        Вот и мне крайне не понятно почему так себя ведет title.
        Его, вроде как, никаким краем не задеваем, а по факту какая-то необъяснимая для меня, пока, вещь получается.
        Может есть еще какой ни будь способ добавить галерею?

        Ответить - Олег

        • Нужно тему смотреть…
          Или попробуйте банально отключать компоненты обновления по очереди… zoom, slider и т.п. если Ваша тема обновлена (это сделать просто в файле функц) ! и такой метод исключения поможет выявить причину (по крайней мере узнать точно: вина ли в “самой галереи” или в связках компонент обновы, каких-нить js) То, что пропадает title (имя) на всех страницах – это странно.
          Конфликт где-то или ошибка! У Вас дочерняя тема используется?
          Попробуйте переустановить чистый WOOC.

          Может есть еще какой ни будь способ добавить галерею?

          способы-то есть: например плагин. Но..! лучше бы сначала выявить причину настоящего конфликта, иначе закавык в будущем не избежать.

          Ответить - Михаил

          • Дописал к Вашим строкам еще

            // Add Title Tag Support
            		add_theme_support( 'title-tag' );
            
            //В итоге получилось:
            
            add_action( 'after_setup_theme', 'alpha_store_setup' ); 
            function alpha_store_setup() {
                add_theme_support( 'wc-product-gallery-zoom' );
                add_theme_support( 'wc-product-gallery-lightbox' );
                add_theme_support( 'wc-product-gallery-slider' );
                // Add Title Tag Support
            		add_theme_support( 'title-tag' );
            }

            И все Title восстановились!)

            Ответить - Олег

            • Интересно!
              Однако в этом случае получается то, что, возможно, на сайте (в теме) есть и ещё какие-то нестыковки – проверьте!

              p|s
              Я удалил несколько ссылок на Ваш сайт – оставил одну!
              Я планирую сделать свой блог dofollow, а посему допускаются только авторские блоги – описано в правилах комментирования: мне кажется, это не должно Вас (и пр. коллег) обидеть…

              Ответить - Михаил

  5. Спасибо.
    Очень помогла статья.

    Ответить - Владимир

    • Не за что, Владимир!
      Заходите и впредь)
      Город веб мастеров – Михалика.ru ©

      Ответить - Михаил

  6. Пытаюсь вернуть лайтбокс. В функшн вставляю указанную функцию с изменением имени темы и без… сайт вылетает… не пойму что не так делаю

    Ответить - Роман

    • Здравствуйте Роман!
      Что сказать: где-то допускаете (или допустили) ошибку…
      Для начала, после изменения кода статьи (на имя Вашей темы) и прописки его в файл функций, пробуйте комментировать по одной строке кода (подключаемые модули). …чтобы выявить конфликтный параметр.
      Далее посмотрим…

      Ответить - Михаил

  7. Добрый день. Подскажи как убрать нумерацию миниатюр?

    Ответить - Владимир

    • И Вам доброго дня! Владимир, я не понял о какой конкретно нумерации миниатюр речь…

      Ответить - Михаил

  8. тут ссылка

    Ответить - Владимир

    • Посмотрел по Вашей ссылке…
      Элемент ol (касаемо миниатюр) править… Как-нить обозначить так можно:

      .woocommerce-product-gallery .flex-control-nav {
      width: 500px;
      display: flex;
      flex-direction: row;
      justify-content: space-around; /* с этим значением и свойством поработать */
      text-decoration: none;
      color: #ccc; /* или так - заштриховать нумер... */
      list-style-type: none; /* или так - уборка нумерации */
      }


      ЛИБО типа:

      ol .flex-control-nav .flex-control-thumbs {
      list-style-type: none;
      }

      А вообще нужно файлы переносить в шаблон и HTML поправить на свой вкус.

      Ответить - Михаил

      • Спасибо вам огромное:)
        Немного не додумался до такого:)))

        Ответить - Владимир

        • Не за что… Владимир!

          Ответить - Михаил

  9. Добрый день! Делаю всё по вашей инструкции, но в итоге изображения вместо галереи выстраиваются друг под другом. Сверху большое, снизу несколько маленьких.

    Ответить - Sahar

    • И это логично в некоторых случаях… Читайте ответ к комментарию чуть выше…
      Обратите, например, внимание на
      display: flex;
      В стилях вся закавыка обычно подобных случаев)
      ps| пасиб за ссыль на Ваш сайт

      Ответить - Михаил

      • Михаил, спасибо что подсказали! Проблема в том, что я не очень умею применять этот параметр и вообще новичёк в этом всём)) То есть его нужно просто добавить в стили?
        В url ссылка на сайт в котором эта проблема (стили исходные стоят).

        Ответить - Sahar

        • Вы сначала перенесите обновлённые стили галереи WOCC (если не переносили) в свою тему – и затем размеры миниатюр и пр. организуйте…
          ol:last-child
          например: width: 200px;
          Получится типа такого https://prnt.sc/f9qa6c и уж потом… дальше-дальше… править.
          Нужно стили шаблона видеть онлайн… чтобы реально помочь…

          Ответить - Михаил

  10. Здравствуйте я не понял а куда это вставлять: Далее…

    Если пройтись по ядру плагина, то — обнаружим несколько добавочек в папке assets…

    wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.css

    и…

    wp-content/plugins/woocommerce/assets/css/photoswipe/photoswipe.css

    Вот всю эту прелесть и нужно подключить посредством вышепоказанного кода!

    Ответить - Артем

    • Здравствуйте Артём!
      …я для примера показал пути, файлы, которые добавлены в ядро wooc для обработки обновлённых модулей галереи, которые и нужно подключить КОДОМ, добавив в свой файл функций.
      А чтобы галерея (например) правильно заработала в соответствии с обновой – нужно добавить свежие стили css в свой файл стилей, – примеры которых я тоже привёл в статье…

      Ответить - Михаил

      • Все понял. Спасибо большое)

        Ответить - Артем

  11. Михаил, здравствуйте!
    Я внес данные, которые Вы указали в файл functions.php с названием своей темы. Сохранил, обновил страницу и теперь мой сайт стал недоступен(HTTP ERROR 500). Подскажите, как вернуть обратно сайт?

    Ответить - Андрей

    • Здравствуйте! Андрей!
      Всё банально и просто: сотрите внесённые правки в файле функций (в админке), или – зайдите на хостинг (где физически “лежит” сайт), откройте functions.php и “откатите его” – как было у Вас до правок.
      Сайт откроется.
      Вы, вероятно, где-то совершили “опечатку” – ошибку в коде…

      Ответить - Михаил

      • Спасибо большое, все получилось!

        Ответить - Андрей

        • Ну и замечательно, Андрей!
          Обращайтесь, коли что…
          p|s
          …а вот ссылки всяких магазинов у меня в блоге запрещены, уж пардоньте великодушно, дорогой товарищ.
          …не заинтересовав сей сайт – ну никак нельзя! хыть тресни прям))

          Ответить - Михаил

  12. Большое спасибо. Галереи заработали :)

    Ответить - Елена

    • Здравствуйте Елена! …и пожалуйста..!
      …однако ссылочку я Вашу убираю: не положено здесь магазинам.
      Скоро блог открою дофф – а значит…
      Прошу простить великодушно))

      Ответить - Михаил

  13. Здравствуйте Михаил, подскажите почему у меня установилось как то через зад, сначала сделал все как у вас написано, магазин слетел, решил попробовать на оборот, не удаляя ни чего из css файла, удалил код из functions.php, магазин заработал, решил опять поставить код в functions.php, неожиданный результат ВСЕ ЗАРАБОТАЛО!!! ПОЧЕМУ???

    Ответить - Руслан

    • Здравствуйте Руслан!

      ВСЕ ЗАРАБОТАЛО!!! ПОЧЕМУ???

      …это Вы у себя или у меня спрашиваете…)

      Ответить - Михаил

  14. у вас, я не понимаю почему

    Ответить - Руслан

    • Элементарно! где-то совершили ошибку.
      Попробуйте вновь повторить как делали изначально, и узнаете… методично)
      А у меня нигде не написано, будто б стили нужно убирать…

      Ответить - Михаил

  15. я нашел проблему в файле functions.php, прописываю свою тему НЕ РАБОТАЕТ, оставляю ваша тема РАБОТАЕТ, не могу понять почему так происходит, может подскажите

    Ответить - Руслан

    • О которой теме идёт речь ?? Какая моя тема работает, и какоя Ваша – не работает?
      Я правда затрудняюсь Вас понять…
      Какая проблеммма в функциях у Вас?

      Ответить - Михаил

  16. вот так не работает:

    /** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/
    function Responsive Mobile_setup() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
    }
    add_action( 'after_setup_theme', 'вашатема_setup' );
    /** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/

    вот так работает:

    /** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/
    function вашатема_setup() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
    }
    add_action( 'after_setup_theme', 'вашатема_setup' );
    /** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/
    Ответить - Руслан

    • У Вас: Responsive !! Mobile_setup() – ПРОБЕЛ ! ТАКОГО БЫТЬ НЕ ДОЛЖНО!
      add_action( 'after_setup_theme', 'вашатема_setup' ); – и здесь укажите вашу тему…

      В Вашем случае имя темы нужно писать как-нибудь так: function responsive-mobile_setup() { только нужно НИЖНЕЕ подчёркивание… тире – иначе ошибка !

      Ответить - Михаил

  17. ясно, спасибо, попробую найти точное название темы

    Ответить - Руслан

    • Так я имя Вашей темы у Вас же на сайте и посмотрел… (в коде, имеется в виду))
      Попробуйте так смело и написать: как я показал… вот имя Вашей темы: responsive-mobile …или уберите имя.т вообще пока…

      Ответить - Михаил

  18. ага я тоже нашел, вставил responsive-mobile НЕ РАБОТАЕТ, поставил обратно вашатема РАБОТАЕТ, ни чего ни понимаю

    Ответить - Руслан

    • значит у Вас есть какие-то добавочные файлы темы и ф.ф…
      Либо ошибку где-то всё-таки делаете…
      Должно работать так…

      /** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/
      function responsive-mobile_setup() { /** у Вас дефис, нужен нижний дефис **/
      add_theme_support( 'wc-product-gallery-zoom' );
      add_theme_support( 'wc-product-gallery-lightbox' );
      add_theme_support( 'wc-product-gallery-slider' );
      }
      add_action( 'after_setup_theme', 'responsive-mobile_setup' );
      /** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/
      Ответить - Михаил

      • А вообще в функциях не допускается имя функций и пр. и пр. с ТИРЕ - нужно бы НИЖНЕЕ разделительное/соединительное _ тире
        responsive_mobile_setup
        …или пока уберите имя темы вообще…

        Ответить - Михаил

  19. сейчас попробую

    Ответить - Руслан

    • Вы шутите, что ли))
      Тему переименовывайте… и делоф.

      Ответить - Михаил

  20. с подчеркиванием пишет
    Страница www.veyp.ru не работает

    Сайт www.veyp.ru пока не может обработать этот запрос.

    Ответить - Руслан

  21. у меня на сайте одна тема может из-за этого

    Ответить - Руслан

  22. убрал название темы вообще заработало

    Ответить - Руслан

  23. Михаил, скопировал ваши стили как указано, но ничего совсем не изменилось. Миниатюр нет, а все фото выстраиваются как и раньше друг под другом. Тема от Woo, Argentum. Возможно ли вообще привести в нормальный вид на этой теме?

    Ответить - Влад

    • Не важно какая тема ! важно – каким образом приводить в нормальный вид!
      Понимаете, Влад, в статье даны принципиальные общие стили… подгонять под свой шаблон имена селекторов ПРИХОДИТСЯ в большинстве случаев. А также описаны определённые условия файловой конструкции (структуры) магазина – взаимодействие шаблона с WOOC, скажем так)
      Да ! привести в нормальный вид вашу тему Argentum, конечно же, можно! – я попробовал у вас там (на сайте, в Онлайн) что-то поправить – получилось на скорую руку скомпоновать фотки.!.

      Ответить - Михаил

  24. А можно кодик у вас попросить, и адрес вставки? Это тестовый сайт.

    Ответить - Влад

    • Какой “кодик”? …коды в статье все рабочие… Но как я и говорил – нужно поправлять в соответствии со своим шаблоном.
      Я у вас предварительно потестировал средствами разработчика – всё “ОК”: остальное править только в самом шаблоне и пр.

      Ответить - Михаил

  25. С НАЗВАНИЕМ ТЕМЫ НЕ РАБОТАЕТ!!! Нужно просто написать setup!

    function setup() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
    }
    add_action( 'after_setup_theme', 'setup' );
    Ответить - Рамис

    • Об этом Вашем варианте уже говорилось в комментариях…
      С названием темы ВСЁ РАБОТАЕТ!! только дело в том, что названия тем у всех разные… чаще имена шаблонов не соответствуют стандарту _ так-то вот…
      Можно, конечно, и так… однако – необходимо кое-что понимать, используя подобный вариант.
      …Скоро, возможно, статейку по этому поводу с setop напишу.

      Ответить - Михаил

  26. а у меня в теме этот код уже есть. а галерея не работает. WC еще второй версии. что сделать чтобы заработала галерея фото в товаре?

    Ответить - роман

    • Здравствуйте Роман!
      WC обновляйте.!.

      Ответить - Михаил

      • Спасибо. Ответ видел давно, но не чего было написать. После обновления на следующую версию перестали показываться параметры товара. Пришлось восстановить копию.

        Ответить - роман

        • перестали показываться параметры товара

          – и такое может быть.
          Нужно искать ответы в прежних и обновлённых файлах WC.
          Разберитесь отчего пропали “параметры” – это может быть банально из-за свойств CSS, ибо и цсс в новом wooc здорово обновлены: “стили” могли сдвинуться… но это, как понимаете, предположение.
          Посему целесообразно обновляться – вовремя! и, соответственно, отлавливать текущие ошибки…
          Но, не отчаивайтесь: Ваш вариант ошибки вполне себе решаем…

          Ответить - Михаил

  27. Ваше решение отлично помогло, спасибо! Хотел бы отметить, что информация на сайте подана с душой, и это подкупает… Но дизайн сайта 2000-х годов отталкивает – лично мне кажется хорошей идеей сделать редизайн, ресурс получился бы крутой!

    Ответить - Григорий

    • Спасибо, Григорий, за отзыв с душой))
      Насчёт дизайна, я с Вами, пожалуй, соглашусь… Лично я никак не могу оторваться от своих прежних взглядов на визуализацию… а, соответственно, и убеждений…
      Однако не совсем понятно (мне во всяком случае) что Вы имеете в виду конкретно: если всякие js свистелки и пузырялки, то это – моя душа не очень-то и принимает… А всё остальное, как подтверждает мировая статистика, – есть только личные предпочтения юзера и вряд ли как-то существенно сказываются на продажах… (если считать целями сайтостроения, например, эффект продаж))
      Не так давно с коллегами запустили, так сказать, кампанию редизайна этого блога – возможно, что нибудь исправим.
      Спасибо…

      Ответить - Михаил

  28. Здравствуйте! Спасибо большое за помощь! Все получилось! Однако… Как выяснилось пропало главное меню((( Подскажите что я сделал не так..

    Ответить - Андрей

  29. Здравствуйте

    Сделал стиль css wooc по вашему примеру. Потыкал параметры нашел как двигать миниатюры от главной картинки, а какой параметр будет развозить миниатюры между собой (они у меня сейчас в плотную)

    Ответить - Евгений

    • Здравствуйте Евгений!
      Это вам придётся поработать немного…
      Например с селектором:

      .woocommerce div.product div.images .flex-control-thumbs li {width: 25%;
          float: left;
          margin: 3px 2px 0 0; /* здесь управляйте всеми ЧЕТЫРЬМЯ значениями параметров */
          list-style: none;
          opacity: 9;
      }

      В общем, после разводки нужно ещё и размер основной картинки подогнать под новую стилистику миниатюр… (чтоб всё симметрично было)

      Ответить - Михаил

  30. Дружище, спасибо! Сделал свою тему, помог только твой вариант. Успехов!

    Ответить - Александр

    • Пожалуйста, Александр! ну и здорово, что помог…
      И вам удачи…

      Ответить - Михаил