Как получить и отобразить описание продукта в WooCommerce

Хотите получать описания продуктов в WooCommerce и отображать их на страницах магазина и товаров?

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

Эта статья покажет вам, как получать и отображать описания продуктов в WooCommerce, чтобы улучшить взаимодействие с пользователем и увеличить продажи.

Почему важны описания продуктов WooCommerce?

Покупатели посещают ваш интернет-магазин по нескольким причинам:

1. Изучение того, что вы можете предложить
2. Ищете конкретный продукт
3. Сравнение вас с альтернативами
4. Рассматривание ветрин

Если посетителям будет трудно получить необходимую им информацию, они покинут ваш сайт до совершения покупки. Тем не менее, если вы предлагаете покупателям уникальные и подробные описания товаров, они смогут быстро найти то, что ищут.

Описания продуктов WooCommerce также побуждают потенциальных клиентов щелкнуть и узнать больше о ваших продуктах.

Например, если пользователи увидят краткое описание продукта на странице вашего магазина, они могут щелкнуть, чтобы прочитать полное описание. Оттуда они могут:

• Узнать цену
• Посмотреть изображения продукта
• Ознакомьтесь со спецификациями продукта
• Читайте обзоры и рейтинги

Эта информация может убедить пользователей купить продукт тут же.

Ваш следующий вопрос, скорее всего, будет: «Как вы добавляете описания продуктов в WooCommerce?». Продолжайте читать, чтобы узнать.

Как добавить описание продукта в WordPress?

Чтобы добавить описания продуктов в WordPress с помощью WooCommerce, перейдите в раздел WooCommerce » Товары на панели управления WordPress.

Затем вы можете либо добавить новый продукт, либо отредактировать существующую запись продукта.

Вы можете ввести описание продукта в главном редакторе WordPress. Это будет отображаться как полное описание продукта в вашем магазине.

Затем прокрутите вниз и введите сведения о продукте в разделе « Данные о продукте», в том числе:

• Тип продукта
• Обычная и распродажная цена
• Инвентарь
• Перевозки
• Связанные продукты
• Атрибуты
• Передовой

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

Не забудьте добавить категорию продукта и загрузить изображения для ваших продуктов. Затем вы можете нажать «Обновить» или «Опубликовать», чтобы изменения вступили в силу.

Есть ли короткий код для описания продукта в WooCommerce?

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

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

Вам понадобится плагин WordPress или пользовательский код, чтобы настроить описания продуктов и отобразить их в другом месте на вашем сайте.

К счастью, у нас есть решение для обоих, которое мы объясним ниже.

Как отображать описания продуктов в WooCommerce с помощью SeedProd

Добавление пользовательских описаний продуктов в WooCommerce очень просто с SeedProd.

SeedProd — лучший конструктор сайтов и плагин для целевых страниц для WordPress. Он позволяет создавать собственные темы WordPress, сайты WooCommerce и гибкие макеты веб-сайтов без кода.

Начать работу легко с более чем 180 шаблонами целевых страниц и более чем 25 готовыми темами WordPress. Вы можете настроить каждый дизайн в визуальном конструкторе страниц SeedProd с функцией перетаскивания.

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

Вы даже можете использовать SeedProd для создания целых сайтов электронной коммерции с уникальными страницами продуктов, корзинами покупок, оформлением заказа, архивами и страницами магазинов. Плагин работает молниеносно и не раздувается, обеспечивая быструю работу вашего сайта для посетителей.

Выполните следующие шаги, чтобы получить описания продуктов в WooCommerce и отобразить их с помощью SeedProd.

Шаг 1. Установите SeedProd Website Builder

Сначала загрузите файл плагина SeedProd на свой компьютер.

Примечание. Существует бесплатная версия SeedProd, но мы будем использовать план SeedProd Elite для функций WooCommerce.

Затем установите и активируйте SeedProd на своем веб-сайте WordPress. Вы можете следовать этому руководству по установке плагина WordPress, если вам нужна помощь.

После установки SeedProd перейдите в SeedProd »Настройки и введите свой лицензионный ключ.

Вы можете найти свой лицензионный ключ, войдя в свою учетную запись SeedProd и щелкнув вкладку « Загрузки ».

Теперь введите свой ключ в текстовое поле и нажмите кнопку « Подтвердить ключ ».

Шаг 2. Создайте собственную тему WooCommerce

Чтобы использовать функции SeedProd WooCommerce, вам необходимо создать новую тему WordPress с помощью SeedProd. Это заменит вашу существующую тему пользовательским дизайном, и это легко сделать даже для новичков.

