Woocommerce tabs поменять местами
Hello! This video tutorial shows how to change the order of tabs on product page in WooCommerce templates.
There are information tabs on product single pages in WooCommerce that you may want to reorder:
Let’s learn how to do that.
Let’s say, you want to have Video tab to be displayed the first.
The tutorial assumes you are already logged in to your WordPress dashboard .
Navigate to the Appearance -> Editor tab :
Then, click the custom- function .php file title at the right hand side:
Now that the file editing interface is opened in front of you, scroll down to the very end of the file and add the following code right before the closing PHP tag:
As you can see, we have set the Video tab to be the first one displayed:
Click on the " Update File" button to apply changes.
Navigate to your front-end and open any product page – you can see tabs have been successfully reordered:
This is the end of the tutorial. Now you know how to change the order of tabs on product page in your WooCommerce template.
Итак, плагин магазина WooCommerce разрешает зарегистрироваться при покупке (и не только) дабы просматривать историю заказов, сохранять определенную информацию о себе и дальше при желании ее менять. Визуально это выглядит приблизительно так:
Как создать свою собственную вкладку
На самом деле, изучив все примеры, которые вы встретили выше в уроке, скорее всего вы уже знаете, как можно создать вкладку. И тем не менее, подытоживаем всё это ниже:
Конечно вряд ли вам будет интересно делать вкладку для тупо статичного HTML, поэтому спешу вас обрадовать – вы можете использовать global $product внутри содержимого вкладки.
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!
Новый пункт в личном кабинете
Предыдущий и следующий хаки взяты из этой статьи блога разработчика Misha Rudrastyh. Если нам просто надо вставить произвольный линк в навигацию, то код для файла функций выглядит следующим образом:
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--anyuniquetext123 a:before
Добавление страниц в личном кабинете
В данном случае мы не просто создаем линк в меню, но и сделаем так, что при клике пользователь будет продолжать находится в своем аккаунте + увидит соответствующий контент справа. Весь сниппет состоит из 4х шагов:
/* * Step 1. Add Link to My Account menu */ add_filter ( 'woocommerce_account_menu_items', 'misha_log_history_link', 40 ); function misha_log_history_link( $menu_links ) < $menu_links = array_slice( $menu_links, 0, 5, true ) + array( 'log-history' => 'Log history' ) + array_slice( $menu_links, 5, NULL, true ); return $menu_links; >/* * Step 2. Register Permalink Endpoint */ add_action( 'init', 'misha_add_endpoint' ); function misha_add_endpoint() < // WP_Rewrite is my Achilles' heel, so please do not ask me for detailed explanation add_rewrite_endpoint( 'log-history', EP_PAGES ); >/* * Step 3. Content for the new page in My Account, woocommerce_account__endpoint */ add_action( 'woocommerce_account_log-history_endpoint', 'misha_my_account_endpoint_content' ); function misha_my_account_endpoint_content() < // of course you can print dynamic content here, one of the most useful functions here is get_current_user_id() echo 'Last time you logged in: yesterday from Safari.'; >/* * Step 4 */ // Go to Settings > Permalinks and just push "Save Changes" button.
Аналогично в примере также имеется иконка для меню:
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--log-history a:before
Переименовывание вкладок
Каждая вкладка в массиве – это тоже массив 🤔 И вы можете поменять элемент с ключом title в нём.
Изменение порядка вкладок
title – это не единственный элемент массива вкладки. Есть также и priority , который поможет нам поменять порядок вкладок, и callback , о котором – в следующей главе.
Попробуем переместить вкладку описания в самый конец:
Конечно приоритет 10000 вам вряд ли понадобится, так как вкладки имеют приоритеты 10 (Описание), 20 (Детали) и 30 (Отзывы).
Удаление вкладок
По сути удаление вкладки заключается в удалении элемента массива $tabs . Главное не забудьте его потом возвратить (строка 9).
Что, если на сайте появляются PHP предупреждения?
Если вы попробуете удалить, переименовать или изменить порядок вкладки, которой не существует, то вполне возможно, что, если на вашем сайте включен WP_DEBUG, то у вас появится PHP-уведомление.
Чтобы перестраховаться от этого, предлагаю вам, прежде, чем делать какие-то изменения с массивом $tabs , проверять каждую вкладку на то, что она существует, например так:
Как убрать пункт из меню личного кабинета
Здесь удаляете значение того пункта, который вам не нужен. Не забудьте при этом сохранить изменения.
Теоретически, есть метод скрытия элемента меню с помощью сниппета для файла functions.php через специальную функцию unset.
Изменяем содержимое вкладки
То есть по сути мы можем перезаписать полностью, что будет находиться внутри вкладки. У каждой вкладки есть функция, которая возвращает её содержимое и название этой функции как раз прописано в массиве вкладки в параметре callback , а значит, стоит нам только поменять название функции на свою собственную в этом параметре – мы получаем возможность сделать полностью произвольный HTML в той или другой вкладке.
Контент до и после меню в аккаунте пользователя
В качестве бонуса Misha Rudrastyh приводит еще один небольшой хак. С его помощью у вас получится добавить любой текст/HTML непосредственно перед и после навигационного элемента (<nav>).
<?php add_action('woocommerce_before_account_navigation', 'misha_some_content_before'); function misha_some_content_before() < echo 'blah blah blah before'; >add_action('woocommerce_after_account_navigation', 'misha_some_content_after'); function misha_some_content_after()< ?> <p>blah blah blah after</p> <?php >
При внедрении решения следует учитывать, что блок <nav> имеет свойство float:left в CSS.
Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!
По умолчанию на странице с детальным описанием товара в Woocommerce посетителям будет показываться 3 вкладки: подробное описание продукта, “Детали” с его размерами и весом, а также отзывы (которые в настройках можно отключить). Не всегда такой вариант отображения является оптимальным, поэтому многие заказчики хотят каким-то образом его изменить. Об этом сегодня и поговорим – для решения задачи имеются полезные сниппеты с официального сайта Woocommerce и от других разработчиков, а также специальные плагины.
Просматривая один из старых своих сайтов я нашел самый простой и “топорный” метод реализации этой задачи – через файлы шаблона. В директории вашей или дочерней темы можете найти папку woocommerce/single-product/tabs, где будет 3 файла, отвечающие за вывод соответствующих вкладок: глобальный tabs.php + табы описания (description.php) и детали товара (additional-information.php).
В файл additional-information.php я добавил просто HTML контент про “оплату и доставку”, который отображался на всех страницах продукции, а в шаблон описания (description) вставил код для вывода списка деталей:
Разумеется, так делать не совсем корректно, лучше использовать специальные фильтры/функции системы.
Сниппеты для табов Woocommerce
Все коды вставляем в файле functions.php основной или дочерней темы, либо через Code Snippets.
Удаляем все вкладки и показываем описание:
Для начала самая стандартная ситуация – когда вам вообще не нужны никакие вкладки, а надо просто отобразить подробный текст описания продукта.
Теперь переходим к “официальным” сниппетам разработчиков, которые вы всегда сможете найти тут.
Как убрать вкладки Woocommerce
Оставляете в коде те, которые хотите удалить:
Переименование элементов
Аналогично используйте только те строки, которые нужны:
Перестановка (меняем местами)
Выполняется через указание приоритетности:
Модификация табов
Следующий хак заменит описание на пользовательскую функцию:
Дополнительные вкладки в Woocommerce
Здесь добавляется новый глобальный элемент для всех товаров:
Важно! Она будет работать только когда для товара указаны его размеры или вес. В противном случае у вас будет выводиться ошибка. Поэтому для соответствующего кода не забывайте использовать условные операторы:
/** * Check if product has attributes, dimensions or weight to override the call_user_func() expects parameter 1 to be a valid callback error when changing the additional tab */ add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 ); function woo_rename_tabs( $tabs ) < global $product; if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) < // Check if product has attributes, dimensions or weight $tabs['additional_information']['title'] = __( 'Product Data' ); // Rename the additional information tab >return $tabs; >
Плагин Custom Product Tabs for WooCommerce
Если вам нужно не просто «что-то сделать» с базовыми вкладками, а вы хотите немного расширить данную функциональность, то следующий плагин вам точно понравится. Он имеет свыше 90тыс. скачиваний, максимальную оценку и регулярные апдейты. Я использовал его для одного проекта – модуль справился с задачей на отлично.
С помощью этого решения вы можете создавать:
При этом в табах используется стандартный WP-редактор с добавлением катртинок, текстов и даже шорткодов! После создания они будут выводиться справа от вкладки “Описания”.
Вот как выглядит работа модуля на странице редактирования продукции:
Опция в меню товара называется “Custom Tabs”. Здесь есть текстовый редактор, заголовок вкладки, механизм добавления / удаления / перемещения элементов, сохраненные табы.
Итого. В целом, в плагине Custom Product Tabs for WooCommerce все достаточно просто дабы разобраться даже рядовому WordPress пользователю. Очевидно, что существуют и другие решения, но мне этого хватает с головой, к тому же все стабильно работает. Однако использовать его есть смысл только тогда, когда это действительно нужно – простые задачи по вкладкам по типу их удаления лучше решать с помощью сниппетов. Ну, а редактировать файлы шаблона вообще не желательно.
Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!
В этом уроке я хочу немного пролить свет на функционал вкладок, я имею ввиду вот эти вкладки:
Они могут выглядеть по-разному в зависимости от используемой вами темы, например этот скриншот сделан на теме Storefront
Если вы используете какую-либо стандартную тему WooCommerce (например Storefront), либо ваша вёрстка идентична стандартной, то они у вас по-любому присутствуют.
Главное не забывайте, что иногда бывает вёрстка, которая вообще не похожа на стандартную WooCommerce, некоторые такие примеры вы можете найти в этой подборке. И это нормально! У меня даже есть видеокурс по созданию темы для WooCommerce из кастомной вёрстки.
Сами же вкладки коннектятся через хук woocommerce_product_tabs и по сути всё, что мы с вами будем делать в этом уроке – это работать с этим фильтр-хуком.
Код можете вставлять в functions.php текущей темы, желательно, чтобы это была дочерняя, если ваша тема получает обновления.
Читайте также: