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
3.1 год назад
  • 2
    anseme455

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

    Все файлы которые можно менять лежат в директории плагина (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. Код таким как есть нельзя будет использовать, тебе придется ОЧЕНЬ много поменять всего.

    3.1 год назад #
    smolanov_sergey 3.1 год назад

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

    anseme 3.1 год назад

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

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

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

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

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

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

    smolanov_sergey 3.1 год назад

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

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