Створіть і спроектуйте дивовижну сторінку продуктів WooCommerce за допомогою Elementor

Ви повинні змінити сторінку товару, щоб відрізняти ваш магазин електронної комерції від конкурентів та надавати своїм клієнтам унікальний досвід. Крім того, можливість естетичної персоналізації сторінки вашого товару є критично важливою для підтримання послідовного візуального дизайну у всьому Інтернет-магазині.

Elementor є одним з провідних розробників веб-сайтів WordPress на ринку, але чи знали ви також, що можете створювати магазини WooCommerce, використовуючи його?

Багато вбудованих модулів Elementor WooCommerce дозволяють вставляти вміст або блоки функціональних можливостей WooCommerce або стилізувати їх за допомогою конструктора Elementor. Дуже чудово, правда?

Для стилізації та налаштування WooCommerce раніше вимагали PHP та CSS для кожної крихітної зміни, але в міру вдосконалення та ускладнення таких інструментів, як Elementor, з’являється все більше можливостей для контролю того, як ваш магазин виглядає та працює.

Давайте розпочнемо.

• Створення шаблону Elementor
• Зображення продукту або галереї Elementor
• Назва продукту WooCommerce, ціна та додавання у кошик
• Налаштування вкладок продукту Elementor
• Короткий опис продукту Elementor
• Продаж продуктів Elementor та WooCommerce
• Висновок - конструктор сторінок продуктів Elementor

Створення шаблону Elementor

Першим кроком у процедурі є створення нового шаблону Elementor, перейшовши до Шаблони на інформаційній панелі WordPress. Натисніть "Створити нове", а потім виберіть "Одиночний продукт" як шаблон, який ви хочете створити.

Оскільки ми розробляємо цей шаблон з нуля, немає потреби класти будь-які блоки; вийдіть із наступного вікна, поки не дійдете до звичайного екрану конструктора Elementor для нової сторінки.

Зображення продукту або галереї Elementor

Кожен продукт WooCommerce має зображення товару або галерею зображень, що демонструє фотографії товару клієнтам. Elementor пропонує вбудований модуль Product Images, який дозволяє вставити це в наш шаблон.

Створіть простий рядок із 2 стовпців та введіть модуль Product Images у лівій колонці; це виглядає практично і виконує роботу, але давайте налаштуємо значок продажу відповідно до теми Elementor Hello, яка використовується для цієї статті. Для цього нам потрібно застосувати невеликий рядок власного CSS, який можна ввести, перейшовши до Додатково> Спеціальний CSS та вставивши наведений нижче код.

