Архив метки: WooCommerce

Как отключить раздел аналитики WooCommerce в WordPress?

Плагин WooCommerce имеет множество функций и добавляет множество пунктов меню на боковую панель панели администратора WordPress. Аналитика — это один из разделов, в котором будет показано несколько пунктов подменю для отслеживания продаж и доходов вашего магазина. Однако, если вы используете какой-либо другой вариант аналитики или не хотите загромождать свою панель администратора, вот как вы можете отключить раздел «Аналитика» в WooCommerce. Читать

WooCommerce — как сократить длинные названия товаров

Полные названия товаров

На страницах категорий длинные названия товаров можно сократить, если это существенно не влияет на удобство пользователей. Например на сайте по продаже книг длинные названия можно сократить, так как названия дублируются на обложке книги.

Сократить до одной строки с многоточием

Названия товаров в одну строчку
Названия товаров в одну строчку

В настройках стилей темы изменить CSS свойства заголовка товаров:

h2.woocommerce-loop-product__title {
	white-space: nowrap; /* Отключаем перенос строк */
	overflow: hidden; /* Скрываем текст за пределами блока */
	text-overflow: ellipsis; /* Добавляем троеточие */
}

Сократить названия товаров до нескольких строк

Показывать полное наименование при наведении
Показывать полное наименование при наведении

Если предыдущий способ не подходит, можно сократить до нескольких строк. Да, мы теряем красивое троеточие. Но можем показывать полное название при наведении на карточку товара.

@media (min-width: 768px) {
	h2.woocommerce-loop-product__title {
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Покажем полное название при наведении на карточку */
	.site-main ul.products.columns-4 li.product:hover h2.woocommerce-loop-product__title {
		color: grey;
		font-size: 1em!important;
		white-space: normal;
	}

	.site-main ul.products.columns-4 li.product:hover {
		box-shadow: 0px 5px 5px #ccc;
	}
}

Обратите внимание на медиа-запрос @media (min-width: 768px) . Это означает, что данные CSS-свойства будут работать только на десктопах. На планшетах и мобильных устройствах свойство hover не должно работать, так как нет эффекта наведения мышью.

Сообщение WooCommerce — как сократить длинные названия товаров появились сначала на Веб-студия Юсота.


Source: usota.ru woocommerce

WooCommerce – изображение по ссылке для внешних/партнёрских товаров

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

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

Минус – адрес изображение со временем может измениться, поэтому нужно эту ситуацию отслеживать. Фото может быть удалено, переименовано, перенесено на другой адрес или по другим причинам.

Этапы работы:

  • создаём произвольное поле, в котором будем хранить url изображения
  • включаем сохранение информации в базу данных
  • выводим изображение в карточке товара
  1. Добавим произвольное поле в “Данные о товаре” на вкладку “Основные”:
add_action( 'woocommerce_product_options_pricing', 'usota_add_to_products_external_image_url' );      
function usota_add_to_products_external_image_url() {          
    woocommerce_wp_text_input( array( 
        'id' => '_external_image_url', 
        'class' => 'short', 
        'label' => 'Image URL',
        'data_type' => 'url', 
    ));      
}
Поле для ссылки на внешнее изображение
Поле для ссылки на внешнее изображение

2. Включаем сохранение данных:

add_action( 'save_post_product', 'usota_save_external_image_url' );
  
function usota_save_external_image_url( $product_id ) {
    global $typenow;
    if ( 'product' === $typenow ) {
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
        if ( isset( $_POST['_external_image_url'] ) ) {
            update_post_meta( $product_id, '_external_image_url', $_POST['_external_image_url'] );
        }
    }
}

3. Выводим на странице товара. Также добавим Alt-текст для изображения.

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'usota_public_image_external_image', 100, 2 );
 
function usota_public_image_external_image( $html, $post_thumbnail_id ) {
    global $product;
    if ( ! $product->is_type( 'external' ) ) return $html;
   
    $external_image_url = get_post_meta( $product->get_id(), '_external_image_url', true );

    if ( $external_image_url ) {
        
        $alt_text = $product->get_title();

        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( $external_image_url ), $alt_text );
        $html .= '</div>';
    } else {
        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }
    
    return $html;
}

