Как открыть интернет-магазин?

Популярные CMS для магазинов OpenCart, Shopify, Magento и менее популярные разработки ECSHOP, Okay CMS, Diafan CMS. WooCommerce – это бесплатный плагин электронной коммерции с открытым исходным кодом, разработанный специально для WordPress. Это отличная платформа для магазина любых размеров. WooCommerce имеет целый ряд функций, таких как различные способы доставки и приема платежей, настраиваемые типы товаров и многое другое.

WooCommerce устанавливается стандартно из каталога бесплатных плагинов WordPress. После завершения установки, вы увидите приветственное сообщение от WooCommerce с просьбой о запуске Помощника установки.

Техническая реализация интернет магазина на плагине WooCommerce для Wordpress. Читайте также:

• Что нужно сделать, чтобы отключить лишние функции в WooCommerce?
• Нативный способ перевода строка Wordpress WooCommerce без плагинов
• Как использовать шорткоды Wordpress и WooCommerce
• Storefront для WooCommerce cоветы, хитрости и настройка CSS
• Как создать свою сортировку WooCommerce версии 3.5.1 и старше
• Как добавить товар в Pinterest из магазина WooCommerce Wordpress
• Как изменять и добавлять вкладки в карточках товарах WooCommerce
• Использование REST API WC WooCommerce для для добавления товара
• Как автоматически добавить alt, title к загруженным картинкам Wordpress WooCommerce?

• Плагин Product Subtitle For WooCommerce создает заголовки и подзаголовки для товаров. Подзаголовок можно будет указывать для названия товара, для цены, для рейтинга, для отрывка, для описания, для кнопки "Добавить в корзину". В настройках плагина можно будет указать расположение надписи, до или после. Можно будет выбрать размер подзаголовка или заголовка от h1 до h6, либо обычный текст.
• WooCommerce Product Table (WCPT)

Статистика использования CMS для интернет-магазинов по данным BuiltWith Top Sites Rank.

По всему интернету:

•  35% WooCommerce
•  8%  Shopify
•  4%  Magento
•  1%  BigCommerce
•  52% Другие CMS

Россия:

•  50% OpenCart
•  11% VirtueMart
•  8%  Wix Stores
•  7%  PrestaShop
•  6%  InSales
•  3%  osCommerce

Характеристика ГЕO Украина. Важно выбрать оптимальный хостинг для вашего магазина в Украине.

•  65% OpenCart
•  9%  VirtueMart
•  8%  PrestaShop
•  5%  Magento
•  4%  osCommerce

Китай:

•  53% ECSHOP
•  24% Zen Cart
•  5%  Magento
•  3%  ShopEx
•  2% OpenCart

США:

• 20% Обзор возможностей Shopify
• 19% Wix Stores
• 11% Squarespace Commerce
• 7% Magento
• 5% Zen Cart
• 5% OpenCart
• 5% Weebly eCommerce
• 5% PrestaShop

Минимальные системные требования для корректной работы плагина WooCommerce: PHP 7.0, memory limit 128 Mb.

Желательно выбирать хорошо зарекомендовавший себя хостинг, который будет заточен под работу с WordPress вообще и возможно именно под интернет магазин. Если у вас большие амбиции в плане электронной коммерции, у вашего интернет-магазина хорошая посещаемость, и там уже добавлено 100+ товаров, то советуем вам подумать о VPS.

Каждый атрибут, и его значение в сайте WooCommerce создает страницы. Зачастую это мусорные страницы и на них никогда не будет SEO. Иногда такие страницы действительно нужно, иногда нет. Если вы не уверены нудны или нет - закройте их от индексации плагином Yoast SEO.

Если вам точно они не нужны, зайдите в настройку атрибутов и уберите галочка с "Включать архивы".

Для запуска интернет-магазина, безусловно, первой вещью является добавление товаров. Но для начала важно изучить основы WooCommerce и узнать о том, что такое категории, атрибуты и типы товаров:

