Натяжка на WooCommerce. HTML2WC. Часть #7.2. Страница товара: заголовок, рейтинги, цена и тд

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

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

62 комментария к “Натяжка на WooCommerce. HTML2WC. Часть #7.2. Страница товара: заголовок, рейтинги, цена и тд”

  1. Мне интересно как сам каталог делаете, когда по плану выйдет про сам каталог а не внутреннюю страницу товара?

    Ответить
    • Ну дак идем от внутренних к внешним, потому так. А архивы будем делать через серию, табы настроим и потом архивы. Постараюсь до НГ выпустить

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

    Ответить
    • Дак это штатный функционал Вукомерса. Для каждой вариации можно указать свою картинку

      Ответить
    • @WPRUSe · Финты WordPress Здравствуйте! Спасибо за прекрасные уроки по Вукоммерц! Тоже столкнулся с таким вопросом: какой код нужно прописать в шаблоне в месте вывода картинки товара на странице товара, чтобы при выборе вариации товара изменялась картинка? Шаблон делал сам. Для вывода изображения товара использовал стандартную функцию вордпресс для вывода миниатюры, так как товар сразу был простым. Но потом товар сделали вариативным и соответственно разные изображения для вариаций. Не могу сориентироваться в файлах вукоммерц, где находится код, который отвечает за вывод изображений для вариаций. Если можно, подскажите

      Ответить
    • @Александр Мананников Нет такого кода. Если товар вариативный и в вариации есть своя картинка, тогда автоматически через js будет картинка нужная подтягиваться. Ну если вывод не сломан. Смотрите вот этот файл https://github.com/woocommerce/woocommerce/blob/2810e6cdf3/templates/single-product/product-image.php
      Важно использовать родные классы вукомерса, иначе js работать не будет

      Ответить
  3. Что же за люди делали дизайн, если у них в карточке товара можно изменять «Quality», т.е. качество товара, а не «Quantity», т.е. его количество… = )

    Ответить
  4. А кнопка сравнения только плагином добавить можно или woocommerce имеет свою?

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

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

      Ответить
    • Все верно, сорян, но для меня это такая очевидная вещь, что забываю про нее сказать)

      Ответить
    • WPRUSe · Финты WordPress ну до твоего уровня нам ещё дорасти надо, спасибо за обучающие видео, продолжай в том же духе)
      Я оставил вопрос на последнем твоём видео из плейлиста «как изменить вукомерс» был бы признателен за ответ.

      Ответить
    • Спасибо, буду продолжать)

      На вопрос ответил, еще вчера

      Ответить
  6. Артем огромная благодарность за ваш труд, не понял откуда взялась функция для переопределения рэйтинга из текста в звездочки? В видео она закоментирована, где ее взять?

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

      Ответить
  7. Подскажите, пожалуйста, как этот блок с инкриментом колличества товаров вывести на странице архива в миниатюре карточки товара! очень нужно, никак не получается((

    Ответить
  8. Что-то глючит плагин Variation Swatches
    При выборе опции на странице товара товара в файле add-to-cart-variation.min.js валится ошибка «C.parseHTML is not a function». Причем сама опция определена
    И в корзину следовательно не добавляется.

    Глянул еще раз. Эта ошибка валится уже при загрузке страницы.

    Ответить
    • Попробовал на темах Сторфронт и Твентисевентин работает. Походу из-за того, что ID и класссы элементов-оберток поменялись и плагин не может найти сам элемент.

      Ответить
    • @Alex West Скорее всего, работа вариаций сильно на классы завязана, если нужного класса не будет то и работать ничего не будет

      Ответить
  9. WooCommerce Quantity Increment уже не доступен (
    «This plugin was closed on December 24, 2018 and is no longer available for download. Reason: Guideline Violation.»

    Ответить
  10. ну это же не то!( я так понимаю ты должен встраивать функции вукоммерса в свою верстку а не работать с дефолтным дерьмом и менять его стили

    Ответить
    • @Nikolay Bersenev А дефолтное дерьмо — это речь про Вукомерс или про хтмл шаблон?

      Ответить
    • @Финты WordPress про вукоммерс. Я сразу скажу я не специализируюсь в Вордпресс и тем более вукоммерс, я больше по фронту, поэтому могу ошибаться, но я так понимаю натяжка должна осуществляться через шаблоны — дефолтные убирать, свою вёрстку ставить и уже проставлять функции где надо.

      Ответить
    • @Nikolay Bersenev Не так. Можно конечно просто распихать хтмл по файлам, но это будет хрень. Пожтому вся натяжка заключается в динамике, чтобы все статические элементы при нужном виде, работали динамически. И если есть готовая верстка, то все упирается просто в расстановку нужных функций, а не в верстку по новой. Правда с Вукомерсом такое не всегда проходит….

      Ответить
  11. 9:40 — а зачем мы здесь добавляем стили через фильтр, если можно было поступить также как и с заголовком и ценой, просто через имеющийся класс «woocommerce-product-details__short-description»?

    Ответить
    • Хороший вопрос. Не помню, но скорее всего нужен был класс из вестки, на тот момент так видимо проще мне было

      Ответить
  12. Добрый день
    Не подскажите, а какой хук или фильтр отвечает за вывод данного кода ?
    https://habrastorage. org/webt/5d/61/ac/5d61ac969704c203728268.png

    Ответить
    • Данного — это картинки? Если да, то файл product-image.php смотрите

      Ответить
    • Дело в том, что я хотел поменять именно атрибут у картинки, которая выводит зуммирование (на скрине стрелочкой показал) — role=»presentation» на role=»lightbox»
      Я смотрел product-image.php, нашел там фильтр — woocommerce_single_product_image_thumbnail_html, но он меняет только то, что внутри самой ссылки
      Сделать замену пытался с помощью str_replace, тема storefront

      Ответить
    • @Grant Russ А это вообще фиг поменяешь, проще по новой написать, как требуется. В этих картинках все сложно и не очень удобно сделано

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

    Ответить
  14. не понимаю, почему вовсе не выводится блок с рейтингом. вроде делаю всё по видео, но всё равно не выводится, не пойму в чём проблема. Такая же проблема с описанием, которое мы добавляли в прошлом видео. Код абсолютно идентичный, а результаты разные.

    Ответить
    • @@wpruse тоже блок с рейтингом не выводится… Вообще как то странно получается, в уроке 7.1 заканчивается без рейтинга карточка, а этот начинается — рейтинг есть уже, только в начале без звездочек и Вы его добавляете. Можно тут прокомментировать что за кадром произошло, что рейтинг появился в виде: рейтинг 5,0 из 5 на основе….в конце того урока там такого небыло

      Ответить
    • Здравствуйте! Удалось решить вопрос с рейтингом?

      Ответить
    • @@kirillpetrov9182 Тоже самое и у меня, что предприняли для появления рейтинга?

      Ответить
    • Рейтинг выводится если есть отзывы. Отвечает за это файл rating.php в папке single-product. Находите там блок if ( $rating_count > 0 ) внутри которого выводится рейтинг и, например, закомментируйте if и endif. Тогда блок рейтинга будет выводится и при количестве отзывов = 0. Правда еще придется дополнительно повозиться, чтобы звездочки в этом блоке рейтинга выводились 🙂

      Ответить
  15. Ага фиг кто принял бы такую страницу , за не соответствие с макетом

    Ответить
  16. Привет, у меня почему то не подключились стили флекс слайдера, как исправить? с js все нормально, стили вукомерса не отрубал.

    Ответить
  17. спасибо.
    долго промучался с переопределением цены через хуки.
    в итоге решил реализовать вывод прямо в simple-produce/price.php
    global $product;
    $price = $product->get_price(); // текущая цена
    $regular_price = $product->get_regular_price(); // обычная цена
    $sale_price = $product->get_sale_price(); // цена при распродаже

    Ответить
  18. Красавчик, единственный на русскоязычном и англоязычном YouTube смог нормально объяснить.

    Ответить
  19. В прошлом видио вы не показали как добавить вывод рейтинга на страницу товара, помогите, пожалуйста, а то не могу найти решение

    Ответить
    • Рейтинг выводиться файлом review-rating.php подключайте его в нужном месте

      Ответить
  20. У меня звездочки тоже не выводятся. Стили отключены так же add_filter( ‘woocommerce_enqueue_styles’, ‘__return_empty_array’ );
    хук, который их подвешивает. при вставке этого кода вообще выдает ошибку. Такой же, как Ваш, из ваших исходников, только имя темы свое. Дефисы и подчеркивания не менял.
    add_action( ‘wp_enqueue_scripts’, ‘themename_woocommerce_scripts’ );
    function themename_woocommerce_scripts() {
    wp_enqueue_style( ‘themename-woocommerce-style’, get_template_directory_uri() . ‘/woocommerce.css’ );

    $font_path = WC()->plugin_url() . ‘/assets/fonts/’;
    $inline_font = ‘@font-face {
    font-family: «star»;
    src: url(«‘ . $font_path . ‘star.eot»);
    src: url(«‘ . $font_path . ‘star.eot?#iefix») format(«embedded-opentype»),
    url(«‘ . $font_path . ‘star.woff») format(«woff»),
    url(«‘ . $font_path . ‘star.ttf») format(«truetype»),
    url(«‘ . $font_path . ‘star.svg#star») format(«svg»);
    font-weight: normal;
    font-style: normal;
    }’;

    wp_add_inline_style( ‘themename-woocommerce-style’, $inline_font );
    }
    Мне интересно — это в моем коде где-то оiибка, или может код выведения звездочек поменялся при обновлении? Можете подсказать, в каком файле вукоммерса он написан, чтобы вставить тогда актуальный? Я не знаю где он, и по гитхабу видимо не те ключи поиска ввожу. Или может подключать-отключать стили надо после чего-то или перед чем-то?

    Ответить
    • У меня предварительное решение пока подключить звездочки в стилях вот так src: url(../../plugins/woocommerce/assets/fonts/star.eot); именно с точками, и скопировать стили самих звездочек из вукоммерса, но не уверен, что это правильно, это по-моему хардкод.

      Ответить
    • Скорее всего второе, надо с этими звездочками поссмотреть, там Вука сильно изменилась

      Ответить
  21. Не знаю, насколько актуально сейчас смотреть конкретно эти гайды, но понял, что WooCommerce — это конкретный геморой с кучей шелухи. Но это ладно. Возникает второй, не менее важный вопрос. Какой смысл вообще было брать настолько дерьмовую верстку, с самым галимым функционалом, и подавать это «аля показать как это работает» без фактического завершения нужных работ. Люди, когда смотрят такие гайды, хотят увидеть цельный конечный результат, а не увидеть рваные куски работы и по ним попытаться сделать что-то свое. Автору этих видео нужно конкретно пересмотреть подачу своего материала. Видно, что подача материала стала не такой рваной, как в предыдущих частях, но вопрос опять же «недоделывания» цельного продукта остается. Лайки под каждым гайдом проставил, но в целом подачей не доволен. А очень жаль. Возможно, более ответственный подход к подобным видео действительно облегчил бы жизнь начинающим в WordPress и в частности в WooCommerce…

    Ответить

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

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