Wordpress Woocommerce：如何在类别页面上添加滑块革命

Question

你好我有一个关于在wordpress 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函数！