如何解决Woocommerce自定义产品滑块简码
我正在研究类似于快照的woocommerce定制产品滑块简短代码,但是我不知道如何在woocommerce中使用滑块。 (https://www.buywholefoodsonline.co.uk/)
我的想法是使用简码从数据库中调用此最畅销的产品滑块。 我已经使用了这段代码(How can I list best selling products in woocommerce),但是没有得到相似的布局。
我想在某种滑块中找到适合此代码的方法。猫头鹰轮播(https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html)
我将owl.carousel的样式和脚本加入到functions.PHP中。
function loadup_scripts()
{
wp_register_script('jquery','https://code.jquery.com/jquery-1.11.0.min.js',NULL,'1.11.0',false);
wp_enqueue_script( 'jquery-migrate','http://code.jquery.com/jquery-migrate-1.2.1.min.js',array( 'jquery' ),'',true );
wp_enqueue_script( 'slick-min-js','https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js',true );
wp_enqueue_style( 'slick-css','https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css' );
}
add_action( 'wp_enqueue_scripts','loadup_scripts' );
function livewellnutritionuk_action() { ?>
<script>
jQuery(document).ready(function(){
jQuery('.slider').slick({
infinite: false,speed: 100,slidesToShow: 4,slidesToScroll: 4,autoplay: true,prevArrow: '<span class="priv_arrow"><</span>',nextArrow: '<span class="priv_arrow">></span>',responsive: [
{
breakpoint: 1024,settings: {
slidesToShow: 3,slidesToScroll: 3,infinite: true,dots: true
}
},{
breakpoint: 600,settings: {
slidesToShow: 2,slidesToScroll: 2
}
},{
breakpoint: 480,settings: {
slidesToShow: 1,slidesToScroll: 1
}
}
]
});
});
</script>
<?PHP
}
add_action('wp_footer','livewellnutritionuk_action');
但是此代码中最畅销的产品需要安装猫头鹰旋转木马。
<?PHP
$args = array(
'post_type' => 'product','Meta_key' => 'total_sales','orderby' => 'Meta_value_num','posts_per_page' => 1,);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
global $product; ?>
<div>
<a href="<?PHP the_permalink(); ?>" id="id-<?PHP the_id(); ?>" title="<?PHP the_title(); ?>">
<?PHP if (has_post_thumbnail( $loop->post->ID ))
echo get_the_post_thumbnail($loop->post->ID,'shop_catalog');
else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="product placeholder Image" width="65px" height="115px" />'; ?>
<h3><?PHP the_title(); ?></h3>
</a>
</div>
<?PHP endwhile; ?>
<?PHP wp_reset_query(); ?>
解决方法
我一直在努力解决这个问题,现在我找到了解决方法。
function.php
function child_enqueue_styles() {
wp_enqueue_style( 'astra-child-theme-css',get_stylesheet_directory_uri() . '/style.css',array('astra-theme-css'),CHILD_THEME_ASTRA_CHILD_VERSION,'all' );
wp_enqueue_style('owl-carousel','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css','','all');
wp_enqueue_style('owl-carousel-2.1.6','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.css','all');
wp_enqueue_script('owl-js','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2//2.0.0-beta.2.4/owl.carousel.min.js',array('jquery'),'1.12.4',false);
}
add_action( 'wp_enqueue_scripts','child_enqueue_styles',15 );
function livewellnutritionuk_action() { ?>
<script>
jQuery(document).ready(function(){
jQuery('.slider').slick({
infinite: false,speed: 100,slidesToShow: 4,slidesToScroll: 4,autoplay: true,prevArrow: '<span class="priv_arrow"><</span>',nextArrow: '<span class="priv_arrow">></span>',responsive: [
{
breakpoint: 1024,settings: {
slidesToShow: 3,slidesToScroll: 3,infinite: true,dots: true
}
},{
breakpoint: 600,settings: {
slidesToShow: 2,slidesToScroll: 2
}
},{
breakpoint: 480,settings: {
slidesToShow: 1,slidesToScroll: 1
}
}
]
});
});
</script>
<?php
}
add_action('wp_footer','livewellnutritionuk_action');
function slider_test(){
ob_start();
get_template_part('best_product');
return ob_get_clean();
}
add_shortcode('best_seller','slider_test');
best_product.php
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<?php
$args = array(
'post_type' => 'product','meta_key' => 'total_sales','orderby' => 'meta_value_num',);
$loop = new WP_Query( $args );
echo '<div class="owl-carousel">';
while ( $loop->have_posts() ) : $loop->the_post();
global $product; ?>
<div>
<a href="<?php the_permalink(); ?>" id="id-<?php the_id(); ?>" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail( $loop->post->ID ))
echo get_the_post_thumbnail($loop->post->ID,'shop_catalog');
else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="product placeholder Image" width="65px" height="115px" />'; ?>
<h3 class="woocommerce-loop-product__title"><?php the_title();?></h3>
</a>
<h4><?php echo woocommerce_price($product->get_price());?></h4>
<div class="best_seller_button">
<a href="<?php echo home_url(); ?>?add-to-cart=<?php echo get_the_ID() ?>" class="yellow-but">Add to Basket</a>
</div>
<div class="stock_status">
<div class="status_in_stock"> <?php echo $product->get_stock_status();?></div>
<div class="star-rating"> <?php echo $product->get_average_rating();?></div>'
</div>
</div>
<?php endwhile;
echo '</div>';
?>
<?php wp_reset_query(); ?>
<style>
.owl-item > div:after {
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
}
.owl-theme .owl-controls .owl-nav [class*='owl-']{
background: #8bc34a;
padding: 0px 8px;
}
</style>
<script>
jQuery(document).ready(function () {
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
loop:true,nav:true,arrows: true,margin:10,navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],responsive:{
0:{
items:1
},600:{
items:3
},960:{
items:4
},1200:{
items:4
}
}
});
owl.on('mousewheel','.owl-stage',function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
});
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。