Начало > Помощен център > Апликации > WordPress > WooCommerce - Изображения и галерии на продукти

WooCommerce - Изображения и галерии на продукти

Помощен център

WooCommerce - Изображения и галерии на продукти

Изображенията на продуктите са много важен, дори решаващ фактор, за привличане на посетители в нашия WooCommerce магазин.

В статията ще разгледаме какви инструменти ни предлага WooCommerce за управление на изображения и галерии на продукти.

Видове изображения

WooCommerce използва три вида изображения на продукти на различни места:

Изображение на единичен продукт е най-голямото изображение и се отнася до основното / подбрано (featured) изображение на страницата с подробни данни за продукта:

Изображение на единичен продукт в WooCommerce

Изображенията в каталога са изображения със средни размери, които се зареждат в страниците с продукти, като например главната страница на магазина, страниците с продуктови категории, секциите със свързани (related) продукти, Up-sells и кръстосани (cross-sells) продажби:

Изображения със средни размери в каталог

Миниатюрите (thumbnails) на продукта са най-малките изображения, които се използват в количката, джаджите и (по избор) в миниатюрите на галерията под изображението на продукта:

Изображения с най-малки размери - Миниатюри (thumbnails)

Добавянето на изображения и галерии на продукти са стандартни опции, налични в дясната странична лента, когато добавяме или редактираме продукт в нашия магазин. Достъпваме панела Добавяне на нов продукт / Редактиране на продукт от главното меню като избираме WooCommerce > Продукти:

Панели за управление на изображения и галерии

Изображение на продукт

Панелът Изображение за продукт съдържа основното изображение на нашия продукт и се използва в различни размери на различни страници от магазина.

За да добавим изображение избираме Задаване на изображението за продукта:

Линк Задаване на изображението за продукта

Избираме изображението от Media Library (Файлове) и попълваме (препоръчително) полетата за алтернативен текст, заглавие, кратко описание и описание в помощния панел, след което кликаме бутона Задаване на изображение за продукта:

Избиране на изображение от Media Library (Файлове)

Избраното изображението се добавя в панела Изображение за продукт:

Изображение в панела Изображение за продукт

Премахване на изображение

За да премахнем избраното изображение кликаме линка Премахване на изображението за продукта, след което по описания по-рано начин избираме и запазваме ново изображение.

Редактиране на изображение

За да редактираме избраното изображение кликаме изображението и в помощния панел Подробности за файла кликаме линка Редактиране на изображение:

Линк Редактиране на изображение

В панела Редактиране на изображение използваме някой от наличните инструменти за редактиране, след което запазваме промяната като кликнем бутона Запазване и затваряме панела с кликане на бутона Назад:

Инструменти за редактиране на изображение

Добавянето, премахването и редактирането на изображение за продукта се извършва по същия начин като подбраните (featured) изображения за публикации и страници в WordPress.

Продуктови галерии

Добавяне на изображения в продуктова галерия

Продуктовите галерии показват всички изображения, прикачени към даден продукт чрез мета полето Галерия на продукт.

Създаваме продуктова галерия, използвайки същия метод като добавяне на изображение на продукт, но с помощта на мета полето Галерия на продукт, където кликаме линка Добавяне на изображения към галерията на продукта:

Линк Добавяне на изображения към галерията на продукта

В Media Library (Файлове) избираме изображенията, които желаем да присъстват в галерията, попълваме мета информацията за всяко изображение (препоръчително) и кликаме бутона Добявяне към галерията. Всички избрани изображения се добавят в панела Галерия на продукт:

Изображения в панела Галерия на продукт

Пренареждане на изображенията в галерия

Изображенията в галерията на продукта може да бъдат пренаредени лесно чрез плъзгане и пускане с мишката - просто кликаме с мишката избрано изображение, задържаме бутона на мишката натиснат, плъзгаме изображението на новата позиция и пускаме бутона:

Пренареждане на изображенията в галерия

Премахване на изображение от галерия

За да премахнем изображение от галерията с продукти, задържаме курсора на мишката върху изображението и кликаме червената икона със символ 'x' и етикет Изтриване на изображения:

Премахване на изображение от галерия

Изглед на изображение в продуктовата страница

След добавяне на изображение и галерия на продукта клиентите могат да ги видят на продуктовата страница в нашия магазин:

Изглед на изображение в продуктовата страница

Възможно е също да увеличим мащаба (zoom) и да видим изображението отблизо, като задържим курсора на мишката върху него:

Увеличаване мащаба на изображението (zoom)

Ако посетителя кликне бутончето със символ лупа+ може да разгледа основното изображение и изображенията от галерията на тъмен фон (познат като lightbox ефект), навигирайки с помощта на двете стрелки:

Изображение в lightbox прозорец

Излизаме от lightbox режим като кликнем в пространството около снимката.

Често задавани въпроси относно изображенията в WooCommerce

Препоръчителен размер на изображение в WooCommerce

Нашите изображения са ключов инструмент за продажба, така че те трябва да са с високо качество. Изображения с минимален размер от 800x800 пиксела (ширина / височина) изглеждат добре като основно / подбрано (featured) изображение, изображение от каталога и миниатюрно изображение. Изображенията с по-голям размер са особено подходящи ако продаваме артикули с красиви детайли.

Припомняме обаче, че страници с големи по размер и резолюция изображения се зареждат по-бавно. Затова препоръчаме да тествате няколко варианта и да изберете най-добрият компромис между качество на изображенията и бързина на зареждане на страниците.

Ако забравим да зададем размер на изображението?

WooCommerce автоматично ще зададе размер и ще генерира изображенията, които клиентите ще виждат на продуктовите страници (frontend).

Поправяне на размазани изображения

В отделна статия показваме начините за Фиксиране на замъглени изображения на продукти в WooCommerce.

Изключване на Lightbox

Eдин бърз начин да деактивираме lightbox по подразбиране в WooCommerce е просто да премахнем lightbox от поддръжката на темата (theme support) като поставим следния код във файла functions.php в директорията на активната тема:

add_action( 'after_setup_theme', 'remove_wc_gallery_lightbox', 100 );
function remove_wc_gallery_lightbox() { 
  remove_theme_support( 'wc-product-gallery-lightbox' );
}

Изключване на увеличение (zoom)

WooCommerce (след версия 3) предоставя достъп до функция увеличение (zoom). Когато задържим курсора върху изображението на продукта на продуктовата страница, може да увеличаваме изображенията на продуктите. Функцията е полезна за разглеждане на по-дребни детайли на продукта.

Ако желаем да премахнем функцията увеличение (zoom) трябва да добавим следния код във файла functions.php в директорията на активната тема:

add_action( 'after_setup_theme', 'remove_wc_gallery_zoom', 100 );
function remove_wc_gallery_zoom() { 
  remove_theme_support( 'wc-product-gallery-zoom' );
}

Настройване размерите на изображение в персонализирана тема

Ако изграждаме персонализирана тема, най-вероятно желаем WooCommerce автоматично да конфигурира размерите на изображенията. В отделна статия показваме начините за Задаване размери на изображения в персонализирана тема в WooCommerce.

Липсват настройките за изображение на продукт в WooCommerce Customizer

Това може да се случи по две причини:

Архив на оригиналните изображения

Препоръчаме да поддържате офлайн архив (на външен носител), където да съхранявате всички оригинални изображения на продуктите в магазина, които може да ползвате при повреждане на текущото изображение или ако желаете да премахнете редакциите в текущото изображение.