• Категория товара – категория товара помогает сгруппировать ваши товары. К примеру, если вы продаете верхнюю одежду, белье и другие группы товаров. Категория позволяет покупателю быстро найти товар из той же категории. Вы можете создать столько категорий, сколько захотите и сможете отредактировать их в любое время.
• Атрибуты – атрибуты помогают в сортировке товаров. Размер, цвет, ткань и другие атрибуты помогают пользователю легко выбрать желаемый товар. Вы можете присвоить атрибут для каждого товара по отдельности, либо установить атрибут для всей страницы.
• Тип товара – в WooCommerce существуют предустановленные типы товаров, которые сэкономят ваше время.
• Простой – этот тип товаров поставляется без каких-либо опций. К примеру, бумажная книга.
• Сгруппированный – это группа связанных между собой простых товаров, которые можно купить отдельно. Например, Playstation может быть сгруппированным товаром с 80Гб, 120Гб и 200Гб памяти и являться вариацией одного и того же родительского товара.
• Виртуальный – товары не нуждающиеся в доставке, вроде услуг.
• Скачиваемый – это товары которые вы можете скачать. К примеру песни, изображения, видео, электронные книги и т.д.
• Внешний/Партнерский – вы рекламируете этот товар на вашем сайте, но он продается в другом месте.
• Вариативный – эти товары имеют разные свойства: размер, цвет и т.д. К примеру одежда.

Процесс добавления товаров на ваш сайт напоминает публикацию статьи в блоге. Для начала, пройдите в раздел Товары и кликните кнопку Добавить товар или Создайте свой первый товар!

Простого решения нет. Существуют платные плагины для решения проблемы, например Настройка Rank Math SEO плагина для WordPress.

Моя настройка: переходим "Настройка-постоянные ссылки":

1. Параметр "База категорий товара" указываем одну букву "p"
2. В группе "Постоянные ссылки товаров" выбираем параметр "База магазина"

Получаем укороченный URL и все товары буду находится в категории /shop/

По умолчанию, WooCommerce выводит украинскую гривну в виде знака (₴). Мне нужно знак (₴) заменить на грн. Для этого в Woocommerce существует встроенная функция woocommerce_currency_symbol. Ниже указан код, который требуется вставить в function.php темы вашего магазина:

add_filter('woocommerce_currency_symbol', 'change_existing_currency_symbol', 10, 2);
 
function change_existing_currency_symbol( $currency_symbol, $currency ) {
     return 'грн';
}

Более подробно смотрите в документации WooCommerce Change a currency symbol

Для включения системы рейтингов WooCommerce для определенного товара:

1. Авторизуйтесь в админ-панель вашего сайта и перейдите во вкладку Товары → Все товары
2. Нажмите на кнопку Свойства нужного вам товара.
3. Поставьте галочку "Включить отзывы" и нажмите обновить, смотрите скриншот ниже. После этого на странице товара станет активная вкладка отзывов.

Поиск товара по артикулу (SKU) в Wordpress Storefront Woocommerce не реализован. Поиск товаров по артикулу нужен менеджерам, общающихся с заказчиками в онлайн-режиме, проводящих ревизии интернет-магазина, создающих выборки определенных типов товаров. Полезным окажется такой поиск и для посетителей интернет-магазина, знающих артикулы продукции.

В интернете я нашел 2 варианта.

(Рекомендую!) Первый вариант позволяет добавить поиск только по артикулу (SKU) товара в WooCommerce. Плагин Search by SKU for Woocommerce By Matthew Lawson. После установки и активации плагина. На странице Виджеты разместите в подходящее место стандартный (дефолтный) виджет WordPress Поиск. Особых рекомендаций к месту размещения нет – вебмастеры устанавливают поисковое поле и в навигационное меню, и в шапку сайта, и в сайдбар (боковую панель). Выбирайте сами, ориентируясь на дизайн вашего интернет-магазина. Установленный плагин дополняет стандартный Поиск возможностью поиска по артикулам товаров в Woocommerce. При этом стандартные «свойства» поисковый движок WordPress не теряет. Search by SKU не имеет настроек и начинает работу сразу после активации.

Второй вариант добавляет поиск Woocommerce по артикулу, атрибутам, описанию товара и цене товара. Источник: Поиск Woocommerce по артикулу, атрибутам, описанию товара. Поиск woocommerce по умолчанию ищет по заголовку товара и его описанию. Для того, чтобы поиск смог искать по артикулу, атрибутам товара и любым другим мета-данным (например по цене товара) нужно установить плагин Relevanssi – A Better Search By Mikko Saari . Он также умеет делать поисковую выдачу более релевантной запросу, чем стандартный поиск WooCommerce.

