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

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

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

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

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

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

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

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

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

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

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

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

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

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

WooCommerce , ціна та додавання в кошик

Ми додамо модулі Elementor для «Назва продукту», «Ціна продукту» та «Додати в кошик» у правому стовпці.

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

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

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

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

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

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

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

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

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

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

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; колір: #fff; border-radius: 0px; }

Короткий опис продукту Elementor

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

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

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

Збільшення продажів продуктів Elementor і WooCommerce

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

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

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

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

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

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

Висновок – конструктор сторінок продукту

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

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

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