Для этого перейдите в SeedProd » Theme Builder и нажмите кнопку Themes .

Далее вы увидите библиотеку готовых шаблонов веб-сайтов SeedProd. Когда вы найдете понравившийся шаблон, наведите на него курсор и щелкните значок галочки.

После импорта вашей темы SeedProd сделает все части из демо-версии темы.

Примечание . Мы называем отдельные части темы «шаблонами».

Щелчок по каждому шаблону откроет его в редакторе SeedProd с функцией перетаскивания, где вы сможете настроить содержимое и дизайн.

Первый шаблон, который мы отредактируем в этом руководстве, — это страница продукта. Когда посетители нажимают на продукт в вашем магазине, они увидят страницу продукта с подробной информацией об этом товаре.

Шаг 3. Отредактируйте шаблон страницы продукта

Чтобы настроить страницу продукта, наведите указатель мыши на шаблон страницы продукта и нажмите ссылку « Изменить дизайн» .

Шаблон откроется в визуальном редакторе SeedProd с перетаскиванием, где вы можете указать и щелкнуть, чтобы изменить дизайн и макет.

Во-первых, давайте посмотрим, как добавить краткое описание продукта на свою страницу.

В левой части экрана найдите раздел « Теги шаблона WooCommerce » и перетащите блок « Краткое описание » на свой дизайн.

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

Например, вы можете изменить выравнивание описания, размер шрифта и вставить динамический текст.

На вкладке «Дополнительно» вы можете настроить стили блоков, включая цвета, шрифты, интервалы и т. д.

Вы можете выполнить аналогичные шаги, чтобы добавить длинные описания на страницы продуктов. Просто перетащите блок « Содержимое продукта » с левой панели и поместите его на место.

Как и прежде, вы можете настроить содержимое, стиль и цвета в несколько кликов.

Примечание. Вы не увидите предварительный просмотр блока «Содержимое продукта» в интерактивном редакторе.

Шаг 4. Настройте остальную часть вашего сайта WooCommerce

После добавления описаний продуктов на свою страницу вы можете продолжить настройку остальной части своего магазина. Просто нажмите ссылку « Редактировать дизайн» в любом шаблоне, чтобы изменить отображаемый контент и внешний вид.

Например, вы можете:

• Настройте страницы категорий продуктов
• Показать избранные продукты
• Добавьте пользовательскую боковую панель WordPress

У вас будет полностью настраиваемый магазин WooCommerce, готовый превратить покупателей в клиентов, когда вы закончите.

Шаг 5. Опубликуйте свой веб-сайт WooCommerce

Когда вы довольны своим новым дизайном, пришло время воплотить его в жизнь.

Для этого перейдите на страницу SeedProd » Theme Builder и в правом верхнем углу щелкните переключатель « Включить тему SeedProd» , пока он не окажется в положении «включено».

Теперь вы можете просмотреть любой продукт на своем сайте и увидеть его краткое и подробное описания в действии.

Вот как будет выглядеть ваше краткое описание:

А вот как будет выглядеть длинное описание в зависимости от вашего макета:

Как добавить краткое описание WooCommerce на страницу магазина

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

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

Примечание: это решение включает в себя редактирование файлов вашего веб-сайта. Мы рекомендуем следовать этим инструкциям, только если вы опытный пользователь WordPress.

Во-первых, ознакомьтесь с тем, как добавлять фрагменты кода в WordPress.

Теперь скопируйте этот фрагмент кода и вставьте его в файл functions.php или с помощью плагина фрагментов кода.

/**
 * SeedProd - Add short description to products listing on shop page (only)
 */
add_action( 'woocommerce_after_shop_loop_item_title', 'sp_wc_add_short_description' );
function sp_wc_add_short_description() {
    if( is_shop() ){
        global $product;
        ?>
        <div class="woocommerce-loop-product-description">
            <?php echo apply_filters( 'woocommerce_short_description', $product->get_short_description() ) ?>
        </div>
        <?php        
    }
}

При предварительном просмотре страницы магазина WooCommerce вы увидите описания продуктов над кнопкой «Добавить в корзину».

Вот оно!

Мы надеемся, что эта статья помогла вам научиться получать описания продуктов в WooCommerce и отображать их для ваших клиентов.

SeedProd включает в себя все необходимое для настройки любой части вашего веб-сайта WordPress и магазина WooCommerce. Вы даже можете использовать SeedProd для запуска клиентских веб-сайтов, как это сделал Mustard Seed в этом примере.

Спасибо за чтение. Следите за нами на YouTube, Twitter и Facebook, чтобы получать больше полезного контента для развития вашего бизнеса.