WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Как свою верстку натянуть на 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 месяц назад
  • 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 месяц назад

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

    anseme 1 месяц назад

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

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

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

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

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

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

    smolanov_sergey 1 месяц назад

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

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