селектор .onsale {\ sbackground-color: # cc3366; \ s}

Назва продукту WooCommerce , ціна та додавання в кошик

Ми додамо модулі Elementor для заголовка товару, ціни товару та додавання в кошик у правій колонці.

Шукайте ці три модулі в конструкторі Elementor, а потім перетягуйте їх, щоб розташувати в послідовності, зазначеній вище; це повністю функціонально, але ми хочемо налаштувати його відповідно до стилю, як у вищенаведеному розділі тема Hello Elementor. Стилювати модулі за допомогою Elementor легко, все, що вам потрібно зробити, це натиснути на модуль, і редактор повинен відкрити опції стилізації зліва.

Зміст цих модулів чудовий. Таким чином, ми будемо працювати на вкладці Стиль. По-перше, давайте оновимо шрифт і колір заголовка продукту, щоб він відповідав використаному в темі Hello Elementor.

Потім нам потрібно зробити те саме для модулів "Ціна товару" та "Додати до кошика", клацнувши на кожному модулі та змінивши колір тексту. Щодо ціни товару, я буду використовувати темно-сірий колір, щоб контрастувати із заголовком, тому введіть цей шістнадцятковий код, якщо ви стежите за ним - # 54595f

Далі, в модулі «Додати в кошик» ми оновимо кілька речей. Колір фону кнопки та радіус межі кнопки, використовуючи наведені нижче налаштування:

• Встановіть для вмісту "Додати в кошик".
• Встановіть колір тла на '# cc3366'
• Встановіть радіус межі 0

Я змінив радіус межі селектора на 0, що можна зробити на вкладці Стиль для кількості.

Налаштування вкладок продукту Elementor

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

Будь ласка, створіть новий рядок під верхнім розділом і перетягніть модуль Вкладки даних про товар із конструктора Elementor у рядок, щоб вставити його. Тут не потрібно багато стилів, оскільки він успадковує деякі стилі з теми Hello Elementor. Однак давайте змінимо стиль кнопки подання рецензії.

Для цього нам знову знадобиться трохи власного CSS. Почніть редагувати вкладки "Дані про товар", клацніть на вкладці "Додатково" та прокрутіть вниз до спеціального CSS. Введіть нижченаведений CSS, і ви зможете регулювати кольори відповідно до вашого дизайну.

.woocommerce #review form #reply .form-submit input {background-color: # cc3366; колір: #fff; межа-радіус: 0px; }

Короткий опис елемента елемента

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

Знайдіть модуль короткого опису WooCommerce, а потім перетягніть його під ціною товару та над модулем Додати в кошик.

Тут поки не потрібен стиль, оскільки він успадкував стилі від Hello Elementor.

Компанії Elementor та WooCommerce продають нові продукти

Збільшення середньої вартості кошика має вирішальне значення для кожного веб-сайту WooCommerce, саме тому приємно, що Elementor включає модуль Upsells Product для легкої інтеграції налаштувань у ваш магазин.

Знайдіть модуль Upsells продукту в конструкторі Elementor та вставте його в новий рядок за вкладками Product Data.

Як бачите, для цього потрібно трохи налагодити, щоб доповнити решту нашого стилю. Почніть модифікувати модуль та внесіть такі зміни:

• Встановіть колір заголовка на - # cc3366
• Встановіть колір заголовка на - # cc3366
• Встановіть колір ціни на - # 54595f
• Встановіть колір фону кнопки - # cc3366
• Встановіть для кольору кнопки - #fff
• Встановіть радіус межі кнопки t0 - 0

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

Закінчивши, ви публікуєте шаблон. У наступному вікні ви побачите запитання “Де ви хочете відобразити свій шаблон?”. Клацніть на “Додати умову”, щоб визначити, коли слід використовувати цей шаблон. Ви можете вибрати “Усі товари”, щоб використовувати шаблон на всіх сторінках ваших продуктів. Ви також можете використовувати цей шаблон лише для продуктів, які належать до певної категорії або мають певний тег, пов’язаний з ними.

Конструктор сторінок продукту Elementor

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

Ви також можете вибрати порожню сторінку та створити одну з нуля, використовуючи віджети продукту для повністю налаштованого вигляду. Використовуйте порожню сторінку, закрийте спливаюче вікно бібліотеки шаблонів, коли вона з’явиться, і починайте побудову на новоствореній сторінці. Спеціальна кнопка "Додати в кошик", "Ціна товару", "Зображення товару" та "Назва та опис товару" - це лише декілька віджетів WooCommerce, якими ви можете налаштувати сторінку товару. Ви можете переглянути всі доступні на даний момент віджети, відвідавши цю сторінку. Якщо ви бажаєте, ви можете розташувати віджети, де завгодно, на макеті сторінки та налаштувати їх стилі відповідно до бажаного вигляду.

Ви повинні змінити сторінку товару, щоб відрізняти ваш магазин електронної комерції від конкурентів та надавати своїм клієнтам унікальний досвід. Крім того, можливість естетичної персоналізації сторінки вашого товару є критично важливою для підтримання послідовного візуального дизайну у всьому Інтернет-магазині. Elementor - це чудовий інструмент для налаштування сторінок вашого магазину WooCommerce, і він дуже рекомендується. Окрім того, що конструктор сторінок простий у використанні, він включає всі необхідні віджети та варіанти стилів, які допоможуть вам у створенні власних сторінок продукту. Ми сподіваємось, що цей підручник був інформативним та надав інформацію, необхідну для налаштування вашого продукту WooCommerce та сторінок архіву продуктів за допомогою Elementor. Чи використовували ви Elementor для створення сторінок WooCommerce раніше? Ви можете поділитися своїми думками в розділі коментарів. Ми були б раді подивитися.