Как изменить стиль woocommerce

Привет! Продолжаем разбирать самые интересные и полезные плагины для интернет-магазина woocommerce. Сегодня вы узнаете как изменить внешний вид онлайн магазина woocommerce. Вы сможете изменить внешний вид страницы товара, страницы магазина, страниц оформления заказа и корзины. Вы сможете менять цвет и размер заголовков, цен, описаний, категорий, скрыть не нужные элементы, изменить цвет и размер кнопки в корзине и т.д.

Изменить внешний вид интернет-магазина Woocommerce

Изменить внешний вид интернет магазина woocommerce вы сможете с помощью плагина — Customize Woocommerce Shop. Установить данный плагин на свой сайт вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

После установки и активации плагина, перейдите на страницу: Woocommerce — Customize Shop. Здесь вы сможете менять внешний вид своего интернет-магазина woocommerce.

Product Shop Page, страница товара.

— Selected Products, выберите здесь All, тогда изменения будут касаться всех товаров. Вы можете выбрать только один товар или несколько определённых товаров.

— Product Images, поставьте здесь галочку, чтобы скрыть изображение товара.

— Product Title, поставьте здесь галочку, чтобы скрыть заголовок товара.

— Logged In User Only, если поставите здесь галочку, то кнопку Добавить в корзину будут видеть только зарегистрированные пользователи.

— Products Prices, поставьте галочку, чтобы скрыть цены на товары.

— Add To Cart Button, поставьте здесь галочку, чтобы скрыть кнопку Добавить в корзину.

— Нажмите на кнопку — Save All Settings, чтобы сохранить настройки.

Shop Page Appearance, внешний вид страницы Магазин.

— Remove Unset Product Images, поставьте галочку, чтобы скрыть изображения которые не установлены.

— Set Default Product Image, здесь можно задать изображение, которое будет использоваться по умолчанию для товаров у которых нет изображения.

— Title Font Color, здесь вы можете выбрать цвет шрифта для заголовка товара.

— Title Font Size, выберите размер шрифта заголовка товара.

— Title Font Weight, здесь вы можете выбрать тип шрифта для заголовка товара.

— Price Font Color, выберите цвет цены товара.

— Price Font Size, выберите размер цены товара.

— Price Font Weight, выберите тип шрифта цены товара.

— Нажмите на кнопку — Save All Settings, чтобы сохранить настройки.

Product Details Page, одиночная страница товара.

— Selected Products, выберите для каких товаров будут происходить изменения. Для всех товаров выберите All.

— Product Images, поставьте галочку, чтобы скрыть изображения товара.

— Product Title, поставьте галочку, чтобы скрыть заголовок товара.

— Product Tabs, поставьте галочку, чтобы скрыть вкладку товара.

— Related Products, поставьте галочку, чтобы скрыть похожие товары.

— Logged In User Only, поставьте здесь галочку, чтобы кнопка Добавить в корзину, была видна только зарегистрированным пользователям.

— Products Prices, поставьте галочку, чтобы скрыть цену товара.

— Add To Cart Button, поставьте галочку, чтобы скрыть кнопку Добавить в корзину.

— Products Category, поставьте галочку, чтобы скрыть категории товара.

— Нажмите на кнопку — Save All Settings, чтобы сохранить сделанные изменения.

Detail Page Appearance, внешний вид страницы товара.

— Remove Unset Product Images, удалить неопределённые изображения.

— Set Default Product Image, задать изображение по умолчанию для товаров у которых нет изображений.

— Title Font Color, выбрать цвет заголовка товара.

— Title Font Size, выбрать размер заголовка товара.

— Title Font Weight, выбрать тип шрифта заголовка.

— Price Font Color, цвет цены товара.

— Price Font Size, размер цены товара.

— Price Font Weight, тип шрифта цены товара.

— Description Font Color, цвет описания товара.

— Description Font Size, размер текста описания товара.

— Description Font Weight, тип шрифта текста описания товара.

— Category Font Color, цвет категории товара.

— Category Font Size, размер текста категории товара.

— Category Font Weight, тип шрифта категории.

— Сохраните сделанные изменения.

Cart Page, корзина.

— Cart Empty Button, поставьте галочку, чтобы добавить кнопку Корзина пустая на страницу Корзина.

— Button Font Color, цвет кнопки пустой корзины.

— Button Font Size, размер кнопки.

— Button Font Weight, тип шрифта кнопки.

— Нажмите на кнопку — Save All Settings для сохранения настроек.

Checkout Page, страница Оформить заказ. Здесь вы сможете выбрать между двумя параметрами Disable — отключить, Optional — необязательно.

— Billing Country, биллинг страны.

— Billing First Name, биллинг имя.

— Billing Last Name, биллинг фамилия.

— Billing Company, биллинг компания.

— Billing Address1, биллинг адрес 1.

— Billing Address2, биллинг адрес 2.

— Billing City, фактура города.

— Billing State, биллинг государства.

— Billing Post Code, биллинг код поста.

— Billing Email, биллинг электронная почта.

