WordPress как на ладони
Очень Удобный и Быстрый Хостинг для сайтов на WordPress. Пользуюсь сам и вам рекомендую!

Как свою верстку натянуть на Woocommerce?

Есть вёрстка макета для категории товаров.
В ней вот так віводяться товары

<div class="blog__content"> - контейнер для товаров
			<div class="blog__item"> - пример одного товара
			  <div class="thumb__wrap">
				<a href="#" class="item__link">добавить в корзину</a>
				<img src="blog1.jpg" alt="image">
			  </div>
			  <a href="#" class="description">
				<h4>Provence-en-Aix 2 копия</h4>
				<p>299,99€</p>
			  </a>
			</div>
		  </div>
</div>

Как это чудо можно натянуть на Woocommerce?
киньте ссылю почитать

0
smolanov_sergey
1.3 года назад
  • 2

    Быстрый ответ если у тебя уже все установлено и нужно только править структуру:

    Все файлы которые можно менять лежат в директории плагина (wp-content\plugins\woocommerce\templates), их нужно скопировать в папку твоей темы (wp-content\themes\TVOYATEMA\woocommerce) и там менять.

    Но по хорошему нужно это:

    1. Для понимания что такое темы:
      https://codex.wordpress.org/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BC

    2. Для того что бы использовать Woo тока на инглише есть: https://docs.woocommerce.com/document/woocommerce-theme-developer-handbook/

    Много читать придется, если шаришь в php, то наиболее простой вариант будет скачать и установить готовую дефолтную тему Storefront (https://docs.woocommerce.com/documentation/themes/storefront/) и уже на ее основе менять код или свою верстку.

    P.S. Код таким как есть нельзя будет использовать, тебе придется ОЧЕНЬ много поменять всего.

    smolanov_sergey 1.3 года назад

    Спасибо! Тоесть нужно хуками собрать новый dom именно по макету.
    Мне где-то попадался урок где парень с $product натянул на обсолютно левый макет.
    Буду читать.

    anseme 1.3 года назад

    Ну не совсем, скорее всего придеться поменять части шаблона woocommerce которые используются для вывода разметки html

    Открой несколько магазинов на wp и сравни их внутренности, там заметишь схожие места.

    В идеале, тот кто верстал макет, должен это делать соблюдая структуру которая используется в woocommerce.

    Вот тут есть оч крутой визуальный пример, но УЧТИ! Он точно устарел, скорее всего некоторые хуки исчезли или же добавились новые.

    https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

    После регистрации, тут https://www.businessbloomer.com/lesson/cuwm4l02/
    будет доступно видео "Как находить что то в коде шаблона"

    smolanov_sergey 1.3 года назад

    Спасибо, буду думать.

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация