移动设备上的 Woocommerce 产品页面 - “您可能也喜欢”错误地堆叠在一列中

Posted

技术标签:

【中文标题】移动设备上的 Woocommerce 产品页面 - “您可能也喜欢”错误地堆叠在一列中【英文标题】:Woocommerce product page on mobile - "you may also like" stacking in one column wrongly 【发布时间】:2021-04-29 12:03:23 【问题描述】:

如果您在移动设备上查看我们的产品页面...

https://www.charliecustards.co.uk/product/the-charlie-montreux-brogue-chelsea-boot-in-autumn-calf-leather/

...并向下滚动到“您可能也喜欢”部分,您会看到它不在两个产品的行中,因为它应该是。它在一列中堆叠在一起,堆叠中每个项目的侧面下方都有一个很大的空白区域,显然应该放置其他产品。

当此部分在移动设备上堆叠时,它显示两个产品彼此相邻(两行)的代码是什么?天底下什么都试过了,都无法配合!

另请参阅清楚显示问题的屏幕截图。非常感谢大家!

【问题讨论】:

【参考方案1】:

你目前有这个代码:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce[class*=columns-] ul.products li.product, .woocommerce-page[class*=columns-] ul.products li.product 
    float: none!important;
    margin-left: auto;
    margin-right: auto;
    max-width: 280px;
    text-align: center;
    width: auto;

您必须将其更改为:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce[class*=columns-] ul.products li.product, .woocommerce-page[class*=columns-] ul.products li.product 
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 280px;
    text-align: center;
    width: auto;

您必须从 float 属性中删除 !important 规则。

【讨论】:

您好,感谢您的回复和帮助。我将该代码放在附加的 CSS 中,不幸的是它没有改变?还是一样。 如果您使用的是缓存插件,请清除缓存。 您好,谢谢您,我通过我们的缓存插件清除了网站缓存,但在移动设备上仍未更改?感谢您到目前为止的帮助,真的很感激。 :) 您是否检查过以下之后没有其他规则覆盖它?删除当前规则并将其添加到 css 文件的末尾。它必须工作。或者,您可以完全删除 float: none; 行。 谢谢你按你说的那样工作。我通过直接从主题编辑器中的 woocomerce css 文件中删除 !important 来使其工作,而不是尝试从自定义 css 中删除。一旦我将它直接从主题编辑器中的代码中取出,它就可以工作。谢谢你。我如何给你一个积极的评价!? :)

以上是关于移动设备上的 Woocommerce 产品页面 - “您可能也喜欢”错误地堆叠在一列中的主要内容,如果未能解决你的问题,请参考以下文章

WooCommerce中的产品归档描述,带有更多标记

在 Woocommerce 存档页面上的产品价格后添加图标

Woocommerce 产品页面上的 PHP 代码显示不正确的百分比

Woocommerce 可变产品页面上的定位循环输出

使用 WooCommerce 选择变体时更新产品页面上的价格

在菜单和Woocommerce产品页面上的内容之间添加空格?