CSSスタイルWoocommerce Single Productページ

Question

私はWoocommerceというプラグインを使用してWebショップを作っています。

私が今やっていることは、自分のサイトの単一の製品ページをスタイリングすることです。私はすでにフックの順序を変えました。したがって、「関連商品」はタブ画面の上に表示されます。しかし、それはあまりにも高すぎます。私はその周りのdivでそれを変更しようとしました。しかし、それは動作しません。

私の問題の写真：

http://i.stack.imgur.com/EhVO0.jpg

コード：私はすでに試した

<div class="related"> 
<?php 
    /** 
    * woocommerce_after_single_product_summary hook. 
    * 
    * @hooked woocommerce_output_product_data_tabs - 10 
    * @hooked woocommerce_upsell_display - 15 
    * @hooked woocommerce_output_related_products - 20 
    */ 
    do_action('woocommerce_after_single_product_summary'); 
?> 
</div> 
<meta itemprop="url" content="<?php the_permalink(); ?>" /> 

CSS：

.related { 
    top: 40px; 
    margin-top: 40px; 
    padding-top: 40px; 
    } 

このすべてが動作しません。関連商品の入手方法を知っている人は誰ですか？

Answer 1

。前と同じように取り外してください。
なぜですか？クラスrelatedはすでに単一製品> related.phpテンプレートで使用されているため、
<div class="related products"> htmlタグが入っています。あなたは何ができるか

は、このCSSルールwithsタブの後にいくつかのスペースを追加することです：

div.woocommerce-tabs.wc-tabs-wrapper { 
    padding-bottom:40px; 
} 

あなたはwooCommerceページ上の既存の定義されたCSSルールをオーバーラップしたい、時にはあなたがの最後に追加する必要がありますCSS値属性!important。

div.woocommerce-tabs.wc-tabs-wrapper { 
    padding-bottom:40px !important; 
} 

（編集）----

ここでは、あなたが尋ねたCSSルールがある----：このようにして、必要に応じて最善のことはまずなくてCSSルールをテストすることで、最後の（!important最初なしもしてみてください）：

.woocommerce .products.related ul.products { 
    padding-top:40px !important; 
} 

あなたも試すことができます。

.woocommerce .products.related ul.products { 
    margin-top:40px !important; 
} 

Answer 2

ドットが必要です。 " CSSクラスセレクタ&ハッシュ "id"を指定する場合は、このコードを試してください。あなたはコンテンツ・シングルproduct.phpテンプレートで<div class="related">を追加する必要はありません

.related { 
    margin-top: 40px !important; 
    } 

乾杯