Инструменты пользователя

Инструменты сайта


kak_otkryt_internet-magazin

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

kak_otkryt_internet-magazin [2018/11/23 17:12] (текущий)
Строка 1: Строка 1:
 +====== Как открыть интернет-магазин?​ ======
 +
 +~~Title: Интернет-магазин с помощью плагина WooCommerce для Wordpress~~
 +{{htmlmetatags>​
 +metatag-description=(Настроить магазин на плагине WooCommerce для Wordpress)
 +}}
 +
 +Техническая реализация интернет магазина на плагине WooCommerce для [[Wordpress|Wordpress]].
 +
 +Помимо популярных CMS типа OpenCart, Shopify, Magento, ECSHOP и пр., обратите внимание на менее популярные разработки. ​
 +
 +  * Okay CMS, https://​okay-cms.com Все нужное для SEO здесь есть. Ну и весь другой важный функционал.
 +  * Diafan CMS, https://​www.diafan.ru много положительных отзывов от российских коллег
 +
 +
 +===== Статистика использования CMS для интернет-магазинов =====
 +
 +Статистика использования CMS для интернет-магазинов по данным [[https://​trends.builtwith.com/​shop|built with]].
 +
 +По всему интернету:​
 +<​file>​
 +•  35% WooCommerce
 +•  8%  Shopify
 +•  4%  Magento
 +•  1%  BigCommerce
 +•  52% Другие CMS
 +</​file>​
 +
 +Россия:​
 +<​file>​
 +•  50% OpenCart
 +•  11% VirtueMart
 +•  8%  Wix Stores
 +•  7%  PrestaShop
 +•  6%  InSales
 +•  3%  osCommerce
 +
 +</​file>​
 +Украина:​
 +<​file>​
 +•  65% OpenCart
 +•  9%  VirtueMart
 +•  8%  PrestaShop
 +•  5%  Magento
 +•  4%  osCommerce
 +</​file>​
 +
 +Китай:
 +<​file>​
 +•  53% ECSHOP
 +•  24% Zen Cart
 +•  5%  Magento
 +•  3%  ShopEx
 +•  2% OpenCart
 +</​file>​
 +
 +США:
 +<​file>​
 +•  20% Shopify
 +•  19% Wix Stores
 +•  11% Squarespace Commerce
 +•  7%  Magento
 +•  5%  Zen Cart
 +•  5%  OpenCart
 +•  5%  Weebly eCommerce
 +•  5%  PrestaShop
 +</​file>​
 +===== WooCommerce =====
 +
 +  * [[https://​ru.wordpress.org/​plugins/​woocommerce/​|WooCommerce WordPress.org]]
 +  * [[REST API WC WooCommerce]]
 +  * [[https://​wiki.dieg.info/​wordpress#​kak_avtomaticheski_dobavit_alt_title_k_zagruzhennym_kartinkam_wordpress_woocommerce|Как автоматически добавить alt, title к загруженным картинкам Wordpress WooCommerce?​]]
 +
 +WooCommerce – это бесплатный плагин электронной коммерции с открытым исходным кодом, разработанный специально для WordPress. Это отличная платформа для магазина любых размеров. WooCommerce имеет целый ряд функций,​ таких как различные способы доставки и приема платежей,​ настраиваемые типы товаров и многое другое.
 +
 +WooCommerce устанавливается стандартно из каталога бесплатных плагинов WordPress. После завершения установки,​ вы увидите приветственное сообщение от WooCommerce с просьбой о запуске Помощника установки.
 +
 +
 +{{ ::​wordpress-woocommerce-02.jpg?​nolink&​400 |}}
 +
 +===== FAQ WooCommerce 3.4 =====
 +
 +  * Минимальные требования для корректной работы плагина WooCommerce:​ PHP 7.0, memory limit 128 Mb.
 +  * Размер изображения товара квадратный (1:1), рекомендую минимум 800х800px, а лучше стандарт Инстаграм 1080х1080 пикселей
 +==== WooCommerce добавление товаров ====
 +
 +Для запуска интернет-магазина,​ безусловно,​ первой вещью является ​ добавление товаров. Но для начала важно изучить основы WooCommerce и узнать о том, что такое категории,​ атрибуты и типы товаров:​
 +
 +  * **Категория товара** – категория товара помогает сгруппировать ваши товары. К примеру,​ если вы продаете верхнюю одежду,​ белье и другие группы товаров. Категория позволяет покупателю быстро найти товар из той же категории. Вы можете создать столько категорий,​ сколько захотите и сможете отредактировать их в любое время.
 +  * **Атрибуты** – атрибуты помогают в сортировке товаров. Размер,​ цвет, ткань и другие атрибуты помогают пользователю легко выбрать желаемый товар. Вы можете присвоить атрибут для каждого товара по отдельности,​ либо установить атрибут для всей страницы.
 +  * **Тип товара** – в WooCommerce существуют предустановленные типы товаров,​ которые сэкономят ваше время.
 +  * **Простой** – этот тип товаров поставляется без каких-либо опций. К примеру,​ бумажная книга.
 +  * **Сгруппированный** – это группа связанных между собой **простых товаров**,​ которые можно купить отдельно. Например,​ Playstation может быть сгруппированным товаром с 80Гб, 120Гб и 200Гб памяти и являться вариацией одного и того же родительского товара.
 +  * **Виртуальный** – товары не нуждающиеся в доставке,​ вроде услуг.
 +  * **Скачиваемый** – это товары которые вы можете скачать. К примеру песни, изображения,​ видео, электронные книги и т.д.
 +  * **Внешний/​Партнерский** – вы рекламируете этот товар на вашем сайте, но он продается в другом месте.
 +  * **Вариативный** – эти товары имеют разные свойства:​ размер,​ цвет и т.д. К примеру одежда.
 +
 +Процесс добавления товаров на ваш сайт напоминает публикацию статьи в блоге. Для начала,​ пройдите в раздел Товары и кликните кнопку Добавить товар или Создайте свой первый товар!
 +
 +==== Кастомизация Storefront темы для WooCommerce ====
 +
 +Storefront это бесплатная тема для WordPress, доступная любому магазину на WooCommerce. Вместе с глубокой интеграцией с WooCommerce,​ Storefront имеет в приоритете скорость и безотказность,​ исключая конфликты между темой и плагином после крупных обновлений. Определите ваш стиль путём кастомизации Storefront по вашему вкусу, или выберите одну из [[https://​woocommerce.com/​product-category/​themes/​storefront-child-theme-themes/​|дочерних тем Storefront]]. Это всё на ваше усмотрение и с открытым исходным кодом.
 +
 +Все изменения Storefront рекомендуется производить в дочерней теме. [[https://​blogved.ru/​wp-content/​uploads/​2017/​02/​storefront-child-2.zip|Скачать чистую дочернюю тему Storefront]].
 +
 +
 +==== Как убрать product и product-categoty из URL WooCommerce?​ ====
 +Простого решения нет. Существуют платные плагины для решения проблемы.
 +
 +Моя настройка:​ переходим "​Настройка-постоянные ссылки":​
 +  - Параметр "​База категорий товара"​ указываем одну букву "​p"​
 +  - В группе "​Постоянные ссылки товаров"​ выбираем параметр "​База магазина"​
 +
 +Получаем укороченный URL и все товары буду находится в категории /shop/
 +{{ ::​woo-01.jpg?​nolink&​600 |}}
 +
 +==== Как вместо знака валюты вывести название валюты в WooCommerce?​ ====
 +По умолчанию,​ WooCommerce выводит украинскую гривну в виде знака (₴). Мне нужно знак (₴) заменить на грн.
 +Для этого в Woocommerce существует встроенная функция woocommerce_currency_symbol. Ниже указан код, который требуется вставить в function.php темы вашего магазина:​
 +<file php>
 +add_filter('​woocommerce_currency_symbol',​ '​change_existing_currency_symbol',​ 10, 2);
 +
 +function change_existing_currency_symbol( $currency_symbol,​ $currency ) {
 +     ​return '​грн';​
 +}
 +</​file>​ Более подробно смотрите в документации WooCommerce [[https://​docs.woocommerce.com/​document/​change-a-currency-symbol/​|Change a currency symbol]]
 +
 +==== Как включить или отключить систему рейтингов товаров и отзывы в WooCommerce?​ ====
 +
 +Для включения системы рейтингов WooCommerce для определенного товара:​
 +  - Авторизуйтесь в админ-панель вашего сайта и перейдите во вкладку Товары -> Все товары
 +  - Нажмите на кнопку Свойства нужного вам товара.
 +  - Поставьте галочку "​Включить отзывы"​ и нажмите обновить,​ смотрите скриншот ниже. После этого на странице товара станет активная вкладка отзывов.
 +
 +{{ ::​woo-02.jpg?​direct&​600 |}}
 +
 +==== Как удалить форму отзывов на странице в WooCommerce?​ ====
 +
 +Для удаления вкладки отзывов достаточно добавить небольшой код в файл functions.php активной темы на вашем сайте.
 +
 +<file php>
 +<?php
 +add_filter( '​woocommerce_product_tabs',​ '​wcs_woo_remove_reviews_tab',​ 98 );
 +function wcs_woo_remove_reviews_tab($tabs) {
 +    unset($tabs['​reviews'​]);​
 +    return $tabs;
 +}
 +?>
 +</​file>​
 +После этого обновите файл functions.php на сервере и обновив страницу товара вы увидите что вкладка Отзывы на странице товара отключена.
 +==== Как убрать ссылку на Storefront Woocommerce в футере сайта? ====
 +  * [[https://​wpthememakeover.com/​2016/​02/​15/​how-to-change-footer-text-in-the-storefront-theme-for-woocommerce/​|How to Change Footer Text in the Storefront Theme for WooCommerce]]
 +
 +Для того чтобы убрать ссылку с надписью "​Работает на Storefront и WooCommerce.",​ нужно переопределить встроенную в тему Storefront функцию ​ storefront_credit. Для этого в дочерней теме Storefront в файле functions.php вписываем код
 +
 +  - Первый вариант (рекомендуемый мной)<​file php>
 +/*Delete Footer Text in the Storefront Theme */
 +
 +function storefront_credit() {
 +        ?>
 +        <div class="​site-info">​
 +                &copy; <?php echo get_bloginfo( '​name'​ ) . ' ' . get_the_date( '​Y'​ ); ?>
 +        </​div><​!-- .site-info -->
 +        <?php
 +}
 +</​file>​
 +  - Второй вариант,​ очень сильно распространенный в интернете,​ но на мой взгляд не к месту сложный<​file php>
 +add_action( '​init',​ '​custom_remove_footer_credit',​ 10 );
 +
 +function custom_remove_footer_credit () {
 +    remove_action( '​storefront_footer',​ '​storefront_credit',​ 20 );
 +    add_action( '​storefront_footer',​ '​custom_storefront_credit',​ 20 );
 +
 +
 +function custom_storefront_credit() {
 + ?>
 + <div class="​site-info">​
 + &​copy;​ <?php echo get_bloginfo( '​name'​ ) . ' ' . get_the_date( '​Y'​ ); ?>
 + </​div><​!-- .site-info -->
 + <?php
 +}
 +</​file>​
 +==== Как в Wordpress Storefront Woocommerce в футере социальные иконки сделать FB и Instagram (2 варианта) ====
 +**Первый вариант:​**
 +  - Код для социальных сетей HTML и CSS копируем из [[https://​inter-net.pro/​css/​knopki-sotssetej-dlya-sajta|https://​inter-net.pro/​css/​knopki-sotssetej-dlya-sajta]]
 +  - Код CSS вставляем в файл стилей дочерней темы Storefront public/​wp-content/​themes/​storefront-child/​style.css
 +  - Код HTML вставляем в файл footer.php дочерней темы Storefront public/​wp-content/​themes/​storefront-child/​footer.php перед строкой </​div><​!-- .col-full -->
 +{{ ::​storefront-footer.jpg?​nolink&​600 |}}
 +
 +**Второй вариант (рекомендую!):​** установите виджет от Jetpack настройте его
 +{{ ::​jetpack-social-01.jpg?​nolink&​600 |}}
 +==== Как сделать поиск по артикулу (SKU) товара в WooCommerce ====
 +Поиск товара по артикулу (SKU) в Wordpress Storefront Woocommerce не реализован. Поиск товаров по артикулу нужен менеджерам,​ общающихся с заказчиками в онлайн-режиме,​ проводящих ревизии интернет-магазина,​ создающих выборки определенных типов товаров. Полезным окажется такой поиск и для посетителей интернет-магазина,​ знающих артикулы продукции.
 +
 +В интернете я нашел 2 варианта.
 +
 +**(Рекомендую!) Первый вариант позволяет добавить поиск только по артикулу (SKU) товара в WooCommerce.**
 +Плагин [[https://​wordpress.org/​plugins/​search-by-sku-for-woocommerce/​|Search by SKU for Woocommerce
 +By Matthew Lawson]]. После установки и активации плагина. На странице Виджеты разместите в подходящее место стандартный (дефолтный) виджет WordPress Поиск. Особых рекомендаций к месту размещения нет – вебмастеры устанавливают поисковое поле и в навигационное меню, и в шапку сайта, и в сайдбар (боковую панель). Выбирайте сами, ориентируясь на дизайн вашего интернет-магазина. Установленный плагин дополняет стандартный Поиск возможностью поиска по артикулам товаров в Woocommerce. При этом стандартные «свойства» поисковый движок WordPress не теряет. Search by SKU не имеет настроек и начинает работу сразу после активации.
 +
 +**Второй вариант добавляет поиск Woocommerce по артикулу,​ атрибутам,​ описанию товара и цене товара.** Источник:​ [[https://​inprocess.by/​blog/​poisk-woocommerce-po-artikulu-atributam-opisaniyu-tovara/​|Поиск Woocommerce по артикулу,​ атрибутам,​ описанию товара]]. Поиск woocommerce по умолчанию ищет по заголовку товара и его описанию. Для того, чтобы поиск смог искать по артикулу,​ атрибутам товара и любым другим мета-данным (например по цене товара) нужно установить [[https://​wordpress.org/​plugins/​relevanssi/​|плагин Relevanssi – A Better Search
 +By Mikko Saari]] . Он также умеет делать поисковую выдачу более релевантной запросу,​ чем стандартный поиск WooCommerce.
 +
 +<note warning>​Для правильной настройки читаем статью [[https://​www.relevanssi.com/​user-manual/​woocommerce/​|Relevanssi Index SKUs]]</​note>​
 +
 +Для того, чтобы настроить поиск по товарам и категориям WooCommerce перейдем в настройки плагина ( меню настройки->​Relevanssi):​
 +  * Настройки индексирования выделяем product и product_variation
 +  * Выберите таксономии для индексирования - тут выделяем product_cat и product_tag
 +  * Произвольные поля (Custom fields) для индексирования:​ выбираем all
 +  * Снимаем галочку:​ Expand shortcodes when indexing
 +  * Для создания индекса жмем кнопку "Build the index",​ смотрите на скрншоте:​
 +
 +{{ ::​relevanssi-01.jpg?​nolink&​600 |}}
 +==== Как добавить вариативный товар в сгруппированный?​ ====
 +
 +Итак, задача:​
 +У меня есть вариативные товары:​
 +  * портативная аудиоколонка (цвет чёрный и серебристый);​
 +  * чехол-бампер для неё (пяти цветов);​
 +и простой товар:
 +  * дорожная сумка для неё.
 +
 +Из этих трёх товаров мне хочется сделать ещё один товар (сгруппированный) - комплект:​ серебристая колонка + розовый чехол + сумка.
 +
 +Решение:​
 +  - Дублирую товар "​портативная аудиоколонка",​ удаляю вариации,​ меняю название и URL, меняю тип товара на сгруппированный. Публикую его.
 +  - Захожу в редактирование товара "​дорожная сумка"​ и во вкладке "​Сопутствующие"​ нахожу и добавляю Группировку - товар, созданный в пункте 1. Всё просто,​ потому что товар простой.
 +  - Если попытаться точно так же добавить розовый чехол или серебристую колонку,​ то не получится. Поэтому опять выполняем п.1 с нужным вариативным товаром и публикуем нужную вариацию в виде простого,​ но СКРЫТОГО товара. Затем легко добавляем его в группировку,​ как в п.2.
 +
 +
 +==== Как удалить похожие товары в woocommerce ====
 +Возможность отключать похожие товары,​ следует применять для магазина который просто продает свой товар, и у которых нет связанных похожих товаров.
 +Для отключения добавьте в конец файла function.php вашей темы:
 +<file php>
 +remove_action('​woocommerce_after_single_product_summary',​ '​woocommerce_output_related_products',​ 20);
 +</​file>​
 +
 +==== Как заменить слово "​Распродажа"​ Акция в woocommerce ====
 +
 +Для замены этого слова нужно использовать хук woocommerce_sale_flash.
 +
 +<file php>
 +add_filter('​woocommerce_sale_flash',​ '​my_custom_sale_flash'​);​
 +function my_custom_sale_flash() {
 +return '<​span class="​onsale">​Акция!</​span>';​
 +}
 +</​file>​
 +Для изменения стиля надписи,​ добавим в файл style.css дочерней темы Storefront
 +<file css>
 +span.onsale {
 +padding: 3px 7px;
 +background: #7b1616;
 +color: white;
 +font-size: 13px;
 +}
 +</​file>​
 +==== Как переименовать в woocommerce кнопку "В корзину"​ на "​Купить"​ ====
 +Если вы хотите изменить стандартные названия кнопок в WooCommerce,​ вам надо добавить несколько строк кода в файл functions.php. Вы можете добавить этот код в файл functions.php дочерней темы. Альтернативный вариант переименования кнопок - это использования плагина [[https://​wordpress.org/​plugins/​woocommerce-jetpack/​|Booster WooCommerce]].
 +<file php>
 +<?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'​ );
 +}
 +</​file>​
 +===== Расширение и плагины для WooCommerce =====
 +  * [[http://​info-effect.ru/​plaginy-dlya-woocommerce-wordpress.html|Супер плагины для Woocommerce WordPress]]
 +
 +
 +  * [[https://​wordpress.org/​plugins/​woocommerce-delivery-notes/​|WooCommerce Print Invoice & Delivery Note]] Заметки о доставке.
 +  * [[https://​wordpress.org/​plugins/​woocommerce-pdf-invoices-packing-slips/​|WooCommerce PDF Invoices & Packing Slips]] PDF-накладные и описи заказов.
 +  * [[https://​wordpress.org/​plugins/​affiliates-woocommerce-light/​|Affiliates WooCommerce Light]] Интеграция партнёрской программы Light
 +
 +  * [[https://​wordpress.org/​plugins/​easy-woocommerce-customizer/​|Easy Woocommerce Customizer]] не обновлялся с 2 года, но работает. Позволяет удалить лишние поля со страницы «Оформление заказа» или добавить новые.
 +  * [[https://​wordpress.org/​plugins/​woocommerce-jetpack/​|Booster for WooCommerce]] умеет изменять цены и валюты. Ценовые и кнопочные этикетки. Добавить пользовательские данные на странице корзины.
 +
 +
 +===== WooCommerce импорт экспорт товаров из CSV, XML прайсов при помощи плагина WP All Import =====
 +
 +  * [[https://​wordpress.org/​plugins/​wp-all-import/​|WP All Import: Import any XML or CSV File to WordPress]]
 +  * [[http://​www.wpallimport.com/​documentation/​woocommerce/​overview/​|Документация по импорту в WooCommerce для плагина WP All Import]]
 +
 +Установка плагина WP All Import для импорта товаров их XML в WooCommerce
 +  - Устанавливаем плагин [[https://​wordpress.org/​plugins/​wp-all-import/​|WP All Import]] и активируем
 +  - Устанавливаем дополнение к плагину [[https://​wordpress.org/​plugins/​woocommerce-xml-csv-product-import/​|Import Products from any XML or CSV to WooCommerce]] ​ и активируем
 +
 +{{ ::​wp-all-import-01.jpg?​600 |}}
 +
 +{{ youtube>​SD_34K0dkzg?​large }}
 +
 +=== Плагины для импорта/​экспорта товаров WooCommerce ​ ===
 +
 +  * [[https://​wordpress.org/​plugins/​simple-woocommerce-csv-loader/​|Ultimate WooCommerce CSV Importer]] умеет загружать изображения через URL или локальный путь к файлу. Обнаруживает и пропускает повторяющиеся изображения!
 +  * [[https://​wordpress.org/​plugins/​product-import-export-for-woo/​|Product Import Export for WooCommerce By WebToffee]] позволит производить импорт и экспорт товаров WooCommerce. Установить данный плагин вы сможете прямо из админ-панели wordpress. После установки и активации плагина,​ перейдите на страницу:​ WooCommerce — Product Im-Ex. Здесь вы сможете импортировать или экспортировать товары WooCommerce. Настройки по молчанию менять не надо, он вполне рабочие. [[https://​www.xadapter.com/​setting-up-product-import-export-plugin-for-woocommerce/#​product-import-export|Таблица описания названия полей базы данных для импорта]]
 +  * [[https://​wordpress.org/​plugins/​woocommerce-xml-csv-product-import/​|Import Products from any XML or CSV to WooCommerce]]. Бесплатная версия называется [[https://​wordpress.org/​plugins/​wp-all-import/​|Import any XML or CSV File to WordPress]]
 +
 +===== Google аналитика и WooCommerce =====
 +[[https://​wordpress.org/​plugins/​woocommerce-google-analytics-integration/​|WooCommerce Google Analytics Integration]] - для подключения Google Аналитика. Бесплатный. После установки плагина,​ появляется вкладка "​Интеграция":​ WooCommerce->​ Настройки->​ Интеграция. Где нужно вставить Google Analytics ID.
 +
 +<note tip>В настройках Google Analytics обязательно включите расширенную электронную торговлю и ремаркетинг.</​note>​
 +
 +Для корректной работы плагина необходимо внести следующие настройки:​
 +  - Google Analytics ID: сюда вставляем ваш ID, полученный на этапе настройки Google Analytics
 +  - Enable Standard Tracking: включаем
 +  - Enable Universal Analytics: отмечаем
 +  - Purchase Transactions:​ отмечаем
 +  - Add to Cart Events: отмечаем
 +  - Enable Enhanced eCommerce: отмечаем
 +
 +Остальные пункты можно оставить без изменений.
 +<note important>​Плагин GoogleTag Assistant не видит кода Google аналитика на сайте, но все работает!</​note>​
 +
 +
 +===== Купоны в WooCommerce =====
 +Плагин [[https://​wordpress.org/​plugins/​woocommerce-auto-added-coupons/​|WooCommerce Extended Coupon Features]] расширяет возможности настроек купонов. После активации плагина добавятся новые настройки WooCommerce->​Купоны.
 +
 +==== Оформление страницы заказа плагин WooCommerce Flexible Checkout Fields ====
 +
 +{{ ::​flexible_checkout_fields_for_woocommerce.jpg?​nolink |}}
 +
 +  * [[https://​wordpress.org/​plugins/​flexible-checkout-fields/​|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. Справа у вас появится новый виджет поля. Сохраните настройки.
  
загрузка...
kak_otkryt_internet-magazin.txt · Последние изменения: 2018/11/23 17:12 (внешнее изменение)