Интернет-магазин на Wordpress. Настройка woocommerce. Часть 2.
Стенограмма видео:
В этом видео я займусь карточкой товара, страницей корзины, страницей пользователя и формой заказа.
Начнем с карточки товара - нужно отредактировать ее внешний вид. Поскольку у меня нет дизайнов никаких внутренних страниц, то я поменяю стандартную карточку на свое усмотрение: заголовок будет на всю ширину в самом верху, категория будет справа вверху, затем описание, после цена и кнопка добавления в корзину. Также добавлю дополнительный tab к Описанию и Отзывам. Все остальное оставлю как есть.
Поскольку в woocommerce все устроено таким образом, что карточка собирается из action-ов (действий), то чтобы перемещать элементы, нужно менять местами выполнения этих действий. То есть сначала идет кусок кода, отвечающий за галерею продукта, затем див с заголовком, рейтингом. ценой и т.д., где для каждого элемента указан хук с числом, отвечающим за порядок расположения элементов. И далее - tabs, рекомендуемые продукты и т.д. В комментариях все это указано. Изменить это число, отвечающее за расположение, можно в файле functions.php. Нужно сначала удалить хук из действия и затем снова его добавить, но с другим числом, которое либо увеличивает либо уменьшает приоритет и соответственно располагает элемент в нужном нам месте:
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
add_action('woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 5);
Мы убираем вывод заголовка в woocommerce_single_product_summary и устанавливаем его вывод в woocommerce_before_single_product_summary с приоритетом равным 5. Также для удобства теперь можно отметить в content-single-product.php, что хук с заголовком теперь осуществляется в этом действии. Подобные мероприятия нужно провести с оставшимися элементами, что поменять их месторасположения:
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
add_action('woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 5);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 5);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 7);
В конечном счете код выглядит так. Также отредактирую комментарии, чтобы все было так как есть на самом деле. Обновляю страничку и вижу, что все встало на запланированные места.
Для добавления tab в том же файле functions.php я пропишу следующий код:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
$tabs['test_tab'] = array(
'title' => __( 'Как купить', 'woocommerce' ),
'priority' => 10,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
echo get_post_meta(get_the_ID(), 'how_to_bye', true);
}
с помощью функции woo_new_product_tab будет добавлен новый tab между табами Описание и Отзывы. Информацией для него послужит содержимое произвольного поля с ключом how_to_bye. Чтобы посмотреть как это работает нажмем кнопку "Изменить товар", выведем в настройках экрана Произвольные поля и добавим новой произвольное поле с именем how_to_bye и значением "Купить очень-очень просто!". Вот такая получилась карточка, на этом ее и оставим.
Далее нужно создать страницу Корзины, Страницу пользователя и страницу оформления заказа. Для этого я захожу в административную часть - Страницы - добавить новую. Создам страницу корзины, вставлю сюда shortcode: [woocommerce_cart] и пропишу url - cart. Также создам страницу пользователя Профиль - user (создаю) и для вывода на ней выведу следующий shortcode: [woocommerce_my_account] и страницу Оформления заказа - checkout с shortcode - [woocommerce_checkout].
В настройках woocommerce - Аккаунты нужно выбрать страницу user в качестве страницы Моего аккаунта и также можно произвести простые настройки - выбрать где будет происходить регистрация клиентов, процесс создания аккаунта и так далее. Вот так выглядит страница пользователя. В правой панели отображены страницы, за которые отвечает опция endpoint в настройках - я уберу некоторые ненужные endpoints. В моем случае это Загрузки по Методы оплаты (соответственно убираю все endpoints, кроме Заказы, Просмотреть заказ, Забыли свой пароль?, Выйти). Если теперь открыть страницу Профиля, то здесь только три ссылки, здесь заказ, детали заказа. На этом со страницей пользователя все.
Для настроек корзины и оформления заказа - Платежи: опция "Страница оформления заказа" - и здесь выбираю созданные страницы Корзина и Оформление заказа. Если теперь перейти к корзине, то здесь лежит наш товар и можно сразу перейти к странице оформления. Для настроек полей оформления и нужен плагин Saphali. Настройки осуществляются в woocommerce - Saphali - Управление полями. То есть можно выбрать какие поля выводить, обязательность их заполнения, заголовки, классы. Я уберу из формы оформления такие поля как - адрес-шмадрес, че-то там. Все, форма оформления готова.
При клике подтвердить заказ происходит переадресация на страницу order-received, за формирование которой также отвечают endpoints в настройках woocommerce. И этот оформленный заказ попал теперь в заказы, то есть достиг конечной точки. Естественно уведомление также должно быть отправлено на почту. На реальном хостинге это довольно просто осуществить (главное, чтобы была предоставлена возможность отправки почты), а настройки по формированию шаблонов писем находятся во вкладке настроек woocommerce - Email-ы. Здесь все довольно просто - в колонках слева на право отображено для чего предназначен шаблон, какой тип содержимого (это может быть текст, html, либо составное содержимое), и кто является получателем. Любой из шаблонов можно отредактировать на свое усмотрение - включить, выключить, изменить адрес и тому подобное.
На этом все. Мы создали простой интернет-магазин, работающий на системе управления wp.