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


обновлено: 2020-12-15 в теме: 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 2

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

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

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

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

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

    Сделал стиль 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;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  6. С НАЗВАНИЕМ ТЕМЫ НЕ РАБОТАЕТ!!! Нужно просто написать 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 напишу.

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