＊woocommerceの商品ページ追加情報枠非表示化について

現在Business Centerというワードプレスのテーマとwoocommerceプラグインを使ってECサイトを製作中です。

以前「woocommerceの商品ページエラーについて」という質問をteratailでさせて頂き
「追加情報」を入れる事で解決したのですが

元々ビジュアル的に追加情報枠（この場合woocommerce-tabs wc-tabs-wrapper）を非表示化したいと思っており（色等の指定を入れた際に入ってしまうため）、この非表示化の方法を探しておりました。
（＊機能としてあるが、ビジュアルとして非表示にしたいと思っております。）

なのですが、私のサーチ能力と、背景知識がたらず、display: none;を使っても消えない状況でございます。（おそらく書き方が悪いと思うのですが、）

もし対応策がわかる方がいらっしゃれば、何卒
お力をいただければ幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

タブで表示される部分には、
簡単な説明、追加情報、レビューが表示されるようです。
その部分を表示させないようにするには、以下のコードをCSSに追加することでできるはずなのですが、

css
1.woocommerce-tabs {
2	display: none;
3}
4

しかし、この部分を消しただけでは、関連商品などがあれば
woocommerceの商品ページエラーについて
の問題が残ります。
それを解決するのに、greenislandさんが回答している方法があります。
あるいは、以下のコードをCSSに追加することで回避できると思います。
（ちょっと、自信なし）

css
1section.related, section.up-sells { /*関連商品などが表示される部分*/
2	clear: both;
3}
4

あと、わたしの環境では「カートに入れる」をクリックした後に出る
「○○ をカートに追加しました。」の部分のボタンも
サイトのタイトル部分の高さによっては押せなくなっているので、
以下のコードを追加した方がいいかもしれません。

css
1.woocommerce-message {
2	margin: 2em 0 2em; /*margin-topに2em追加*/
3}

全体を見ているわけではないので、対症療法的な回答になっています。

参考まで。

投稿2017/05/22 10:33

8-0_nyan5

総合スコア2354

peter-

2017/05/22 13:33

ご回答を頂き誠にありがとうございます。 ```CSS .woocommerce-tabs { display: none; } ``` こちら非表示になりました。とても助かりました！ただ非表示になっても、購入ボタンを押せないのは、解決しないのですね.... 下記、コードもありがとうございます。 ```CSS section.related, section.up-sells { /*関連商品などが表示される部分*/ clear: both; } ``` こちら記入してみたのですが、うまく作動せず... せっかく頂いたのに申し訳ないです。この質問からはずれてしまいますが、「追加情報」を非表示化した後でも購入ボタンが機能させることができる、CSSがあれば、ご教授を頂けるととてもとても助かります...