Полезные заметки по WooCommerce, разбираем на молекулы

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

WooCommerce весьма хороший инструмент для создания интернет-магазина на базе WordPress, однако работа с ним иногда вызывает вопросы. Порой найти решение простой задачи, например, вывести банальный артикул в карточке товара у некоторых вызывают вопросы. Я собрал минимальный набор самых простых заметок, с которыми и делюсь с вами, в процессе статья будет разрастаться. Новые заметки будут обозначены меткой UPD (update).

Заметка #1

Вывести описание текущей категории WooCommerce.

<?php do_action('woocommerce_archive_description'); ?>
Заметка #2

Вывести миниатюру текущей категории WooCommerce.

<?php global $product;
if (is_product_category()) {
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($thumbnail_id);
if ($image) {
echo '<img src="'. esc_url($image).'" alt="" />';
}
}?>
Заметка #3

Вывести список подкатегорий текущей категории WooCommerce, в которой мы находимся. Код выводит только те категории, в которых есть хотя бы 1 товар, категории без товаров не выводятся.

<?php global $product;
if (is_product_category()) {
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($thumbnail_id);
if ($image) {
echo '<img src="'. esc_url($image).'" alt="" />';
}
}?>
Заметка #4

Вывести заголовок страницы WooCommerce, скрыть его, если заголовка у страницы нет.

<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="title_style"></h1>
<?php endif; ?>
Заметка #5

Вывести значение атрибута товара WooCommerce, зная его slug name.

<?php global $product; echo $product->get_attribute('slugname'); ?>
// slugname - slug вашего атрибута

<?php if($product->get_attribute('slugname') == true) {echo "<span>Название атрибута: ".$product->get_attribute('slugname')."</span>";} ?>
// slugname - slug вашего атрибута. Но в данном случае вы можете ещё подписать атрибут и скрыть текст подписи, если атрибут не заполнен.
Заметка #6

Вывести все атрибуты товара WooCommerce.

<?php global $product; echo $product->list_attributes();?>
Заметка #7

Вывести краткое описание товара. Краткое описание товара указывается в админке, при редактировании товара.

<?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?>
Заметка #8

Вывести кнопку «Добавить в корзину», которая будет добавлять одну единицу текущего товара в корзину.

<?php
echo apply_filters( 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
sprintf( '<a target="_blank" href="%s" data-quantity="%s" class="btn">Добавить в корзину &amp;rarr;</a>', esc_url( $product->add_to_cart_url() ), esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ), esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ), isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '', esc_html( $product->add_to_cart_text() ) ), $product, $args );
?>
Заметка #9

Вывести артикул товара WooCommerce.

<?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>
// выводим просто артикул

<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
<p><?php esc_html_e( 'ID товара:', 'woocommerce' ); ?> <strong><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></strong><p>
<?php endif; ?>
// выводим артикул + свою надпись перед артикулом, т.е. условная логистика
Заметка #10

Вывести стоимость текущего товара WooCommerce.

<?= $product->get_price(); ?> // обычный формат

<?= $product->get_price_html(); ?> // HTML формат вывода

<?php if ( $product->price > 0 ) {?> // Условная логика: Если НЕТ цены - ничего не выводим, если цена ЕСТЬ - показываем её
<?= $product->get_price(); ?> // обычный формат
<?php } else { ?><?php } ?>
Заметка #11

В карточке товара вывести похожие товары WooCommerce из этой же категории.

<?php echo do_shortcode( '[related_products per_page="3"]' ); ?>

Пояснение: Вывод происходит шорткодом, вы можете указать количество выводимых товаров. Переопределить шаблон вывода товаров нужно в шаблоне /woocommerce/content-related.php

Заметка #12

В результатах поиска отображаем только товары из магазина.

Добавляем в functions.php темы:

// в результатах поиска отображаем только товары из магазина
function dco_pre_get_posts($query) {
    if (!is_admin() && $query->is_main_query()) {
        if ($query->is_search) {
            $query->set('post_type', 'product');
        }
    }
}

add_action('pre_get_posts', 'dco_pre_get_posts');
Заметка #13

Выводим иконку корзины и счетчик товаров в ней, работает на AJAX

Заметка #13 – Выводим иконку корзины и счетчик товаров в ней, работает на AJAX

В файл functions.php добавляем:

add_filter('woocommerce_add_to_cart_fragments', 'header_add_to_cart_fragment');

function header_add_to_cart_fragment( $fragments ) {
    global $woocommerce;
    ob_start();
    ?>
    <span class="basket-btn__counter">(<?php echo sprintf($woocommerce->cart->cart_contents_count); ?>)</span>
    <?php
    $fragments['.basket-btn__counter'] = ob_get_clean();
    return $fragments;
}

На место, где нужно вывести корзину и счётчик товаров в корзине добавляем:

<div class="cart_area">
    <?php
    global $woocommerce; ?>
    <a target="_blank" href="<?php echo $woocommerce->cart->get_cart_url() ?>" class="basket-btn basket-btn_fixed-xs">
    <i class="fas fa-shopping-cart"></i><span>Корзина <span class="basket-btn__counter">(<?php echo sprintf($woocommerce->cart->cart_contents_count); ?>)</span></span>
    </a>
</div>
Заметка #14

Выводим знак текущей выбранной валюты магазина

<?= get_woocommerce_currency_symbol( $currency = '' ); ?>
Заметка #15

Выводим статус остатка «Есть в наличии», «Нет в наличии»

<?php if (get_post_meta(get_the_ID(), '_stock_status', true) == 'outofstock') { // наличие товара ?>
<div class="availability outofstock">Нет в наличии</div>
<?php } else { ?>
<div class="availability">Есть в наличии</div>
<?php } ?>

Данная статья в процессе будет разрастаться, если у Вас есть, чем поделиться — пишите в комментариях, буду добавлять заметки по WooCommerce сюда.

Если Вам требуется разработка уникального интернет-магазина на WooCommerce, обращайтесь ко мне. Буду рад создать для Вас уникальный, продающий и функциональный интернет-магазин.

Поделиться в социальных сетях
ВКонтакте
Facebook
WhatsApp
Telegram
Автор статьи
Метки
Выгодный хостинг
Хостинг Beget

Выгодная партнёрская программа! Верните на свой счёт 20% с любой суммы от оплаты хостинга Beget!

Новое в блоге
  1. Максим:

    Спасибо, очень полезно

  2. Андрей:

    Спасибо! Много полезного! Не подскажете, как вывести изображения товаров объединенных одним мета тегом? То есть, задача в построении галереи товаров с одним мета-тегом в Woocommerce через Elementor.

  3. edveraxo:

    Не понятно, что Вы хотите сделать, опишите задачу подробнее.

  4. Андрей:

    Задача в следующем. Имеем шаблон карточки товара в Elementor, имеем товары с метками. Задача — через инстумент Portfolio (в элементор) вывести товары с принадлежностью к той же метке, что и товар, на который мы зашли.

    Я так понимаю это можно сделать через создание некого фильтра и добавлением его в query id.

  5. edveraxo:

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

Добавить комментарий

Смотрите также

Watch now

Написать в мессенджер

Связаться с нами прямо сейчас!