Wordpress Woocommerce:如何在类别页面上添加滑块革命
问题描述:
你好我有一个关于在wordpress woocommerce上的类别页面上显示滑块革命的问题。 所以我想布局&看法是这样的: I want like thisWordpress Woocommerce:如何在类别页面上添加滑块革命
我尝试短代码添加到分类,但分类的结果并不是我想要的,布局是这样的: not I want
有人可以帮助我?
答
样品转盘滑块代码
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');
+0
将产品类别添加到这里。 'product_cat'=>'', – vel
答
您可以在使用操作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函数!
您可以自定义简码。 – vel
你能举个例子吗? @vel –
可以发布您的简码吗? – vel