在商店页面上安排产品详细信息

时间:2015-06-06 作者:chuckn246

我正在尝试编辑我的Woocommerce网站(本地)并水平旋转产品卡。有关我正在尝试做的事情的示例,请查看B&;H照片的布局。我将基础框架与JointsWP初学者主题结合使用。

我安装了WooCommerce Compare Products PRO和WooCommerce Wishlist插件。

我制作了一个示例产品来说明我的问题所在(忘记添加评级,但它显示在价格下):

example Woocommerce product card

<小时>What I\'ve tried so far

我试过使用原始内容产品中的挂钩:

执行操作(“woocommerce\\u before\\u shop\\u loop\\u item\\u title”)

  • 执行操作(“woocommerce\\u after\\u shop\\u loop\\u item\\u title”)
  • do\\u操作(“woocommerce\\u after\\u shop\\u loop\\u item”)

    remove_action( \'woocommerce_after_shop_loop_item\', \'woocommerce_template_loop_add_to_cart\', 10 );
    remove_action( \'woocommerce_before_shop_loop_item_title\', \'woocommerce_template_loop_product_thumbnail\', 10 );
    remove_action( \'woocommerce_after_shop_loop_item_title\', \'woocommerce_template_loop_price\', 10 );
    remove_action( \'woocommerce_after_shop_loop_item_title\', \'woocommerce_template_loop_rating\', 5 );
    
    我添加了具有不同优先级的操作。

    我尝试在content product中移动每个项目的div列。php相互上下。

    我尝试从每个模板(add-to-cart.php、rating.php、price.php)复制/粘贴代码,而不是引用函数。

    如果我删除愿望列表、比较和购物车按钮代码,它就会起作用

    以下是内容产品的代码。php:

    <li <?php post_class( $classes ); ?>>
    
    <?php do_action( \'woocommerce_before_shop_loop_item\' ); ?>
    
    <div class="row">
    
        <a href="<?php the_permalink(); ?>">
    
            <div class="small-12 columns panel">
    
                <div class="small-3 columns">
    
                    <?php if ( function_exists(\'woocommerce_template_loop_product_thumbnail\' ) ) echo woocommerce_template_loop_product_thumbnail(); ?>
    
                </div>
    
                <div class="small-6 columns">
    
                    <h3><small><?php the_title(); ?></small></h3>
    
                    <?php echo apply_filters( \'woocommerce_short_description\', $post->post_excerpt ) ?>
    
                </div>
    
                <div class="small-3 columns panel end">
    
                    <?php if ( function_exists(\'woocommerce_template_loop_price\' ) ) echo woocommerce_template_loop_price(); ?>
    
                    <?php if ( function_exists(\'woocommerce_template_loop_rating\' ) ) echo woocommerce_template_loop_rating(); ?>
    
                    <form class="cart" method="post" enctype=\'multipart/form-data\' action="<?php echo add_query_arg( array(\'add-to-wishlist-itemid\' => $product->id), $product->add_to_cart_url() ); ?>">
                        <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
                        <?php $wishlists->add_to_wishlist_button(); ?>
                    </form>
    
                    <?php if ( function_exists(\'woo_add_compare_button\' ) ) echo woo_add_compare_button(); ?>
    
                    <?php if ( function_exists(\'woocommerce_template_loop_add_to_cart\' ) ) echo woocommerce_template_loop_add_to_cart(); ?>
    
                </div>
            </div>
        </a>
    
    </div>
    
  • 我忘了提到我还用以下代码删除了Woocommerce样式:

    add_filter( \'woocommerce_enqueue_styles\', \'wc_dequeue_styles\' );
    function wc_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles[\'woocommerce-general\'] );        // Remove the gloss
    unset( $enqueue_styles[\'woocommerce-layout\'] );         // Remove the layout
    unset( $enqueue_styles[\'woocommerce-smallscreen\'] );    // Remove the smallscreen optimisation
    return $enqueue_styles;
    }
    

    1 个回复
    最合适的回答,由SO网友:chuckn246 整理而成

    所以我在网站的另一个部分工作,正在浏览Foundation文档。

    我看到了推拉立柱的能力,决定试试。它成功了。

    以下是我使用的代码:

    <li <?php post_class( $classes ); ?>>
    
    <?php do_action( \'woocommerce_before_shop_loop_item\' ); ?>
    
    <div class="row">
    
        <a href="<?php the_permalink(); ?>">
    
            <div class="small-12 columns panel">
    
                <div class="small-3 columns">
    
                    <?php if ( function_exists(\'woocommerce_template_loop_product_thumbnail\' ) ) echo woocommerce_template_loop_product_thumbnail(); ?>
    
                </div>
    
                <div class="small-6 small-pull-3 columns">
    
                    <h3><small><?php the_title(); ?></small></h3>
    
                    <?php echo apply_filters( \'woocommerce_short_description\', $post->post_excerpt ) ?>
    
                </div>
    
                <div class="small-3 small-push-6 columns panel end">
    
                    <?php if ( function_exists(\'woocommerce_template_loop_price\' ) ) echo woocommerce_template_loop_price(); ?>
    
                    <?php if ( function_exists(\'woocommerce_template_loop_rating\' ) ) echo woocommerce_template_loop_rating(); ?>
    
                    <form class="cart" method="post" enctype=\'multipart/form-data\' action="<?php echo add_query_arg( array(\'add-to-wishlist-itemid\' => $product->id), $product->add_to_cart_url() ); ?>">
                        <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
                        <?php $wishlists->add_to_wishlist_button(); ?>
                    </form>
    
                    <?php if ( function_exists(\'woo_add_compare_button\' ) ) echo woo_add_compare_button(); ?>
    
                    <?php if ( function_exists(\'woocommerce_template_loop_add_to_cart\' ) ) echo woocommerce_template_loop_add_to_cart(); ?>
    
                </div>
            </div>
        </a>
    
    </div>
    

    结束

    相关推荐