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

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


kak_otkryt_internet-magazin

Содержание

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

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

Помимо популярных CMS типа OpenCart, Shopify, Magento, ECSHOP и пр., обратите внимание на менее популярные разработки.

  • Okay CMS, https://okay-cms.com Все нужное для SEO здесь есть. Ну и весь другой важный функционал.
  • Diafan CMS, https://www.diafan.ru много положительных отзывов от российских коллег

Статистика использования CMS для интернет-магазинов

Статистика использования CMS для интернет-магазинов по данным built with.

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

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

Россия:

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

Украина:

•  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

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

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

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 по вашему вкусу, или выберите одну из дочерних тем Storefront. Это всё на ваше усмотрение и с открытым исходным кодом.

Все изменения Storefront рекомендуется производить в дочерней теме. Скачать чистую дочернюю тему Storefront.

Как убрать product и product-categoty из URL WooCommerce?

Простого решения нет. Существуют платные плагины для решения проблемы.

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

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

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

Как вместо знака валюты вывести название валюты в WooCommerce?

По умолчанию, 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?

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

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

Как удалить форму отзывов на странице в WooCommerce?

Для удаления вкладки отзывов достаточно добавить небольшой код в файл functions.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;
}
?>

После этого обновите файл functions.php на сервере и обновив страницу товара вы увидите что вкладка Отзывы на странице товара отключена.

Как убрать ссылку на Storefront Woocommerce в футере сайта?

Для того чтобы убрать ссылку с надписью "Работает на Storefront и WooCommerce.", нужно переопределить встроенную в тему Storefront функцию storefront_credit. Для этого в дочерней теме Storefront в файле functions.php вписываем код

  1. Первый вариант (рекомендуемый мной)
    /*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
    }
  2. Второй вариант, очень сильно распространенный в интернете, но на мой взгляд не к месту сложный
    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
    }

Как в Wordpress Storefront Woocommerce в футере социальные иконки сделать FB и Instagram (2 варианта)

Первый вариант:

  1. Код для социальных сетей HTML и CSS копируем из https://inter-net.pro/css/knopki-sotssetej-dlya-sajta
  2. Код CSS вставляем в файл стилей дочерней темы Storefront public/wp-content/themes/storefront-child/style.css
  3. Код HTML вставляем в файл footer.php дочерней темы Storefront public/wp-content/themes/storefront-child/footer.php перед строкой </div><!– .col-full –>

Второй вариант (рекомендую!): установите виджет от Jetpack настройте его

Как сделать поиск по артикулу (SKU) товара в WooCommerce

Поиск товара по артикулу (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.

Для правильной настройки читаем статью Relevanssi Index SKUs

Для того, чтобы настроить поиск по товарам и категориям 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.

Как удалить похожие товары в woocommerce

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

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

Как заменить слово "Распродажа" Акция в woocommerce

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

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

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

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

Как переименовать в woocommerce кнопку "В корзину" на "Купить"

Если вы хотите изменить стандартные названия кнопок в 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' );
}

Расширение и плагины для WooCommerce

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

WooCommerce импорт экспорт товаров из CSV, XML прайсов при помощи плагина WP All Import

Установка плагина WP All Import для импорта товаров их XML в WooCommerce

  1. Устанавливаем плагин WP All Import и активируем
  2. Устанавливаем дополнение к плагину Import Products from any XML or CSV to WooCommerce и активируем

Плагины для импорта/экспорта товаров WooCommerce

Google аналитика и WooCommerce

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

В настройках Google Analytics обязательно включите расширенную электронную торговлю и ремаркетинг.

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

  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: отмечаем

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

Плагин GoogleTag Assistant не видит кода Google аналитика на сайте, но все работает!

Купоны в WooCommerce

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

Оформление страницы заказа плагин WooCommerce Flexible Checkout Fields

После установки и активации плагина перейдите на страницу: 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 15:12 — darkfire