WooCommerce 购物车和结帐布局问题答案

【问题标题】：Issue with WooCommerce Cart & Checkout LayoutWooCommerce 购物车和结帐布局问题
【发布时间】：2018-12-17 08:35:41
【问题描述】：

Wordpress 版本：4.9.7

WooCommerce 版本：3.4.3

WooCommerce 导致购物车和结帐页面出现布局问题。这是任何带有表格的 WooCommerce 页面。

具有以下类别的表格：

shop_table shop_table_responsive cart woocommerce-cart-form__contents

导致问题。表格的 WooCommerce CSS 将宽度设置为 100%，但实际宽度显示为 4870 像素。主题的父元素宽度设置为1100px。

为什么表格的宽度比主题设置的大很多？

覆盖后没有 CSS 声明。

产品页面或产品页面没有问题。

【问题讨论】：

【解决方案1】：

您始终可以删除默认的 WooCommerce 样式，风险是您可能会使用一些。无论如何，值得一试：

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

如果这没有帮助，也许可以发布一个指向页面的链接，以便我们检查布局和 CSS？

【讨论】：

【解决方案2】：

你可能有不必要的 pre 标记作为包装器，导致表格拉伸：

<pre>[woocommerce_cart]</pre>

要删除它，您可以安装“禁用 Gutenberg”插件，然后在文本选项卡中编辑购物车页面，只留下：

[woocommerce_cart]

【讨论】：

【解决方案3】：

我遇到了同样的问题。我发现的根本原因是将 woocomerce 网站上的短代码直接复制/粘贴到可视化编辑器（在我的情况下为 WPBakery Page Builder）。

副本从source 中提取<pre> 标签并在粘贴时应用它，从而在我没有注意到的情况下触发样式更改为preformatted。

两种解决方案可修复 - 取决于您的可视化编辑器和偏好。

抱歉，还不能嵌入图片...

图片显示问题：

显示手动解决方案的图片：

这也适用于粘贴的任何其他短代码，包括 OP 中提到的 [woocomerce_checkout]。

【讨论】：