Некоторые из этих отрывков вы уже знаете, но я уверен, что смогу показать вам и кое-что новое. Таким образом, я собрал лучшие произведения в одном посте.
Совместимость:
- WordPress с версии 4.6
- WooCommerce с версии 3.xx
- PHP-версия 7.xx
Вы либо копируете фрагменты в свою активную тему functions.php
или вы настраиваете подключаемый модуль для конкретной страницы для этой задачи.
Пожалуйста, сделай нет скопируйте открытие .
[blue-box text=» Please keep in mind: Create a file backup before each change made to the functions.php. Don’t use the WordPress editor to alter the file. If something goes wrong, you’ll lose access to your website. Make your changes directly on your web hosting, via an FTP access.»] [promo-box headline=»This could be helpful:» linkone=»https://docs.woocommerce.com/documentation/plugins/woocommerce/» textone=»The WooCommerce Documentation» linktwo=»https://businessbloomer.com/category/woocommerce-tips/visual-hook-series/» texttwo=»The Visual WooCommerce Hook Guide» linkthree=»https://docs.woocommerce.com/wc-apidocs/» textdrei=»The WooCommerce 3.0.x Code Reference»]
1 — Предоставление поддержки WooCommerce для вашей темы
Если ваша активная тема не подготовлена для использования с WooCommerce, вы должны начать с нее и обеспечить поддержку. Это единственный способ обеспечить оптимальное отображение вашего нового магазина. Этот процесс состоит из трех частей.
Первая часть: Во-первых, объявите о поддержке вашей темы и добавьте лайтбокс продукта, если хотите.
Часть вторая: Удалите открывающие и закрывающие DIV-контейнеры WooCommerce из шаблонов плагина.
Часть третья: Замените DIV на те, которые использует ваша тема. Для этого вам нужно выяснить имена контейнеров DIV вашей темы. Щелкните правой кнопкой мыши на своем веб-сайте, и «Проверить» поможет вам в этом.
Затем добавьте эти контейнеры в следующий код:
';
}
add_action( 'woocommerce_before_main_content', 'evolution_wrapper_start', 10 );
endif;
if ( ! function_exists( 'evolution_wrapper_end' ) ) :
/**
* Adding theme's ending container for WooCommerce support
*/
function evolution_wrapper_end() {
echo '
‘;
}
add_action(‘woocommerce_after_main_content’, ‘evolution_wrapper_end’, 10);
конец;
Теперь ваш магазин должен отображаться так же, как и остальная часть вашей темы.
2 — Замена хлебных крошек WooCommerce на хлебные крошки Yoast SEO
Множество поклонников WordPress используют навигационную цепочку популярного плагина Yoast SEO. Вы также можете использовать его на страницах WooCommerce. Этот фрагмент делает свое дело:
','');
}
}
}
add_action( 'init', 'evolution_replace_breadcrumbs' );
endif;
3 — Изменить количество продуктов, отображаемых в строке
По умолчанию WooCommerce показывает четыре товара подряд. Изменить это очень просто.
4 — Изменить количество сопутствующих товаров
Вы можете выбрать, сколько сопутствующих товаров будет отображаться в вашей теме. Иногда это может пригодиться.
5 — Определите, сколько продуктов отображается на странице
Если в вашем магазине много или очень мало товаров, возможно, имеет смысл изменить количество товаров на странице.
6. Сокрытие других тарифов на доставку, если доставка помечена как бесплатная.
Вы предлагаете бесплатную доставку товара? Затем вам следует использовать этот код, так как WooCommerce обычно показывает все варианты доставки в области оформления заказа.
$rate ) {
if ( 'free_shipping' === $rate->method_id ) {
$free[ $rate_id ] = $rate;
break;
}
}
return ! empty( $free ) ? $free : $rates;
}
}
add_filter( 'woocommerce_package_rates', 'evolution_hide_shipping_when_free_is_available', 100 );
7 — Загрузка файлов CSS и JavaScript WooCommerce только на страницы магазина
WooCommerce загружает свои файлы на каждую страницу вашего сайта, включая домашнюю страницу и статьи. Во-первых, это не имеет смысла, а во-вторых, замедляет работу вашего сайта. Таким образом, вы должны использовать этот фрагмент. С этим файлы WooCommerce загружаются только там, где они необходимы.
8 — Используйте уникальную боковую панель на страницах магазина
Около 95% всех разработчиков не знают, как решить эту проблему, не перезаписывая шаблоны WooCommerce. В Интернете вы также не найдете решения, так как большинство результатов также предлагают перезаписать шаблоны.
Так что сегодня ты узнаешь от меня секрет 🙂 Отныне ты будешь решать задачу как джедай, а не как падаван.
Часть первая: создание новой боковой панели для страниц WooCommerce
esc_html__( 'WooCommerce Sidebar', 'evolution' ),
'id' => 'woocommerce',
'description' => esc_html__( 'This is the sidebar for your WooCommerce Shop.', 'evolution' ),
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
) );
}
add_action( 'widgets_init', 'evolution_woo_sidebar_init' );
endif;
Часть вторая: создание файла боковой панели WooCommerce
Чтобы новую боковую панель можно было использовать, нам нужен новый файл темы. Создайте пустой файл с именем sidebar-woocommerce.php
. Для этого воспользуйтесь HTML-редактором.
Возьмите HTML-контейнеры из вашего sidebar.php
. Теперь добавьте в файл следующий код и загрузите его в свою тему или в папку дочерней темы через (S)FTP.
Часть 3: Поменяйте местами боковые панели на страницах магазина
Оригинальная функция платформы WooCommerce позволяет обмениваться двумя боковыми панелями. Все эти функции являются «подключаемыми». Это означает, что их легко перезаписать.
Перезаписываемая функция выглядит так:
if (!function_exists( 'a_great_function' ) ) :
означает, что функция выполняется только в том случае, если нет другой функции с указанным именем. Однако, если есть функция с таким именем, функция нет казнен. Вот почему эти функции так легко переписать. И мы сделаем именно это.
Замена боковой панели: сниппет
Следующие фрагменты кода приводят к тому, что боковая панель WooCommerce отображается на страницах вашего магазина вместо обычной боковой панели.
Теперь на всех страницах магазина вместо вашего sidebar.php
файл sidebar-woocommerce.php
доступ, и вы можете заполнить обе боковые панели разным контентом.
9 — WooCommerce Checkout: превратите номер телефона в добровольную информацию
Ввод номера телефона при оформлении заказа обязателен. Я уверен, что нескольким потенциальным клиентам это не нравится. Следующий фрагмент делает добровольным ввод номера.
10 — Отображение процентной экономии для предложений
Увеличьте психологические стимулы к покупке, отображая потенциальную экономию ваших предложений в процентах.
" . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . ' ';
return $price;
}
add_filter( 'woocommerce_format_sale_price', 'evolution_custom_sales_price', 10, 3 );
endif;
11 — Добавьте кнопки «Поделиться» на страницу продукта
Чтобы расширить ассортимент вашего магазина, пользователи должны иметь возможность делиться каждым товаром в социальных сетях. Таким образом, имеет смысл отображать кнопки «Поделиться» на страницах продуктов. Для этого требуется шорткод для ручной интеграции в тему.
Его можно найти в документации вашей темы WordPress. Я использую Shariff Share-Buttons для своей интеграции.
Результат:
12 — Удаление вкладок продукта из представления продукта
Вкладки можно удалять по одной или все сразу, что иногда может быть выгодно.
13 — Обновление живой корзины через Ajax
Вам не нужно обновлять корзину, чтобы поддерживать ее в актуальном состоянии. Ajax «Live» — гораздо лучший способ сделать это.
cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - cart->get_cart_total(); ?>
14 — Отображение ссылки на учетную запись пользователя в теме
Если пользователь не вошел в систему, ссылка показывает «Вход/Регистрация» и использует страницу входа. Если пользователь вошел в систему, ссылка гласит «Моя учетная запись» и ведет прямо к вашей учетной записи пользователя.
" title="">
" title="">
15 — Добавление способа оплаты клиента в адрес электронной почты администратора
После каждого заказа вы получаете электронное письмо от WooCommerce. С помощью этого фрагмента вы можете добавить в электронное письмо выбранный клиентом способ оплаты.
if (!function_exists( 'evolution_add_payment_method_to_admin_new_order' ) ) :
/**
* Adding the customer's payment method to the admin email
*
* @hooked woocommerce_email_after_order_table()
*/
function evolution_add_payment_method_to_admin_new_order( $order, $is_admin_email ) {
if ( $is_admin_email ) {
echo 'Zahlungsart: ' . $order->payment_method_title . '
';
}
}
add_action( 'woocommerce_email_after_order_table', 'evolution_add_payment_method_to_admin_new_order', 15, 2 );
endif;
16 — Изменить порядок полей в зоне оформления заказа
Используя этот фрагмент, вы можете настроить область оформления заказа WooCommerce. Вы можете изменить порядок полей в области оформления заказа или даже удалить их.