Question

我已经通过在“index.php”文件中插入以下代码创建了“最新产品”循环：

<section id="recent">
    <h1>Recently Added</h1>
    <ul class="row-fluid">
    <?php
        $args = array( 'post_type' => 'product', 'stock' => 1, 'posts_per_page' => 4, 'orderby' =>'date','order' => 'DESC' );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); global $product; 
    ?>
        <li class="span3">    
            <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" 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="Placeholder" width="65px" height="115px" />'; ?>
                <h3><?php the_title(); ?></h3>
                <span class="price">
                <?php echo $product->get_price_html(); ?>
                </span>
            </a>
                <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>

        </li>
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
    </ul>
</section>

我现在希望能够在此行的左侧和右侧应用箭头，在选择箭头时，它将滚动图像。

我知道以下代码：

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

但是，在选择其链接后，用户将被带到其专用页面，而不是能够“滚动”产品。

关于如何实现这一目标的任何建议？

Answer 1

也许您正在寻找旋转木马？有很多jQuery插件，我使用了this一个。

如果你选择这个解决方案，你应该得到脚本，把它放在你的主题中，添加它，最好是在functions.php中（更多信息here），然后添加轮播本身。

backward

但所有这些可能使用像“WooCommerce Product Slider”或类似的插件会更好。它提供了shorcode和widget实现，它应该适用于大多数主题，并且可以直接在控制面板中使用而无需编码。还有一点需要注意 - 如果您仍然喜欢使用自己的代码 - 也许最好将它放在模板文件中而不是index.php中

如何在WooCommerce平台上为我的“最新产品”添加滚动/查看更多功能？

1 个答案: