WordpressのWoocommerce：カテゴリページにスライダの回転を追加するには

Question

こんにちは私は、ワードプレスのwoocommerceのカテゴリページにスライダの回転を表示する問題があります。 だから私はこのようなレイアウト&眺めたい：私はカテゴリにショートを追加しようとしましたが、カテゴリの結果は私が望むようにしない I want like this

を、このようなレイアウト： not I want

誰かが私を助けることができます？

Answer 1

サンプルカルーセルスライダーコード

 function product_carousel_func() { 
      $Inc=0; 
      $args=array(
         'post_type' =>'product', 
         'product_cat' =>'', 
         'posts_per_page' =>20, 
        'orderby' => 'rand' 
        ); 

     $wc_query = new WP_Query($args); 

      $carouselSlider = '<ol class="carousel-indicators ">'; 
       $output.=''; 
       if ($wc_query->have_posts()){ 
      while ($wc_query->have_posts()){ 
      $wc_query->the_post(); 
      global $product; 
         $imgurl = wp_get_attachment_image_src(get_post_thumbnail_id($product->id)); 
      $ActiveClass=''; 
      if($Inc==0){ 
      $ActiveClass='active'; 
      } 

      $carouselSlider .= '<li data-target="#mycarousel1" data-slide-to="'.$Inc.'" class="'.$ActiveClass.'"></li>'; 

        if($Inc%2==0) { 

         $output.='<div class="item '.$ActiveClass.'"> 
          <div class="container"> 
           <div class="row carouselrow">'; 
         $OddClass ='cs_oddslider'; 
        }else{ 
         $OddClass ='cs_evenslider'; 
        } 
       $output.='<div class="col-md-6 col-sm-6 col-xs-6 '.$OddClass.'"> 
          <img src="'.$imgurl[0].'" class="img-responsive img-circle"> 
          <div class="carousel-caption " id="carousel"> 
           <div class="col-md-10 col-sm-10 col-xs-10 paradiv"> 
           <p class="">'.get_the_title().'</p> 
           <button type="button" class="">SHOP NOW</button> 
           </div> 
          </div> 
          </div>'; 

       if($Inc%2!=0) { 
         $output.='</div></div></div>'; 
        } 
      $Inc++; 

        } 
      } 


     $carouselSlider .= '</ol>'; 

      return '<div class="container-fluid "><div id="mycarousel1" class="carousel slide" data-ride="carousel">'.$carouselSlider.'<div class="carousel-inner" role="listbox">'.$output.'</div></div> </div></div></div>'; 
     } 

     add_shortcode('product_carousel', 'product_carousel_func'); 

Answer 2

あなたは、アクションwoocommerce_before_main_contentまたはwoocommerce_archive_descriptionを使用してwoocommerceアーカイブページの上部に事前に定義されたスライダーを追加することができます。

コールする機能では、do_shortcode()を使用してください。

add_action('woocommerce_archive_description', 'display_revslider'); 

function display_revslider(){ 
     echo do_shortcode('revslider'); //arrange this to get the right shortcode with category if need 
} 

やプラグイン

function rev_slider_to_archive_pages() { 
     if (is_product_category()) { 
      if (function_exists('putRevSlider')) { putRevSlider("default"); 
      } 
     } 
    } 

    add_action('woocommerce_before_main_content', 'rev_slider_to_archive_pages',21); 

のPHPの関数を使用して、それがお役に立てば幸い！