— Billing Phone, биллинг телефон.

Shipping, доставка.

— Shipping Country, доставка страна.

— Shipping First Name, доставка имя.

— Shipping Last Name, доставка фамилия.

— Shipping Company, доставка компания.

— Shipping Address 1, 2, доставка адрес 1 и 2.

— Shipping City, город доставки.

— Shipping State, государственная доставка.

— Shipping Post Code, доставка код поста.

— Account Password, пароль учётной записи.

— Order Comment, комментарий заказа.

— Сохраните сделанные изменения.

Супер плагины Woocommerce, более 200, с руководством по настройке, смотри Здесь!

Остались вопросы? Напиши комментарий! Удачи!

Теоретические выкладки, о структуре файлов WooCommerce и о том, как правильно изменять WooCommerce через хуки. Вводное видео, о том как работают хуки в WooCommerce, какими инструментами пользоваться и правильно изменять файлы.

• ---

  • 
    Бесплатные редакторы

  • 
    Дочерняя тема

  • 
    Специальный плагин
  • 
    Включение поддержки WooCommerce в теме

  • 
    Отключение стилей WooCommerce

  • 
    Загрузка файлов CSS и JavaScript WooCommerce только на страницах магазина

  ---

Инструменты

Для правки кода требуется использовать редакторы кода. Так как в них есть подсветка кода и очень удобно вносить правки или писать код с нуля.

В видео весь код правится через PhpStorm это не просто редактор, а целая система. Очень крутая, но платная. Хотя можно скачать или триальную версию, или пользоваться бетой совершенно бесплатно.

к содержанию

Бесплатные редакторы

• Notepad++
• Sublime Text
• Atom
• Brackets
• Visual Studio Code

Пользоваться можно любым, главное, чтобы удобно было. Рекомендую VS Code — при правильной настройке будет не хуже PhpStorm

к содержанию

Как правильно добавлять код

Существует два способа:

• через дочернюю тему
• через специальный плагин

Все это делается для того, что бы при обновлении темы все ваши изменения сохранились.

Дочерняя тема

Дочернюю тему можно сделать самостоятельно или использовать плагин. Как сделать самостоятельно смотрите в видео

Еще удобно дочернюю тему сделать через плагин. Например, плагин Child Theme Configurator позволит прямо из админки создать дочернюю тему. После использования плагин можно удалить.

к содержанию

Специальный плагин

Другой способ вносить изменения использовать специальные плагины. Например, плагин Code Snippets позволяет делать подобные вставки. Или можно использовать пустой плагин. Об использовании пустого плагина, можно узнать в этой статье.

Всегда внимательно копируйте код сниппетов и делайте бекапы, не ленитесь.

к содержанию

Нигде) Расписанной документации как таковой нет. Можно посмотреть то, что есть на официальном сайте

• Документация для разработчиков
• API WooCommerce

Без поллитры в ней не разобраться)

Предпочитаю смотреть код WooCommerce на GitHub, а если установить расширение Octotree для браузера Хром, то становится очень удобно просматривать файлы.

К тому же, на GitHub есть еще Wiki по WooCommerce, в которой подробно расписаны некоторые моменты. Это бывает полезно.

к содержанию

Как работают хуки в WordPress 

Хуки или события и фильтры — это основная событийная модель работы WordPress. Не забываем, что WooCommerce — это плагин для WordPress. Для внесения изменений в WooCommerce чаще всего используются фильтыы и события.

Хуки — это важно! От понимания того, как работаю хуки будет зависеть понимание всей дальнейшей информации как этого курса, так и любых других связанных с разработкой на WordPress и WooCommerce.

Небольшое видео, для понимя работы хуков

По теме хуков еще рекомендую почитать статьи:

• Как работают хуки в WordPress — сайт wp-kama.ru (основной спрвочник по WP на русском)
• Хуки: фильтры и действия. Подробное руководство — сайт misha.blog (много базовой информации по WP)

к содержанию

Как изменять (переопределять) файлы WooCommerce

Для безопасного изменения или переопределения файлов, отвечающих за вывод контента WooCommerce, достаточно скопировать файлы из папки /templates/ самого плагина в папку /woocommerce/ вашей темы или дочерней темы. Если в вашей дочерней теме нет папки /woocommerce/, то создайте ее. Теперь для внесения изменений достаточно скопировать нужный файл.

Полный путь к папке шаблонов из корня сайта /wp-content/plugins/woocommerce/templates/

Пример: чтобы переопределить уведомление о заказе администратора, скопируйте: wp-content/plugins /woocommerce/templates/emails/admin-new-order.php в wp-content/themes/yourtheme /woocommerce/emails/admin-new-order.php

Скопированный файл будет переопределять файл шаблона WooCommerce по умолчанию.

Предупреждение: не редактируйте эти файлы в самом ядре плагине, так как они перезаписываются в процессе обновления, и любые настройки будут потеряны.

Источник: Template structure & Overriding templates via a theme

к содержанию

Примеры использования хуков

Включение поддержки WooCommerce в теме

Поддержка в теме включается только на хуке after_setup_theme. Это важно!

Базовое включение поддержки WooCommerce

/**
 * @snippet       Включение поддержки WooCommerce в теме
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_action( 'after_setup_theme', 'mywoo_add_woocommerce_support' );
function mywoo_add_woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

Включение поддержки WooCommerce с передачей

/**
 * @snippet       Включение поддержки WooCommerce в теме с настройками
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_action( 'after_setup_theme', 'mywoo_add_woocommerce_support' );
function mywoo_add_woocommerce_support() {
    add_theme_support( 'woocommerce', array(
        'thumbnail_image_width' => 150,
        'single_image_width'    => 300,

        'product_grid'          => array(
            'default_rows'    => 3,
            'min_rows'        => 2,
            'max_rows'        => 8,
            'default_columns' => 4,
            'min_columns'     => 2,
            'max_columns'     => 5,
        ),
    ) );
}

Это установка значений по умолчанию

• thumbnail_image_width и single_image_width — размер изображений
• product_grid — параметры сетки вывода товаров на страницах архивов

Подключение zoom, swipe, lightbox

/**
 * @snippet       Включение поддержки zoom, swipe, lightbox WooCommerce в теме
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

к содержанию

Отключение стилей WooCommerce

/**
 * @snippet       Полное отключение стилей WooCommerce
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

/**
 * @snippet       Частичное отключение стилей
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_enqueue_styles', 'woocust_dequeue_styles' );
function woocust_dequeue_styles( $enqueue_styles ) {

	unset( $enqueue_styles['woocommerce-general'] );    // Отключение основных стилей
	unset( $enqueue_styles['woocommerce-layout'] );        // Отключение сетки
	unset( $enqueue_styles['woocommerce-smallscreen'] );    // Отключение адаптивности

	return $enqueue_styles;
}

к содержанию

Загрузка файлов CSS и JavaScript WooCommerce только на страницах магазина

/**
 * @snippet       Подключение стилей и скриптов только на страницах магазина
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_action( 'wp_enqueue_scripts', 'woocust_manage_woocommerce_styles', 99 );
function woocust_manage_woocommerce_styles() {

	if ( function_exists( 'is_woocommerce' ) ) {
		if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
			wp_dequeue_style( 'woocommerce-layout' );
			wp_dequeue_style( 'woocommerce-smallscreen' );
			wp_dequeue_style( 'woocommerce-general' );
			wp_dequeue_style( 'evolution-woostyles' );
			wp_dequeue_script( 'wc_price_slider' );
			wp_dequeue_script( 'wc-single-product' );
			wp_dequeue_script( 'wc-add-to-cart' );
			wp_dequeue_script( 'wc-cart-fragments' );
			wp_dequeue_script( 'wc-checkout' );
			wp_dequeue_script( 'wc-add-to-cart-variation' );
			wp_dequeue_script( 'wc-single-product' );
			wp_dequeue_script( 'wc-cart' );
			wp_dequeue_script( 'wc-chosen' );
			wp_dequeue_script( 'woocommerce' );
			wp_dequeue_script( 'prettyPhoto' );
			wp_dequeue_script( 'prettyPhoto-init' );
			wp_dequeue_script( 'jquery-blockui' );
			wp_dequeue_script( 'jquery-placeholder' );
			wp_dequeue_script( 'fancybox' );
			wp_dequeue_script( 'jqueryui' );
		}
	}
}

к содержанию

Заключение

Это вводная часть. В ней разобрали какими инструментами пользоваться, как вносить код и некоторые другие вещи.

Как изменять WooCommerce через хуки смотрите в видео выше по таймкоду 8:32. С этого времени как раз начинаются примеры кода.

Удачи в изменении WooCommerce! Вопросы, предложения пишите в комментариях, и не забудьте расшарить эту статью в соцсетях! Вам это ничего не стоит, а меня будет мотивировать)

WooCommerce — популярная платформа для электронной торговли на движке WordPress, которую развивают люди из WooThemes. В этой статье речь пойдет о том, как начать разработку тем под WooCommerce.

Перед началом чтения убедитесь в том, что:

1. У вас установлены WordPress и WooCommerce на сайте.
2. Вы знаете, как создавать темы для WordPress и умеете работать с HTML и CSS.
3. Вы знаете, как работать со средствами разработки Chrome Developer Tools и с такими инструментами, как Firebug.

Смотрите также:

• 13 полезных плагинов и расширений для магазинов на WooCommerce
• WPStore — многофункциональная WooCommerce тема для создания интернет-магазинов
• Создаем магазин на WordPress с помощью WooCommerce
• 17 бесплатных WordPress-плагинов для фреймворка WooCommerce
• 14 бесплатных тем WordPress для интернет-магазина на WooCommerce

Настройка WooCommerce CSS

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

Поэтому у нас есть 2 пути для редактирования CSS в теме оформления WooCommerce:

1. Можно использовать базовые стили и переписать их поверх существующих.
2. Можно отключить стили по умолчанию и вместо них начать с нуля.

Помните, что WooCommerce добавляет класс «woocommerce» ко всем своим страницам.

Отключаем стили по умолчанию

Запись новых стилей поверх тех, что предложены по умолчанию — это самый простой и быстрый способ, который подойдет большинству пользователей.

Скопируйте содержимое всего файла WooCommerce CSS, он расположен по адресу:

wp-contentpluginswoocommerceassetscsswoocommerce.css или woocommerce.less

Удалите оттуда всё ненужное вам и внесите свои правки. Правда, это может занять немало времени и привести к повторению кода в таблице стилей.

Рекомендую использовать следующий подход:

1. Найдите на сайте все стили, которые надо заменить.
2. Затем используйте Chrome Developer Tools (или аналогичный инструментарий) для идентификации классов и внесения правок в браузере, чтобы сразу видеть, что и как будет выглядеть после редактирования. Сделать это можно правым кликом на странице и выбрав инспектирование элементов в выпадающем меню.
3. Скопируйте полученный код CSS из Chrome Developer Tools в файл вашей темы с таблицей стилей.
4. Не забудьте сменить значения переменных, чтобы сохранить целостность таблицы стилей и связь стилей и контента для разных браузеров.
5. Если вы найдете что-то, что не меняется в кастомизированном файле, то можете удалить это значение: если оно не меняется, нет смысла включать его в кастомный файл CSS.

Такой подход хорошо экономит вам время.

В Google Chrome можно кликнуть правой кнопкой мыши на элементе в режиме окна Developer Tools для проверки разных состояний элемента. Так вы увидите все состояния элементов без необходимости выискивать их в файле таблицы стилей.

Отключаем родную таблицу стилей и начинаем с нуля

Отключить таблицу стилей, предлагаемую по умолчанию, можно добавлением короткой строки в файле functions.php:

define('WOOCOMMERCE_USE_CSS', false);

Самый простой и быстрый способ создания всех классов — скопировать их из существующего оригинального файла WooCommerce CSS в новый, а затем внести там все необходимые правки и изменения.

Включаем поддержку WooCommerce в своей теме

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

Если не указать поддержку WooCommerce в вашей теме, пользователи будут сталкиваться с ошибкой при установке на WooCommerce. К счастью, решить эту проблему поможет маленький фрагмент кода, добавленный в файл functions.php:

add_theme_support( 'woocommerce' );

Редактируем шаблоны

Редактирование CSS в WooCommerce может отнять немало времени. Но есть способ сделать эту рутинную долгую работу не такой скучной.

Плагин WooCommerce поставляется с набором шаблонов front-end на HTML, равно как с набором шаблонов для писем. Вместо прямого редактирования всех этих файлов в плагине (не очень хорошая идея, потому что любое обновление плагина приведет к тому, что все ваши изменения будут удалены), вы можете скопировать их в свою настраиваемую тему:

1. В папке с темой создаем вложенную папку с названием «woocommerce«.
2. Переходим в папку с плагином WooCommerce и открываем папку «templates«. Здесь много вложенных папок, в которых хранятся шаблоны, используемые в WooCommerce. К счастью, структура здесь сравнительно простая и визуально понятная.
3. В новой папке «woocommerce» поместим все файлы шаблонов, скопированные из первоисточника, которые мы хотим отредактировать. Не забудьте сохранить ту же структуру папок, что и в первоисточнике. Не забудьте переименовать связанные папки, если вносите в названиях какие-то изменения.
4. После редактирования всех необходимых файлов и папок сохраняем изменения в папке «woocommerce«.

Практический пример

К примеру, нам надо поменять код в разделе с заказанными товарами в WooCommerce.

Для начала определим нужный нам шаблон. Секция «My Orders» находится в «My Account«. Структура пути к файлу выглядит так:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Делаем вложенную папку «woocommerce«, а в ней — вторую вложенную с названием «myaccount«. Копируем туда файл my-orders.php.

У вас должен получиться путь:

/wp-content/themes/вашатема/woocommerce/myaccount/my-orders.php

Теперь все сделанные изменения будут переписывать настройки, заданные по умолчанию.

WooCommerce и циклы

Если вы ранее создавали или редактировали темы для WordPress, тогда вам знакомо понятие цикл (The Loop). У WooCommerce есть свои циклы для настроек своих внутренних страниц. Например, вы можете их применять, если надо вывести другую боковую панель для страниц WooCommerce.

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

Создание шаблона происходит в несколько шагов:

• Делаем дубликат файла темы page.php и переименовываем его в woocommerce.php
• Находим цикл WordPress в файле woocommerce.php. Он выглядит примерно так:

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php the_title(); ?
  <?php the_content(); ?>
  <?php endwhile; endif; ?>

• Заменяем ваш цикл на цикл WooCommerce:

  <?php woocommerce_content(); ?>

• Теперь можно делать любые желаемые изменения.

Заключение

Теперь вы знаете основы работы с подключением и настройкой тем для торговой платформы WooCommerce на WordPress.

Навыков, приобретенных в результате прочтения данной статьи, хватит для большинства случаев работы с WooCommerce. Если вам надо больше примеров гибкой кастомизации, почитайте о фильтрах, надстройках кода и условных переменных для WooCommerce.

Источник: code.tutsplus.com

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Note that this tutorial is intended for theme developers. If you want to customize an existing theme, see Customizing Theme: Best Practices.

Inside the assets/css/ directory, you will find the stylesheets responsible for the default WooCommerce layout styles.

Files to look for are woocommerce.scss and woocommerce.css.

• woocommerce.css is the minified stylesheet – it’s the CSS without any of the spaces, indents, etc. This makes the file very fast to load. This file is referenced by the plugin and declares all WooCommerce styles.
• woocommerce.scss is not directly used by the plugin, but by the team developing WooCommerce. We use SASS in this file to script the CSS in the first file easier and faster.

The CSS is written to make the default layout compatible with as many themes as possible by using % widths for all layout styles. It is, however, likely that you’ll want to make your own adjustments.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer  for assistance.

To avoid upgrade issues, we advise not editing these files but rather use them as a point of reference.

If you just want to make changes, we recommend adding some overriding styles to your theme stylesheet. For example, add the following to your theme stylesheet to make WooCommerce buttons black instead of the default color:

a.button, 
button.button, 
input.button, 
#review_form #submit {
  background:black; 
}

WooCommerce also outputs the theme name (plus other useful information, such as which type of page is being viewed) as a class on the body tag, which can be useful for overriding styles.

If you plan to make major changes, then you may prefer your theme not reference the WooCommerce stylesheet at all. You can tell WooCommerce to not use the default woocommerce.css. See the following tutorial for disabling WooCommerce style sheets.

If you are contributing to WooCommerce core and need to edit the style, please edit the Sass files and then compile them by using Grunt. To know more about what Grunt tasks we use, check out the file Gruntfile.js inside the root of WooCommerce. You can read more about Grunt here.

Нынче организуем стилистику магазина на WordPress, а именно — перенесём стили css плагина в директорию собственной темы (вообще, я всегда советую, не важно — сторонняя тема или заточенная под плагин: управление сосредотачивать всеименно в корне рабочего шаблона) ибо оставим функциональную механику на заботу авторам замечательного плагина, а себе управление эстетическим видом лабаза: только хозяин лавки должен решать в какой расцветке будет его магаз.

Способы разберём попроще и посложнее — для эстетов, а также покажу несколько кодов, направленных на логическую организацию внешнего вида магазина на базе плагина woocommerce: (заметьте — только код — без плагинов пока: оставим тяжким плагинам более тонкую функциональную работу)

…перенесём рычаги управления количеством отображаемого товара, последовательностью и т.п …и, на мой взгляд, важная деталь — настроим уберём/добавим в форме заказа поля для заполнения клиентом, и — коли наша цель создание интернет магазина на wordpress с нуля — то…

…начнём играть концерт:

Чтобы магазин на вордпресс полезно функционировал, приступим к стилистике…

перенести css wooc в директорию своего шаблона правильно

Сразу говорю, — будет логичнее, коли вы изучите предыдущую публикацию о настройке магазина… там я пояснял почему целесообразнее те или иные организационные административные действия…

Итак: пример магазина на wordpress можно взглянуть на моём сайте !! это, конечно, не полноценный в смысле понятия магазин, создания магаза здесь не было целью, но всё же для общих ваших пониманий подойдёт… да и мы разбираем тему создания магазина на базе вордпресс, прикрученного к стороннему сайту: впрочем, принцип везде одинаков…

Итак: способ — 1.

Чтобы стили woocommerce.css подхватывалось из вашего шаблона, нужно будет прописать следующие строки в файл functions.php

/*** перенос woocommerce.css в файл шаблона ***/
function woo_style() {
wp_register_style( 'mihalica-woocommerce', get_template_directory_uri() . '/woocommerce.css', null, 1.0, 'screen' );
wp_enqueue_style( 'mihalica-woocommerce' ); } add_action( 'wp_enqueue_scripts', 'woo_style' );
/*** ФИНАЛ перенос woocommerce.css в файл шаблона ***/

Также, чтобы стили woocommerce-layout.css считывались из вашего шаблона, нужно будет прописать и нижеследующие строки в файл функций…

/*** перенос woocommerce-layout.css в файл шаблона ***/
function woo2_style() {
wp_register_style( 'mihalica-woocommerce-layout', get_template_directory_uri() . '/woocommerce-layout.css', null, 1.0, 'screen' );
wp_enqueue_style( 'mihalica-woocommerce-layout' ); } add_action( 'wp_enqueue_scripts', 'woo2_style' );
/*** ФИНАЛ - перенос woocommerce-layout.css в файл шаблона ***/

Для тех, которым не терпится всё выправить изначально правильно…

Способ 2.

Вообще, стили, в плане лёгкости сайта, логичнее соединить воедино — в один общий файл, к примеру — style.css.

Как это делается:

В файле функций нужно организовать ещё один цикл кода, который призван полностью отключить css-стили плагина, но обеспечить подгрузку из общего файла стилей темы: (как понимаете, первые коды только перенаправляли пути к файлам…)

У кого-то заработает такой код:

/*** Отключаем стили CSS плагина - добавим этот код в функции ***/
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
/*** Отключаем стили CSS плагина - добавим этот код в функции Отключаем стили CSS плагина - добавим этот код в функции ***/

…кому-то, возможно, подойдёт такой: (всё зависит от удачно выбранной вами темы))

/*** Отключаем стили CSS плагина - добавим этот код в функции ***/
define('WOOCOMMERCE_USE_CSS', false);
/*** Отключаем стили CSS плагина - добавим этот код в функции Отключаем стили CSS плагина - добавим этот код в функции ***/

В этом случае, не забудьте закомментировать или убрать код перенаправления css, данный выше (если пользовались).

…иначе у вас в исходном коде будет засоренность ненужными мета-строками, смотрите фото (картинки кликабельны):

На первом фото работает так: стили берутся из шаблона, но — не отключена подгрузка стилей плагина — первые коды сегодняшней статьи  (и снова напоминаю, читайте статью, ссылка выше).

После того, как только вы запретите (код 2) отработку стилей плагина, стили будут подгружаться из шаблона, однако — перенаправление ещё будет отрабатываться прежним кодом: отсюда и мусор нерабочих мета…

А наиболее неприятным будет сообщение валидатора об ошибке организации работы css: будет что-то типа «такой-то такой файл css указан, но не найден…» хотя сайт и будет работать… Однако — это ошибка!

…словом, отключите «перенаправление» если решаетесь пользоваться вторым вариантом!

Должно получиться как на второй фотке: мета запросов стилей css  woocommerce-layout.css и woocommerce.css должны быть убраны.

