CSS風格Woocommerce單產品頁面

我正在使用Woocommerce插件進行網上商店。CSS風格Woocommerce單產品頁面

我現在正在做的是爲我的網站設計單一產品頁面。我已經改變了鉤子的順序。因此，「相關產品」現在位於標籤屏幕上方。但它太高了。我試圖用一個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; 
    }

所有這一切都不起作用。任何人都知道如何降低相關產品？

來源

2016-04-25 TLR

PHP在這裏使用很少。輸出HTML是必需的 –

這就是我所得到的，你需要更多的東西？ – TLR

我想我很清楚。尋求代碼幫助的問題必須包含在問題本身中重現**所需的最短代碼**最好在[** Stack Snippet **]中（https://blog.stackoverflow.com/2014/09/introducing-runnable） -javascript-CSS-和HTML的代碼段/）。請參閱[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

你並不需要在內容單product.php模板添加<div class="related">。請像以前一樣刪除它。
爲什麼？因爲類related已用於單產品> related.php模板：
<div class="related products"> html標籤在其中。

你可以做什麼是標籤後添加一些空間withs這個CSS規則：

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

當你要重複上wooCommerce頁面現有定義的CSS規則，有時你需要在末尾添加CSS值屬性!important。最好的辦法是測試一個CSS規則，沒有第一，如果需要，它是這樣的：

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

----（編輯）----

這裏是你問的CSS規則最後（也儘量不!important在前）：

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

你可以嘗試過：

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

來源

2016-04-26 06:38:25 LoicTheAztec

好的，這個工程。但我需要更改相關產品的填充頂部，而不是標籤包裝。 – TLR

我會這麼做的。但我展示了這張照片的問題。 ;-) – TLR

但你需要什麼HTML輸出？ – TLR

你需要點「。」運算符爲id選擇器指定CSS類選擇器&散列「＃」，請嘗試此代碼。

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

乾杯

來源

2016-04-25 14:49:49

哦，對不起，當把代碼複製到這個問題時，這個點就消失了。 – TLR

但這不起作用。 – TLR

你試過給！！重要的標籤嗎？並刪除頂級屬性，你不需要那個。 –

CSS風格Woocommerce單產品頁面

回答

相關問題