Натяжка на WooCommerce. HTML2WC. Часть #8.3. Архивы: карточка товара

Артем Абрамович

Меня зовут Артем Абрамович и я являюсь фрилансером-вордпресером. Занимаюсь настройкой и редактированием сайтов созданных на CMS WordPress. Это основная моя специализация, есть еще несколько работ, которыми я занимаюсь, но обо этом вы можете более подробно узнать из моего портфолио.

75 комментариев к “Натяжка на WooCommerce. HTML2WC. Часть #8.3. Архивы: карточка товара”

  1. Привет, стоит ли использовать wp для им канцелярских товаров( много позиций )?

    Ответить
    • Привет! Почему нет, главное хост нормальный использовать

      Ответить
    • Max Frost есть шанс заказать у Артема)
      онлайн сьемку. Это ж кайф – магазин растет в эфире.
      Плюс будем брейншторм устраивать в комментах

      Ответить
  2. Артем приветсвую.

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

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

    Интересно не толтко натянуть что придумал какой-то троечник, а решить реальную задачу начиная с архитектуры живого сайта. Категории, теги, фильтры, меню…

    Ответить
    • Да вот же, уже сам не рад что такой шаблон выбрал) Ну ничего, еще десять тысяч ведер и золотой ключик будет наш…
      Вот если бы среди зрителей найдется спонсор такого курса, это было бы лучше))

      Но идея мне нравиться, как сделать бюджетный магаз, будут думать.

      Ответить
    • Как обычно на следующей неделе, но уже будет сложно) Бум быстрый просмотр делать на аяксе

      Ответить
    • Годный контент. а то до этого пытался сделать интернет магазин на опенкарт потом на php , но сейчас сроки горят и решил на вордпресс за пилить.
      А то годного контента нет все 2015 видео и уже почти все не актуальные.

      Ответить
  3. Здравствуйте, подскажите пожалуйста, как избавиться от надписи «Просмотреть корзину», возникающей после добавления товара в неё.
    И как избавиться от многоточия в пагинации?
    Можно ли это сделать без display?

    Ответить
    • Доброго! Конечно можно, только кодить придется. ну или плагин искать, благо под Вуку их много на разные случаи

      Ответить
    • Смотря что считать завершением. По моим прикидкам еще 7-8 видео будет

      Ответить
  4. Артем, у тебя полноценный курс получился, даже круче чем у Сокирке, только тут контент бесплатный, а у него бешеных денег стоит, но правда там он фреймы разбирает. Хз у маеня по вукомерсу пробелы были, я из твоих уроков все понял как работает. Вот бы отдельная серия по фрейму юнисон была бы, крутой фрейм, на нем последнее время сайты делаю, очень нравится в отличие от всяких редуксов

    Ответить
    • Спасибо. Курс еще не закончен, надо еще несколько вещей сделать)
      По фреймам надо отдельно курсы делать. Тем более по Юнисону, больно большой фрейм

      Ответить
    • Еще удобно, когда на вукомерсе собираешь тему, использовать плагины под типа “What The File” или его аналоги, ориентироватся по структуре более удобно, в админ баре сразу видно какой файл надо редактировать.

      Ответить
    • Прикольный плагин, надо по тестировать его в ближайшее время

      Ответить
  5. Артём, добрый день.Спасибо за видео курс!
    В этой серии на 5:53 добавили фильтр на функцию ‘post_class’ с целью добавить классы к li от обёртки шаблона. И действует фильтр только в архиве …а как реализовать это ,что бы наши классы цеплялись так же и при выводе товаров или категории через шорткод?

    Ответить
    • Добрый! Хороший вопрос…
      Надо шорткоды смотреть, там могут быть свои фильтры, если есть вообще
      А так можно задать атрибут class в самом шорткоде

      Ответить
    • WPRUSe · Финты WordPress атрибут класс добавит класс к диву-обертке от вукомерца…
      Я уже сделал финт ушами(в шорткоде хуков нет),если эту фунцию 5:53 добавить без условий и проверки прям в шорткоде,тогда сработает.
      Я так сделал.

      Ответить
    • Да неее…я не правильно выразился,когда писал : “прям в шорткоде”!
      Не в файле вуки,где заданы шорткоды, а в том участке кода где мы возвращаем шорткод.Допустим мне на главной нужна категория товаров => возвращаем шорткод =>

      И если надо,то можно прям тут добавить фильтр и тогада класс цепляется лишкой шорткода=>вот так я сделал=>

      Файлы вуки я не трогал руками…только хуками,фильтрами и функциями…

      Ответить
    • Хм, походу код не полный, выложите код на pastebin.com Интересно будет глянуть

      Ответить
  6. Извиняюсь за возможно глупый вопрос, но можно ли в файле content-product.php заменить <li > просто на ? post_class формирует много ненужных классов, которые по сути и не нужны, а так все аккуратненько получается. Я попробовал, вроде работает… Или это только до первого обновления? Хотя этот файл мы же перенесли из плагина в нашу папку темы, обновления не должны повлиять. Чреваты ли чем-нибудь такие замены? Спасибо за ответ.

    Ответить
    • Можно конечно, но могут быть проблемы с другими плагинами под WooCommerce. Многие используют эту функцию для добавления и удаления классов. Но формально можно и убрать

      Ответить
  7. я у себя в магазе просто все хуки карточки повырубал и собрал в 1й функции карточку заново, повесил эту функцию на хук woocommerce_before_shop_loop_item получилось строк 20-30 кода, вроде бы легче и читаемей чем все хуки перековыривать, так можно делать или это чревато?

    Ответить
    • Можно, просто я туплю иногда) Мне такой способ и в голову не пришел.

      Ответить
    • спасибо, я благодаря вашей серии уроков почти допилил магазинчик, карточки/архивы ну и далее принцип понятен

      Ответить
    • Все верно, главное принцип понять, а дальше все гораздо проще

      Ответить
  8. Подскажите, пожалуйста, каким образом выводится описание категории?

    Ответить
  9. Добрый день, Артем. Спасибо за уроки, очень помогают. Может Вы знаете плагин для изменения пользователем, на странице архива, количества выводимых записей,
    такого типа (показывать по: 15 30 45). Если нет плагина, то подскажите в каком направлении копать в коде.

    Ответить
    • Добрый! Есть речь про WooCommerce то есть готовый плагин есть в репозитории Woocommerce Products Per Page называется

      Ответить
  10. Здравствуйте , простите что постоянно задаю вопросы . Но у меня перед стоит . Хочу сделать , перерыл все папки но смог найти . Использовал вот этот код
    add_filter(‘loop_shop_columns’, ‘loop_columns’);
    if (!function_exists(‘loop_columns’)) {
    function loop_columns() {
    return 4;
    }
    }
    Но меняется только вот эта часть . Есть ли какие нибудь идеи ?

    Ответить
    • А что еще должно меняться? Если надо ul на div изменить, то это только файлы изменять loop-start и loop-end

      Ответить
    • @Финты WordPress получается мне нужно 4колонки сделать. И когда делаешь все равно в 3 колонны. Потому что перед ul стоит .

      Ответить
    • Насколько помню, этот див по верстке добавляется. Мы его через хуки добавляли

      Ответить
    • Если используется underscores + woocommerce, тот эта обертка добавляется в их файле inc/woocommerce.php

      Ответить
  11. Добрый день. Подскажите как масштабировать картинку в карточке товара, чтобы все карточки были одного размера и картинка не обрезалась ?

    Ответить
    • Добрый! Простыми средствами никак. Или скрипт отдельный писать или стилями задавать высоту

      Ответить
    • Ну не верстальщик, тема то из тырнетов взята и кто там ее делал никому неизвестно. Но сделана кривенько

      Ответить
    • @Финты WordPress Когда тот кто ее делал начнет программировать, то и верстка очень вырастит. Так же, как и дизайнеру стоит немного знать верстку, чтоб не малевал непонятные рюшечки, которые потом верстать полдня) p.s. а курс хороший, почти заканчиваю. Спасибо

      Ответить
  12. 5:55 – здесь мы к карточкам товаров мы добавили col-md-4, и сетка построилась, т.к. это bootstrap 3. Сейчас bootstrap 4 на флексах, нужно добавить обертку с “row”, как это сделать? И второй вопрос – почему нельзя привязавшись к имеющимся классам WC, на флексах сделать карточки магазина, а нужно именно цепляться за хуки и фильтры?

    Ответить
    • Дак там есть row в общей обертке списка. Технически и 3-й и 4-й бутстрап классы используют одинаково.
      Можно и к классам Вукомерса привязаться, только тогда зачем готовая верстка?

      Ответить
    • Bootstrap 3
      .row {
      margin-left: -15px;
      margin-right: -15px;
      }

      Bootstrap 4
      .row {
      display:-ms-flexbox;
      display:flex;
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
      margin-right:-15px;
      margin-left:-15px
      }
      В вашей верстке (этого урока) ‘row’ не наблюдается, и все построилось за счет float: left; у колов. А в 4м бутстрапе ‘row’ обертка с display:flex; иначе не построится. Тут координально разные подходы. В 3ем колы строятся в ряд, а в 4ом роу строит этот ряд. Возможно я ошибаюсь, прокомментируйте пожалуйста.
      ————–
      Нашел способ вставить row, переопределив файл loop-start.php. Именно там прописана для продуктов.

      Ответить
  13. Обнаружил такую вещь, делаю обертку – использую ‘woocommerce_before_shop_loop_item_title’ (<a href="” class=”link-image-wrapper”>) для обертки картинки, и чтобы поставить закрывающий тег , его вешают на этот же хук только с другим приоритетом. И оказалось что закрывать не обязательно, закрывающий тег проставляется автоматом.
    И это не из-за того что на один хук вешаем, такая-же история если вешать на ‘woocommerce_before_shop_loop_item’, и ставить закрывающий на ‘woocommerce_after_shop_loop_item’, тоже не обязательно, закрывается сам.
    Вы знали об этом, это новая фишка WP или я что-то упускаю?

    Ответить
    • ВП тут не причём, это функционал браузера. Любой браузер при парсинге страницы, находя незакрытые теги пытается их закрыть. Правда не всегда это корректно работает.Попробуйте любой незакрытый тег на странице выведите и посмотрите что получится

      Ответить
  14. Смотрел курс по вордпресс, теперь смотрю по вукомерс, что там, что тут в каждом видео автор ругает верстку. Спрашивается, зачем брать такую верстку, даже если за нее проголосовали?🤣🤣😂😆😆😅😅😆😆😂🤣🤣🤣😂😆😆😅😅😆😅😅😆😆😂🤣🤣🤣😂😆
    Но за курс спасибо! Я бы даже приобрел качественный видеокурс с полным разбором. 2020 год а нормального курса по натяжке вукомерс так и нету….

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

      Ответить
    • @Финты WordPress Я высказал свои предложения и пожелания)
      Чтоб вы создали актуальный курс на 2020 год по woocommerce.
      Может даже с версткой с PSD макета, учитывая что это будет верстка под woocommerce.
      Я же не знаю, может этот курс вообще и не нужен)
      У вас большая аудитория, можно создать опрос о актуальности платного курса и опросить какой шаблон, какие плагины учесть и т.л. И сделать качественный курс.
      Видел курс Гавриленко, ну там же вообще ничего не понятно. И видел ваш.
      Ваш лучше, но обрезано многое что новичкам в woocommerce не совсем понятно.
      Да и 2018 год уже не то, там уже все с ног на голову перевернулось)
      Вообщем есть предложение а вы смотрите по вашему желанию.
      Но по моим поискам, адекватных курсов по этой теме нет….

      Ответить
  15. Уроки супер, спасибо вам за труды, но все-же у меня есть вопросы:
    1) Почему вы например товары пытались вывести через теги ul и li, когда в верстке через дивы, можно же просто в файлах заменить ul-ы на дивы, и вообще это уже получается больше не натяжка, а создание чего-то похожего исходя из шаблона. Я бы стремился к максимальной схожести с шаблоном и по тегам, это вообще нормальная практика, что при натяжке (для заказчика например) много тегов не совпадают и тп?
    2) Почему вы использовали много хуков и фильтров, вместо быстрой правки файлов(например оборачивание html в дивы через хуки, а не бональным добавлением их в файлы, скопированных в тему, где эти хуки вызываются)? надо при натяжке стремиться к использоавнию хуков, вместо правки из-за плагинов и тп?

    Ответить
    • 1. Потому что списки в Вукомерсе используються.
      2. Вукомерс очень часто обновляется, если файлы менять то придется поле каждого апдейта проверять работу файлов, а так через хуки гораздо удобнее

      Ответить
  16. можно как-то взять свою верстку и просто подставить данные как это делается с нормальной архитектурой?

    Ответить
    • С нормальной это какой? Поставьте шаблонизатор, если сильно хочется, правда это не очень удобно с ВП делать, но возможно

      Ответить
  17. Здравствуйте, 7:14 Вы сказали что без изменения файлов не обойтись, а что плохого в изменении файлов woocommerce?

    Ответить
    • Доброго! Ничего, но если возможность то лучше использовать хуки

      Ответить
  18. Косяк один – плохой монтаж видео… Эти скачки, не законченные предложения делают видео не понятным

    Ответить
  19. Привет.
    Быстрый поиск по функции это плюшка среды Шторм?
    Увы в Нотепаде нет такой удобной функции.

    И может посоветуешь что причитать или кого посмотреть, хочется лучше разобраться с фильтрами и событиями в Вордпресс. Спасибо.

    Ответить
    • Привет! Да, это только Шторм умеет, но можно VS Code настроить подобным образом. На wp-kama.ru есть прям подробное объяснение

      Ответить

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

%d такие блоггеры, как: