如何更改 Woocommerce 商店页面上的“星级评论”位置答案

【问题标题】：How to change "star review" position on Woocommerce store Page如何更改 Woocommerce 商店页面上的“星级评论”位置
【发布时间】：2021-07-07 10:43:23
【问题描述】：

我想更改店铺页面上“星评”的位置

以前的

我添加了 CSS 代码

.star rating {
      float: right !important;
      margin-top: -18px !important;
}

这样，我喜欢

所以，问题出在单品页面

在我添加 CSS 代码之前这样的

在我添加 CSS 代码后，位置发生了变化像这样

如何在屏幕截图2中显示“星评”而不破坏“星评”在单个产品页面上的位置

对不起，我的问题可能你很难理解，谢谢

附加

以前我默认使用的主题在商店页面上没有“星级评论”，只有在单个产品页面上。

所以我在functions.php中添加了这段代码

add_action('woocommerce_after_shop_loop_item', 'add_star_rating' );
function add_star_rating()
{
global $woocommerce, $product;
$average = $product->get_average_rating();

echo '<div class="star-rating"><span style="width:'.( ( $average / 5 ) * 100 ) . '%"><strong itemprop="ratingValue" class="rating">'.$average.'</strong> '.__( 'out of 5', 'woocommerce' ).'</span></div>';
}

如截图 1 所示的星级评价

【问题讨论】：

您当前使用的 CSS 似乎无效。正确的 CSS 语法 float: none|left|right|initial|inherit;。要回答您的问题，您的选择器过于具体，因此您需要使用可以在商店页面上找到的选择器来扩展您的选择器，而不是在单个产品页面上。例如.post-type-archive .star
我已经编辑了问题中的 CSS
我用这个 CSS 测试过，效果很好.woocommerce ul.products li.product .star-rating { float: right !important; margin-top: -18px !important; }谢谢你的回答
从我在functions.php中添加的代码中是否有可能在“星级评论”之后有许多评论，例如像这样（2）如果没有评论，然后像以前一样保持显示
如果您有新问题，请点击按钮提问。如果有助于提供上下文，请包含指向此问题的链接。

标签： php woocommerce hook-woocommerce

【解决方案1】：

您需要在该特定页面上定位星形 div。您的目标是星级评论 div，因此它会在所有页面上更改。尝试在选择器之前添加类似 .archive 的内容，例如：.archive .star-rating {}

如果您在body类中检查要更改的页面，则可以找到页面选择器。

【讨论】：

我只是把问题中的问题细节改了，也许你能帮忙
我用这个 CSS 测试过，效果很好.woocommerce ul.products li.product .star-rating { float: right !important; margin-top: -18px !important; }谢谢你的回答