it-swarm-ja.com

ショップページへの商品詳細の配置

私は自分のWoocommerceサイトを(ローカルに)編集し、商品カードを水平に回転させようとしています。私がやろうとしていることの例については、B&H Photoのレイアウトをチェックしてください。私はJointsWPスターターテーマでFoundationフレームワークを使用しています。

WooCommerce Compare Products PROとWooCommerce WishLists Pluginsがインストールされています。

私は私の問題が何であるかを示すためにサンプル製品を作りました(評価を加えるのを忘れていましたが、それは価格の下に表示されています):

example Woocommerce product card


これまでに試したことのあるもの

  1. 私はオリジナルのcontent-productのフックを使ってみました:

    • do_action( 'woocommerce_before_shop_loop_item_title');
    • do_action( 'woocommerce_after_shop_loop_item_title');
    • do_action( 'woocommerce_after_shop_loop_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 );
  1. 私は異なる優先順位でアクションを追加しました。

  2. 私はcontent-product.phpの各項目のdiv列を上下に動かしてみました。

  3. 関数を参照するのではなく、各テンプレート(add-to-cart.php、rating.php、price.php)からコードをコピー/ペーストしてみました。

ウィッシュリストを削除し、比較してカートボタンのコードを削除すれば機能します。

これがcontent-product.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
chuckn246

だから...私はサイトの別のセクションに取り組んでいて、Foundation Docsを閲覧していました。

私は列をプッシュ/プルする機能を見て、試してみることにしました。出来た。

これが私が使ったコードです:

<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>
1
chuckn246