ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマEGO.:ECサイト機能を非表示にする方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.商品詳細ページの金額部分やカート・会員機能部分を非表示にしたいのですが、可能でしょうか?

Welcart e-Commerceプラグイン・WooCommerceプラグインを導入しない場合は商品ページの作成は出来かねます。一旦、プラグインを導入いただいたうえで商品ページを作成してください。

 
▼【Welcart版】変更後の商品ページイメージ  変更前のデモサイト商品詳細ページ
変更箇所イメージ

「カートに入れる」ボタンのリンク先URLを変更したい場合は、以下の記事を参考にしてください(※WooCommerce版のみ対応)

A.下記の方法でご対応ください。

・商品ページのカート部分を非表示にして本文幅を拡げる
・ヘッダーの会員登録・ログイン・カートボタン(PC・スマホ)を非表示にする
上記をカスタムCSSで見た目上実現するご案内となります。

【Welcart版】

TCDテーマ>基本設定>カスタムCSSに下記を入力してください。(特定の記事のみに反映させたい場合は、当該記事編集画面のカスタムCSSに入力してください。)

/* 商品ページ */
.p-entry-product__cart { display: none; } 
@media (min-width: 768px) {
  .p-entry-product__main.has-single-cart .p-entry-product__middle .p-entry-product__content { flex: 0 0 100%; max-width: 100%; padding-right: 0; }
}
@media (max-width: 991px) {
  .p-product-footer-bar { display: none; }
}

/* ヘッダー */
.p-header__membermenu-mypage, .p-header__membermenu-cart { display: none; }
@media (max-width: 991px) {
  .p-header__membermenu-login, .p-drawer__contents .p-drawer__membermenu li:last-child { display: none; }
  .p-drawer__membermenu02 li:last-child { display: block!important; }
  body { padding-bottom: 0!important; }
}
【WooCommerce版】

すべてのページ/一部のページ、どちらに反映させる場合もTCDテーマ>基本設定>カスタムCSSに入力してください。ただし、記述内容は異なりますので、ご注意ください。
一部の記事のみに反映させたい場合、記事IDを調べて「.postid-〇」箇所に入力してください。(例:.postid-1234)
参考:WordPressのページID、カテゴリーIDを調べる方法

/* 【すべてのページ】商品ページ */
.p-entry-product__cart { display: none; } 
@media (min-width: 768px) {
  .p-entry-product__main.has-single-cart .p-entry-product__middle .p-entry-product__content { flex: 0 0 100%; max-width: 100%; padding-right: 0; }
}
@media (max-width: 991px) {
  .p-product-footer-bar { display: none; }
}

/* 【一部のページ】商品ページ */
.postid-〇 .p-entry-product__cart { display: none; } 
@media (min-width: 768px) {
  .postid-〇 .p-entry-product__main.has-single-cart .p-entry-product__middle .p-entry-product__content { flex: 0 0 100%; max-width: 100%; padding-right: 0; }
}
@media (max-width: 991px) {
  .postid-〇 .p-product-footer-bar { display: none; }
}

/* 【すべてのページ】ヘッダー */
.p-header__membermenu-mypage, .p-header__membermenu-cart { display: none; }
@media (max-width: 991px) {
  .p-header__membermenu-login, .p-drawer__contents .p-drawer__membermenu li:last-child { display: none; }
  .p-drawer__membermenu02 li:last-child { display: block!important; }
  body { padding-bottom: 0!important; }
}

/* 【一部のページ】ヘッダー */
.postid-〇 .p-header__membermenu-mypage, .postid-〇 .p-header__membermenu-cart { display: none; }
@media (max-width: 991px) {
  .postid-〇 .p-header__membermenu-login, .postid-〇 .p-drawer__contents .p-drawer__membermenu li:last-child { display: none; }
  .postid-〇 .p-drawer__membermenu02 li:last-child { display: block!important; }
  body.postid-〇 { padding-bottom: 0!important; }
}

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事