к оглавлению

функционально-визуальные настройки магазина на WooCommerce

Вот некоторые полезные коды для организации функциональной структуры бухгалтерии магазина…

Некоторых настроек на панели управления плагином (магазином) нет… возможно более тонкое управление и появится в будущем, но, как говорится — знания лишними не бывают в настоящем.

к оглавлению

как изменить количество товаров на витрине магазина на WooCommerce

Вот это кодированное чудо задаёт количество единиц товаров на главной странице, категориях и метках: см. строку 2…

/*** число товаров вообще, на странице витрины МАГАЗИН ***/
add_filter('loop_shop_per_page', create_function('$cols', 'return 3;'));// 3 число товара
/*** число товаров ***/

…этот код — число колонок товаров (впрочем, пояснение в комментариях)…

/*** число КОЛОНОК ТОВАРОВ МАГАЗИНА ***/
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 4;        //4 количество колонок
}
}
/*** ФИНАЛ число КОЛОНОК МАГАЗИНА  ***/

к оглавлению

как настроить страницу формы оформления заказа

…а вот эти строки обеспечат настройки — снятие красного значка определённых полей «обязательного заполнения» покупателем …

/** ПОЛЯ В ФОРМЕ ЗАКАЗА НЕ ОБЯЗАТЕЛЬНЫЕ **/
add_filter( 'woocommerce_checkout_fields' , 'no_required_checkout_fields' );
function no_required_checkout_fields( $fields ) {
$fields['billing']['billing_last_name']['required'] = false; //фамилия
$fields['billing']['billing_address_1']['required'] = false; // адрес
$fields['billing']['billing_city']['required'] = false; // город-область-регион
$fields['billing']['billing_postcode']['required'] = false;
return $fields;
}
/** ПОЛЯ В ФОРМЕ ЗАКАЗА НЕ ОБЯЗАТЕЛЬНЫЕ **/

Прописка этих строк в файле функций позволит расположить ссылку «Продолжить покупки…» где-нить в финале формы заказа… ссылке можно назначить через какой-нить «…span…» индивидуальный стиль…

/** ПРОДОЛЖИТЬ ПОКУПКИ В ФОРМЕ ЗАКАЗА **/
function checkout_more_buttons() {
echo '<a href="https://mihalica.ru/shop/"> ← Продолжить покупки</a>';
}
add_action ('woocommerce_review_order_before_submit', 'checkout_more_buttons', 5);
/** ПРОДОЛЖИТЬ ПОКУПКИ В ФОРМЕ ЗАКАЗА **/

…если пропишете в файле функций такой код, — количество полей для заполнения покупателем, оформляя покупки, будут под контролем …

Какие-то ненужные (лишние на Ваш взгляд формы) можете убрать… добавить — возможно пропиской строк по аналогии…

/** УБИРАЕМ ГРАФЫ В ОФОРМЛЕНИЯХ ЗАКАЗА **/
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) { //Убрали ненужные поля
unset($fields['billing']['billing_company']);         // компания

//unset($fields['billing']['billing_country']);       // страна
unset($fields['billing']['billing_address_2']);       // точный адрес
unset($fields['billing']['billing_state']);           //область/регион
return $fields;
}
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields( $fields ) {
$fields['billing_address_1']['class'] = array( 'form-row-wide' ); //Поле адреса
return $fields;
}
/** УБИРАЕМ ГРАФЫ В ОФОРМЛЕНИЯХ ЗАКАЗА **/

…так что подписывайтесь…

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

создание… продвижение сайтов: студия ATs media запросто с WordPress

…вопросы в комментариях — помогу, в чём дюжу…
mihalica.ru !

Как заменить стандартную надпись “В корзине” в WooCommerce

Для этого переходим к файлам вашей активной темы и добавляем в functions.php следующий код:

// для страницы самого товара
add_filter( 'woocommerce_product_single_add_to_cart_text', 'sajt_pod_klyuch_single_product_btn_text' );
 
function sajt_pod_klyuch_single_product_btn_text( $text ) {
 
	if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) {
		$text = 'Уже в корзине, добавить снова?';
	}
 
	return $text;
 
}
 
// для страниц каталога товаров, категорий товаров и т д
add_filter( 'woocommerce_product_add_to_cart_text', 'sajt_pod_klyuch_product_btn_text', 20, 2 );
 
function sajt_pod_klyuch_product_btn_text( $text, $product ) {
 
	if( 
	   $product->is_type( 'simple' )
	   && $product->is_purchasable()
	   && $product->is_in_stock()
	   && WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) )
	) {
 
		$text = 'Уже в корзине, добавить снова?';
 
	}
 
	return $text;
 
}

Код заменит стандартную надпись “В корзине” на странице рубрики и одиночном товаре. Просто замените надпись “Уже в корзине, добавить снова?” на любую, которая вам необходима.

Как изменить стиль кнопки “В корзине” в WooCommerce?

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

Сначала посмотрите, как реализована кнопка “В корзину” на вашем сайте. Она может быть обернута в теги <a>…</a> или <button>…</button>.

Далее находим файл с JS-скриптами вашей активной темы и вставляем туда следующее:

setInterval(function(){
jQuery('button:contains("Уже в корзине, добавить снова?")').css('border', '1px solid red');
},1000);

Скрипт находит элемент <button>, который включает в себя содержимое “Уже в корзине, добавить снова?”, и добавляет инлайн-стили вашей кнопке.

Если на вашем сайте кнопки “В корзину” реализованы через тег <a>, то можете использовать такой скрипт:

setInterval(function(){
jQuery('a:contains("Уже в корзине, добавить снова?")').css('border', '1px solid red');
},1000);

Подведем итоги

В этом материале мы поговорили о том, как заменить стандартную надпись «В корзине» в Woocommerce. Если вы знаете, как это сделать любыми другими способами, можете рассказать о них в комментариях! 🙂

Если вам помог материал или остались какие-либо вопросы по разработке сайтов — задавайте их в комментариях. Я с радостью вам отвечу!

От автора: вы захотели добавить в тему магазин – замечательно! WordPress WooCommerce – отличный выбор. Чисто технически, ВСЕ темы совместимы с WooCommerce, ведь это просто плагин. Чисто теоретически, любой плагин должен работать с любой темой WordPress (хорошо скроенной).

Со стороны разработчика тем вы, возможно, хотели бы лучше подогнать WooCommerce к теме или обеспечить опции для конечного пользователя, которых нет в стандартных настройках WooCommerce (например, изменение количества столбцов в магазине). Ниже вы найдете немного полезного кода, с помощью которого можно «улучшить» поддержку WooCommerce в теме и/или изменить что-то под свой дизайн.

Важно: многие куски кода ниже используют функции, доступные только в WooCommerce. Убедитесь, что этот код не просто сброшен в конец functions.php в теме. Если вы собираетесь распространять свою тему или продавать, то необходимо поместить весь код в своих файлах и загружать их только при активности плагина WooCommerce.

Проверяем активность WooCommerce

В своих темах я люблю задавать кастомную константу, с помощью которой можно проверять активность WooCommerce, чтобы подключать файлы или запускать функции только, когда он активен (см. важно сверху).

Объявляем поддержку WooCommerce

Это первый и самый важный код, который необходимо добавить в тему – он «включает» поддержку WooCommerce и прячет предупреждения от плагина, которые говорят пользователю, что тему не совместима.

Удаляем WooCommerce CSS

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

Следующий код удаляет ВСЕ стили WooCommerce:

Код ниже – пример условного удаления определенных стилей:

Включаем WooCommerce галерею товаров, Zoom и LightBox (v3.0+)

В WooCommerce 3.0 была представлена новая галерея товаров, zoom и lightbox. Все это активируется через «add_theme_support», если хотите использовать их в теме.

Удаляем заголовок магазина

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

Меняем архивный заголовок магазина

Если ваша тема использует функции archive_title() или get_archive_title() для отображения заголовка в архивах, то вы можете с легкостью заменить его с помощью фильтра. Вы можете вставить свое название страницы товаров вместо архивного заголовка.

Меняем количество товаров, отображаемых на странице магазина

Используется для изменения количества товаров, отображаемых за раз на странице магазина и архивов товаров (категории и теги).

Меняем количество колонок, отображаемых в магазине

Не понимаю, почему WooCommerce так работает, но вы не можете просто так изменить фильтр loop_shop_columns. Нужно добавить уникальные классы в тег body, чтобы колонки заработали. В шорткодах Woo есть div с подходящими классами, которых нет на страницах магазина, поэтому нам понадобятся 2 функции.

Меняем стрелки постраничной навигации (назад, вперед)

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

Меняем текст бейджа OnSale

Особенно полезно на сайтах использовать разные языки или удалять восклицательные знаки – я не очень их люблю.

Меняем колонки миниатюр в галерее товаров

Возможно, вы захотите сменить количество колонок миниатюр на странице галереи товаров под свой макет. Эта функция вам поможет.

Меняем количество сопутствующих товаров

Используется для изменения количества сопутствующих товаров на странице одного товара.

Меняем количество колонок для секций сопутствующих товаров и дополнительных продаж

Если хотите правильно менять количество колонок для секций сопутствующих и дополнительных продаж на странице одного товара и нескольких, вам необходимо отфильтровать колонки и сменить классы body.

Добавляем динамическую ссылку на корзину и стоимость корзины в меню

Код ниже добавит корзину WooCommerce в меню, где отображается цена товаров. Также если у вас есть шрифт Font-Awesome, он отобразит маленькую иконку корзины. Важно: эти функции нельзя заворачивать в условие is_admin(), так как они работают с AJAX для обновления стоимости. Необходимо знать, что функции доступны, когда is_admin() возвращает true и false.

Заключение

WooCommerce будет работать с любой темой по умолчанию, но нет ничего сложного в том, чтобы немного улучшить поддержку плагина, чтобы он лучше вписывался в тему. Я писал эту статью, пока кодил нашу тему New York WordPress Blog & Shop, т.е. большая часть твиков включена в нашу тему. Если хотите, можете купить тему, чтобы посмотреть, как все сделано (см. файлы в wpex-new-york/inc/woocommerce). На примере, возможно, будет легче изучить, как правильно добавлять кастомную поддержку плагина WooCommerce.

А вы знаете, какой код можно добавить в этот список, или он был бы полезен при разработке новой темы для WooCommerce?

Автор: AJ Clarke

Источник: //www.wpexplorer.com/

Редакция: Команда webformyself.

В данной статье будет рассмотрен метод изменения шаблонов плагина Woocommerce.

Разделение шаблонов категории и товара

Первым делом надо разделить общий шаблон woocommerce.php на woocommerce-product.php и woocommerce-category.php. Делаем это простой проверкой:

<?php get_header(); ?>

<div align="center" class="wrapper">
<div class="wrapper-2">

<div id="main-content">

<?php if ( is_product() ) : ?>

<?php get_template_part( 'woocommerce-product' ); ?>

<?php else: ?>

<?php get_template_part( 'woocommerce-category' ); ?>

<?php endif; ?>

</div> <!-- end main-content -->
</div>
</div>
<?php get_footer(); ?>

Редактирование шаблона WC

В специально созданном include файле для функций woocommerce прописываем и комментируем отключение всех хуков шаблонов WC.

// Отключаем стандартные хуки wordpress (категория товара)

//remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 ); // sale_flash вставлен в сам шаблон + percentage
//remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

//remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

//remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
//remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

//remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );



// Отключаем стандартные хуки wordpress (карточка товара)

//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );  add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_rating', 7 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );



// Добавить хлебные крошки под заголовок
add_action( 'woocommerce_before_shop_loop', 'woocommerce_breadcrumb', 4 ); //В категориях
add_action( 'the_woocommerce_single_title', 'woocommerce_breadcrumb', 6 ); //В карточке товара

Если нужно воздействовать на какой-либо из элементов шаблона — открываем соответствующую строку и чтоб не запутаться следом приписываем «пункт назначения» (если необходимо) и порядковый номер.

Открывающий и закрывающий хуки

• do_action( ‘woocommerce_before_single_product’ );
• do_action( ‘woocommerce_after_single_product’ );

При этом их можно так же задействовать для переноса в них других элементов шаблона.

Собственный хук для шаблона WC

Любой элемент WC можно поместить в произвольное место. Для этого открываем соответствующую строку удалив элемент из стандартной и структуры и привязываем его к собственному хуку:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );  
add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_rating', 7 );

В самом шаблоне в том месте где нужно выводить хук ставим

<?php do_action( 'the_woocommerce_single_title' ); ?>

Изменение стилей Woocommerce

Пользовательские стили для WC лучше подключать НЕ через общее подключение стилей в functions, а в специальном include для WC. В этом случае стили из нашего файла css будут перекрывать стандартные стили WC без !important.

// Добавляем свою таблицу стилей для woocommerce

function wp_enqueue_woocommerce_style(){
	wp_register_style( 'tester-woocommerce', get_template_directory_uri() . '/woocommerce.css' );
	
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'tester-woocommerce' );
	}
}

add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

Можно полностью отключить стандартные стили woocommerce

add_filter( 'woocommerce_enqueue_styles', '__return_false' );