Для того, чтобы настроить поиск по товарам и категориям WooCommerce перейдем в настройки плагина ( меню настройки→Relevanssi):

• Настройки индексирования выделяем product и product_variation
• Выберите таксономии для индексирования - тут выделяем product_cat и product_tag
• Произвольные поля (Custom fields) для индексирования: выбираем all
• Снимаем галочку: Expand shortcodes when indexing
• Для создания индекса жмем кнопку "Build the index", смотрите на скрншоте:

Итак, задача: У меня есть вариативные товары:

• портативная аудиоколонка (цвет чёрный и серебристый);
• чехол-бампер для неё (пяти цветов);

и простой товар:

• дорожная сумка для неё.

Из этих трёх товаров мне хочется сделать ещё один товар (сгруппированный) - комплект: серебристая колонка + розовый чехол + сумка.

Решение:

1. Дублирую товар "портативная аудиоколонка", удаляю вариации, меняю название и URL, меняю тип товара на сгруппированный. Публикую его.
2. Захожу в редактирование товара "дорожная сумка" и во вкладке "Сопутствующие" нахожу и добавляю Группировку - товар, созданный в пункте 1. Всё просто, потому что товар простой.
3. Если попытаться точно так же добавить розовый чехол или серебристую колонку, то не получится. Поэтому опять выполняем п.1 с нужным вариативным товаром и публикуем нужную вариацию в виде простого, но СКРЫТОГО товара. Затем легко добавляем его в группировку, как в п.2.

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

remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

Для замены этого слова нужно использовать хук woocommerce_sale_flash.

add_filter('woocommerce_sale_flash', 'my_custom_sale_flash');
function my_custom_sale_flash() {
return '<span class="onsale">Акция!</span>';
}

Код для мультиязычного сайта на плагине Polylang:

add_filter('woocommerce_sale_flash', 'my_custom_sale_flash', 10, 3);
function my_custom_sale_flash($text, $post, $product) {
    if (function_exists('pll_current_language')) {
        $current_lang = pll_current_language();
 
        $translations = array(
            'ru' => 'Акция!',
            'en' => 'Sale!',
            'uk' => 'Розпродаж!'
            // Добавьте другие языки по необходимости
        );
 
        if (isset($translations[$current_lang])) {
            return '<span class="onsale">' . $translations[$current_lang] . '</span>';
        }
    }
 
    // Если Polylang не активен или нет перевода для текущего языка,
    // возвращаем оригинальный текст без изменений
    return $text;
}

Для изменения стиля надписи, добавим в файл style.css дочерней темы Storefront

span.onsale {
padding: 3px 7px;
background: #7b1616;
color: white;
font-size: 13px;
}

Если вы хотите изменить стандартные названия кнопок в WooCommerce, вам надо добавить несколько строк кода в файл functions.php. Вы можете добавить этот код в файл functions.php дочерней темы. Альтернативный вариант переименования кнопок - это использования плагина Booster WooCommerce.

<?php
/* Add to cart */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'tb_woo_custom_cart_button_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'tb_woo_custom_cart_button_text' );   
function tb_woo_custom_cart_button_text() {
        return __( 'Купить', 'woocommerce' );
}

Скрыть можно так: Настройки - Доставка - Назначение доставки - По умолчанию на адрес оплаты или Принудительная доставка по платёжному адресу клиента.

Удалить с помощью кода:

add_filter( 'woocommerce_cart_needs_shipping_address', '__return_false');

Отключить woocommerce-product-gallery__trigger. По умолчанию увеличение изображения включено для продуктов в магазине WooCommerce. Но я не хочу масштабировать изображение. Для отключения лайтбокса и кнопки "Лупа" используйте код:

// Удаляет лупу для увеличения картинок
function remove_product_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_product_zoom_support', 100 );

WooCommerce автоматически помещает основное изображение продукта в тег <a>. Решение найдено у Mike Haydon подробнее смотрите на его странице.

