TCDテーマBASARA：商品ページのレビュー一覧にアカウント画像を表示する方法

Q.BASARAの商品ページのレビュー一覧にアカウント画像を表示させることはできますか？

▼該当箇所イメージ

A.テーマファイルのカスタマイズとCSSの追加で対応できます。

BASARAのテーマ仕様として、商品ページのレビュー一覧にアカウント画像が表示されていませんこちらの仕様を変更してテーマEGO.のようにアカウント画像を表示させるカスタマイズ方法を紹介します。

テーマファイルのカスタマイズ

該当テーマファイル：functions/woocommerce.php
該当箇所：173行目下

▼修正前

remove_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );
remove_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );
add_action( 'woocommerce_review_before_comment_text', 'woocommerce_review_display_rating', 10 );

↓
▼修正後

remove_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );
remove_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );
add_action( 'woocommerce_review_before', 'tcd_woocommerce_review_display_gravatar', 10 );
add_action( 'woocommerce_review_before_comment_text', 'woocommerce_review_display_rating', 10 );

カスタムCSSの追加

上記対応と併せて、以下の参考CSSをカスタムCSSエリアに記載してください。

▼参考CSS

/*コメントテキストの位置調整*/
.woocommerce #reviews #comments ol.commentlist li .comment-text {
    margin: 0 0 0 96px;
}

/*アカウント画像のCSS*/
.woocommerce #reviews #comments ol.commentlist li .avatar {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    float: left;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 0;
    left: 0;
}

▼修正後イメージ

関連記事

2024.07.23

TCDテーマcommon：商品ページのレビュー一覧にアカウント画像を表示する方法

Q.commonの商品ページのレビュー一覧にアカウント画像を表示させることはできますか？ ▼該当箇所イメージ A.テーマファイルのカスタマイズとCSSの追加で対応できます。 commonのテーマ仕様として、商品ページのレビュー一覧にアカウント画像が表示されていませんこちらの仕様を変...

2024.07.23

TCDテーマRIKYU：商品ページのレビュー一覧にアカウント画像を表示する方法

Q.RIKYUの商品ページのレビュー一覧にアカウント画像を表示させることはできますか？ ▼該当箇所イメージ A.テーマファイルのカスタマイズとCSSの追加で対応できます。 RIKYUのテーマ仕様として、商品ページのレビュー一覧にアカウント画像が表示されていませんこちらの仕様を変更し...

2024.07.23

TCDテーマAnkle：商品ページのレビュー一覧にアカウント画像を表示する方法

Q.Ankleの商品ページのレビュー一覧にアカウント画像を表示させることはできますか？ ▼該当箇所イメージ A.テーマファイルのカスタマイズとCSSの追加で対応できます。 Ankleのテーマ仕様として、商品ページのレビュー一覧にアカウント画像が表示されていませんこちらの仕様を変更し...