Як зробити опис товару у WooCommerce з функцією «Читати більше»

Власники інтернет-магазинів на WooCommerce часто стикаються з проблемою: опис товару та додаткова інформація виглядають надто громіздко і займають багато місця на сторінці продукту. А сучасні користувачі — не люблять скролити довгі полотна тексту. Рішення є! Ви можете додати ефект згортання і розгортання опису за допомогою кнопки «Читати більше». Це не тільки покращить вигляд картки товару, а й позитивно вплине на SEO вашого інтернет-магазину.

У цій статті я покажу, як легко реалізувати цей функціонал навіть якщо ваша тема WooCommerce за замовчуванням таку функцію не підтримує.

Навіщо це потрібно?

Покращення юзабіліті сторінки товару
Оптимізація SEO для WooCommerce — текст залишається в коді сторінки й доступний пошуковим системам
Зменшення «візуального шуму» на сторінці магазину
Адаптація під мобільні пристрої (менше скролу = більше продажів)

Як зробити опис товару в WooCommerce згортаним?

Все, що вам потрібно — це невеликий код і плагін для вставки кастомних скриптів. Рекомендую використовувати безкоштовний плагін Simple Custom CSS and JS — він дозволяє додавати код без редагування файлів теми.

Крок 1: Додайте PHP-скрипт

Вставте цей код у плагін через пункт HTML:

php

function add_full_description_and_additional_info_accordion_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
const descriptionTab = document.querySelector('a[href="#tab-description"]');
const additionalInfoTab = document.querySelector('a[href="#tab-additional_information"]');
const descriptionPanel = document.querySelector('#tab-description');
const additionalInfoPanel = document.querySelector('#tab-additional_information');
function createReadMoreButton(panel, tab) {
if (panel && panel.textContent.trim() !== '') {
const readMoreBtn = document.createElement('button');
readMoreBtn.className = 'read-more-btn';
readMoreBtn.textContent = 'Читати більше';
readMoreBtn.addEventListener('click', function () {
panel.classList.toggle('expanded');
if (panel.classList.contains('expanded')) {
readMoreBtn.textContent = 'Читати менше';
} else {
readMoreBtn.textContent = 'Читати більше';
}
});
panel.parentNode.insertBefore(readMoreBtn, panel.nextSibling);
tab.addEventListener('click', function () {
document.querySelectorAll('.read-more-btn').forEach(btn => btn.style.display = 'none');
readMoreBtn.style.display = 'block';
});
}
}
createReadMoreButton(descriptionPanel, descriptionTab);
createReadMoreButton(additionalInfoPanel, additionalInfoTab);
document.querySelectorAll('.read-more-btn').forEach(btn => btn.style.display = 'none');
if (descriptionTab.classList.contains('active')) {
document.querySelector('.read-more-btn').style.display = 'block';
}
});
</script>
<?php
}
add_action('wp_footer', 'add_full_description_and_additional_info_accordion_script');

Крок 2: Додайте CSS стилі для ефекту згортання

У тому ж плагіні додайте цей CSS-код:

css

.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--additional_information {
overflow: hidden;
max-height: 200px;
transition: max-height 0.5s ease;
position: relative;
}
.woocommerce-Tabs-panel--description.expanded,
.woocommerce-Tabs-panel--additional_information.expanded {
max-height: 100%;
}
.woocommerce-Tabs-panel--description:after,
.woocommerce-Tabs-panel--additional_information:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: linear-gradient(transparent, #fff);
pointer-events: none;
opacity: 0.7;
transition: opacity 0.5s ease;
}
.woocommerce-Tabs-panel--description.expanded:after,
.woocommerce-Tabs-panel--additional_information.expanded:after {
opacity: 0;
}
.read-more-btn {
display: inline-block;
margin-top: 10px;
background-color: #000;
color: #fff;
padding: 10px 15px;
cursor: pointer;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.read-more-btn:hover {
background-color: #444;
}

Результат: Чисто, стильно і SEO-дружньо!

Тепер ваші описи товарів у WooCommerce та додаткова інформація виглядатимуть компактно, з кнопкою «Читати більше». Це дозволяє зберегти великий текст у вихідному коді сторінки, що важливо для SEO оптимізації інтернет-магазину. До того ж, це покращує досвід користувача, особливо на мобільних пристроях.

Часті запитання (FAQ)

Чи можна використовувати цей код на будь-якій темі WooCommerce?
Так, код працює з більшістю тем. Якщо не працює — потрібно перевірити, чи темою не змінено ID вкладок опису.

Це рішення безпечне для SEO?
Так! Весь текст залишається у HTML коді сторінки, тому Google та інші пошукові системи його індексують.

А якщо я не хочу возитися з кодом?
Можете скористатися плагінами-акордеонами для WooCommerce, але власний код — це легше, швидше і не навантажує сайт зайвими плагінами.

Тепер ваш магазин виглядає професійно, а пошукові системи — радіють 😊 Якщо хочете більше таких практичних порад для WooCommerce — підписуйтесь на мій блог і будете завжди на крок попереду конкурентів!

Як зробити опис товару у WooCommerce з функцією «Читати більше»

Навіщо це потрібно?

Як зробити опис товару в WooCommerce згортаним?

Крок 1: Додайте PHP-скрипт

Крок 2: Додайте CSS стилі для ефекту згортання

Результат: Чисто, стильно і SEO-дружньо!

Часті запитання (FAQ)

Потрібен сайт, консультація, анімація або графічний дизайн? Лишіть заявку і я з вами зв'яжуся!

Підтримати розвиток ресурсу

Підтримати проєкт через Monobank

Недавні записи

Коментарі

Як зробити опис товару у WooCommerce з функцією «Читати більше»

Навіщо це потрібно?

Як зробити опис товару в WooCommerce згортаним?

Крок 1: Додайте PHP-скрипт

Крок 2: Додайте CSS стилі для ефекту згортання

Результат: Чисто, стильно і SEO-дружньо!

Часті запитання (FAQ)

Потрібен сайт, консультація, анімація або графічний дизайн? Лишіть заявку і я з вами зв'яжуся!

Підтримати розвиток ресурсу

Підтримати проєкт через Monobank

Недавні записи

Позначки публікацій

Коментарі