WP_Query для товаров WooCommerce

Question

WP_Query для товаров WooCommerce

19 апр. 2018 г., 18:03:40

Просмотры: 54.5K

Голосов: 5

Я пытаюсь отобразить товары WooCommerce в пользовательском цикле. Вот мой код:

<?php
  // Аргументы для запроса товаров
  $args = array( 'post_type' => 'product', 'posts_per_page' => 6, 'product_cat' => 'apparel', 'orderby' => 'date' );
  $loop = new WP_Query( $args );
  while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

  <div class="col-4">
    <figure class="figure">
      <a href="<?php echo get_permalink( $loop->post->ID ) ?>">
         <?php echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog');?>
      </a>
      <div class="updetails">
        <p class="price">$<?php echo $product->get_price(); ?></p>
           <p class="offer"><?php woocommerce_show_product_sale_flash( $post, $product ); ?></p>
      </div>
      <figcaption class="figure-caption">
        <h3 class="title"><?php echo the_title(); ?></h3>
        <div class="rating">
          <img src="<?php echo get_template_directory_uri(); ?>/img/rating.png" class="img-fluid" alt="Рейтинг продукта" title="Рейтинг продукта" />
        </div>
        <p class="description">Легкий нейлон и T-образный дизайн для комфортной посадки. Юниорские размеры...</p>
        <div class="useraction">
           <a href="#" class="wishlist" data-toggle="tooltip" title="Добавить в избранное"><i class="fas fa-heart"></i></a>
           <a href="#" class="addtocart" data-toggle="tooltip" title="Добавить в корзину"><i class="fas fa-cart-plus"></i> Добавить в корзину</a>
           <a href="#" class="quickview" data-toggle="tooltip" title="Быстрый просмотр"><i class="fas fa-eye"></i></a>
        </div>
     </figcaption>
 </figure>

Мне удалось отобразить заголовок, цену и ссылку на товар, но если у вас есть лучший вариант, пожалуйста, дайте мне знать, я буду признателен. Сейчас я пытаюсь отобразить рейтинг товара в виде звезд, краткое описание и кнопку добавления в корзину, а также список желаний и быстрый просмотр. Как я могу это сделать? У вас есть более удачный вариант?

Milan Bastola

297

wp query разработка тем woocommerce offtopic запрос e commerce

Комментарии

Вам следует избегать использования WP_Query(). Подробнее здесь: https://cfxdesign.com/create-a-custom-woocommerce-product-loop-the-right-way/. Хотя вы спрашиваете о дополнительных деталях по настройке вывода цикла, что скорее относится к вопросам шаблонизации.

cfx

24 мая 2018 г. 22:18:55

Все ответы на вопрос

Комментарии

это не то решение, которое я ищу.

Milan Bastola

20 апр. 2018 г. 17:39:44

Для отображения звездного рейтинга товара в вашем коде

<div class="rating">
      <?php add_star_rating(); ?>
</div>

Теперь перейдите в файл functions.php в папке вашей темы и вставьте следующий код:

function add_star_rating(){
    global $woocommerce, $product;
    $average = $product->get_average_rating();

    echo '<div class="star-rating"><span style="width:'.( ( $average / 5 ) * 100 ) . '%"><strong itemprop="ratingValue" class="rating">'.$average.'</strong> '.__( 'из 5', 'woocommerce' ).'</span></div>';
}
add_action('woocommerce_after_shop_loop_item', 'add_star_rating' );

Теперь перейдите в файл style.css в папке вашей темы и вставьте следующий код:

@font-face {
  font-family: star;
  src: url("../lets_buy_24/assets/fonts/star.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}


.star-rating {
    /*font-size: .857em;
    display: block;
    float: none;
    float: right;*/
    margin: .3em 0;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
    font-family: star;
}

.star-rating::before {
    content: "\73\73\73\73\73";
    color: #df3737;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}

.star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}

.star-rating span::before {
    content: "\53\53\53\53\53";
    top: 0;
    position: absolute;
    left: 0;
    color: #df3737;
}

.star-rating strong {
    display: block;
}

файл star.woff можно найти по следующему пути:

wordpress\wp-content\plugins\woocommerce\assets\fonts\star.woff

скопируйте его и поместите в вашу директорию, затем укажите путь к нему в CSS-файле

Md. Mehedi Hassan

3

7 сент. 2019 г. 15:22:29

Dharmishtha Patel 713 · Accepted Answer · 2018-04-20T10:14:43Z

<ul class="products">
    <?php
        // Аргументы для запроса товаров
        $args = array(
            'post_type' => 'product', // Тип записи - товар
            'posts_per_page' => 12     // Количество товаров на странице
            );
        // Создаем новый запрос
        $loop = new WP_Query( $args );
        // Проверяем, есть ли товары
        if ( $loop->have_posts() ) {
            // Цикл для вывода каждого товара
            while ( $loop->have_posts() ) : $loop->the_post();
                // Подключаем шаблон для отображения товара
                wc_get_template_part( 'content', 'product' );
            endwhile;
        } else {
            // Если товары не найдены, выводим сообщение
            echo __( 'Товары не найдены' );
        }
        // Сбрасываем данные запроса
        wp_reset_postdata();
    ?>
</ul><!--/.products-->