Конечно, это не закроет полностью вопрос по изображению для внешнего/партнёрского товара. Нам по-прежнему нужна миниатюра, чтобы показывать товар в категории, в админке или на других страницах сайта.

Но можно загрузить только уменьшенную копию. Этого будет достаточно, чтобы товары смотрелись красиво, но и фотографии много места не занимали.

Весь код полностью, чтобы сразу добавить в functions.php

/**
 * Выводим изображение в карточке товара по внешнией ссылке
 * для внешних/партнёрских товаров
 */
  
// Добавляем произвольное поле external_image_url в данные о товаре
  
add_action( 'woocommerce_product_options_pricing', 'usota_add_to_products_external_image_url' );      
function usota_add_to_products_external_image_url() {          
    woocommerce_wp_text_input( array( 
        'id' => '_external_image_url', 
        'class' => 'short', 
        'label' => 'Image URL',
        'data_type' => 'url', 
    ));      
}
  
// Сохраняем произвольное поле external_image_url
  
add_action( 'save_post_product', 'usota_save_external_image_url' );
  
function usota_save_external_image_url( $product_id ) {
    global $typenow;
    if ( 'product' === $typenow ) {
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
        if ( isset( $_POST['_external_image_url'] ) ) {
            update_post_meta( $product_id, '_external_image_url', $_POST['_external_image_url'] );
        }
    }
}
  
// Выводим external_image_url в карточке товара на месте изображения товара
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'usota_public_image_external_image', 100, 2 );
 
function usota_public_image_external_image( $html, $post_thumbnail_id ) {
    global $product;
    if ( ! $product->is_type( 'external' ) ) return $html;
   
    $external_image_url = get_post_meta( $product->get_id(), '_external_image_url', true );

    if ( $external_image_url ) {
        
        $alt_text = $product->get_title();

        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( $external_image_url ), $alt_text );
        $html .= '</div>';
    } else {
        $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
        $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
        $html .= '</div>';
    }
    
    return $html;
}

Сообщение WooCommerce – изображение по ссылке для внешних/партнёрских товаров появились сначала на Веб-студия Юсота.


Source: usota.ru woocommerce

Python — как подключиться к базе данных MySQL на хостинге

Для работы с MySQL в Python используется библиотека pymysql. Но чтобы подключиться с локальной машины к базе данных, которая расположена на сервере, используем библиотеку sshtunnel.

По сути – мы сначала подключаемся к хостингу через защищённое соединение, а уже через это соединение подключаемся к базе данных.

Перед подключением убедитесь, что на хостинге разрешен доступ по SSH. Читать

WooCommerce — экспорт дерева категорий с помощью API

В предыдущей статье мы рассмотрели как получить дерево категорий с помощью стандартного экспорта WooCommerce.

Но этот способ с кучей недостатков:

  • медленно
  • у товара может быть несколько категорий
  • неизвестно id категории

А вот с помощью API мы можем получить удобную таблицу с ID и полным путём категории.

Пример таблицы экспорта дерева категорий

Скрипт написан на языке Python.

Возможно написано топорно, но задачу свою решает.

Сообщение WooCommerce — экспорт дерева категорий с помощью API появились сначала на Веб-студия Юсота.


Source: usota.ru python

Woocommerce: как вывести цену товара в title страницы

Добавьте в шаблон метатег %%cf__price%%

Настройки SEO карточки товара
Настройки SEO карточки товара

В карточке товара цена будет выглядеть, как %%cf__price%%. Но на сайте и в поисковой система будет выводиться в нормальном виде.

Шаблон в карточке товара
Шаблон в карточке товара

В исходном коде всё выводится, как положено.

Сообщение Woocommerce: как вывести цену товара в title страницы появились сначала на Веб-студия Юсота.


Source: usota.ru seo