Чтобы удалить ссылку вокруг изображения продукта WooCommerce, добавьте следующий код в свой файл function.php. При этом берется необработанный HTML и удаляется все, кроме div и изображения.

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'custom_remove_product_link' );
function custom_remove_product_link( $html ) {
  return strip_tags( $html, '<div><img>' );
}

• Супер плагины для Woocommerce WordPress
• Saphali Woocommerce Russian – Набор Русских дополнений для магазина WooCommerce! В общий список валют будут добавлены: Украинская гривна, Российский рубль, Белорусский рубль, Армянский драм, Киргизский сом, Казахстанский тенге, Узбекский сум.

• 2 способа редактирвоания полей оформления заказа в WooCommerce
• WooCommerce Print Invoice & Delivery Note Заметки о доставке.
• WooCommerce PDF Invoices & Packing Slips PDF-накладные и описи заказов.
• Affiliates WooCommerce Light Интеграция партнёрской программы Light

• Easy Woocommerce Customizer не обновлялся с 2 года, но работает. Позволяет удалить лишние поля со страницы «Оформление заказа» или добавить новые.
• Booster for WooCommerce умеет изменять цены и валюты. Ценовые и кнопочные этикетки. Добавить пользовательские данные на странице корзины.

1. Импорт/экспорт товаров xml/yml/csv в WooCommerce: WP All Import и другие плагины
2. Настройка WooCommerce микроразметки для Google Merchant, выгрузка фидов выгрузка фида, микроразметка

WooCommerce Google Analytics Integration - для подключения Google Аналитика. Бесплатный. После установки плагина, появляется вкладка "Интеграция": WooCommerce→ Настройки→ Интеграция. Где нужно вставить Google Analytics ID.

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

1. Google Analytics ID: сюда вставляем ваш ID, полученный на этапе настройки Google Analytics
2. Enable Standard Tracking: включаем
3. Enable Universal Analytics: отмечаем
4. Purchase Transactions: отмечаем
5. Add to Cart Events: отмечаем
6. Enable Enhanced eCommerce: отмечаем

Остальные пункты можно оставить без изменений.

Плагин WooCommerce Extended Coupon Features расширяет возможности настроек купонов. После активации плагина добавятся новые настройки WooCommerce→Купоны.

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

function custom_pre_get_posts_query( $q ) {
 
    $tax_query = (array) $q->get( 'tax_query' );
 
    $tax_query[] = array(
           'taxonomy' => 'product_cat',
           'field' => 'slug',
           'terms' => array( 'clothing' ), // Don't display products in the clothing category on the shop page.
           'operator' => 'NOT IN'
    );
 
 
    $q->set( 'tax_query', $tax_query );
 
}
add_action( 'woocommerce_product_query', 'custom_pre_get_posts_query' );

Важно! Тут вместо «clothing» опять же подставляете свой slug, причем если вам нужно исключить несколько рубрик, то в сниппете, указанном выше, сроку с параметром ‘terms’ надо заменить на следующую (не забудьте запятую в конце):

'terms' => array( 'chaj','hyson' ),

• Flexible Checkout Fields for WooCommerce By WP Desk

После установки и активации плагина перейдите на страницу: Woocommerce —> Checkout Fields. Здесь вы можете редактировать поля, которые отображаются на странице оформления заказа.

Каждое виджет поля имеет много настроек. Чтобы изменить их откройте нужный вам виджет. На вкладке General:

• Enable Field, включить или отключить поле.
• Required Field, сделать поле обязательным или нет.
• Label, указать название поля.

На вкладке Appearance:

• Placeholder, можно указать текст внутри поля по умолчанию.
• CSS Class, указать стиль и класс поля.
• Сохраните изменения.

Можно добавить новое поле. Слева в блоке Add New Field, выберите тип поля, укажите название поля и нажмите на кнопку Add Field. Справа у вас появится новый виджет поля. Сохраните настройки.

Если цена в Woocommerce не задана или равна 0, вы можете использовать хук woocommerce_get_price_html, например

add_filter( 'woocommerce_get_price_html', 'product_price_free_zero_empty', 100, 2 );
 
function product_price_free_zero_empty( $price, $product ){
if ( '' === $product->get_price() || 0 == $product->get_price() ) {
    $price = '<span class="woocommerce-Price-amount amount">Цену уточняйте</span>';
}
return $price;
}