WooCommerce购物车和结帐布局问题

Question

Wordpress版本：4.9.7

WooCommerce版本：3.4.3

WooCommerce在购物车和结帐页面上导致布局问题。它是任何带有表的WooCommerce页面。

具有以下类别的表：

shop_table shop_table_responsive cart woocommerce-cart-form__contents

正在引起问题。表格的WooCommerce CSS将宽度设置为100％，但是实际宽度显示为4870px。主题的父元素宽度设置为1100px。

为什么桌子的宽度比主题设置的宽度大？

在覆盖之后没有CSS声明。

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

Answer 1

您始终可以删除默认的WooCommerce样式，否则可能会使用某些样式。无论如何都值得检查：

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

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

Answer 2

我有同样的问题。我发现的根本原因是由于将简短代码从woocomerce网站直接复制/粘贴到可视编辑器（本例中为WPBakery Page Builder）引起的。

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

要解决的两种解决方案-取决于您的Visual Editor和首选项。

1. 只需更改回默认的Paragraph设置

   • 突出显示[woocomerce_cart]
   • 从下拉样式列表中选择Paragraph
   • 更新/发布！

2. 或者，手动删除<pre>标签

   • 更改为页面代码的“纯文本”视图
   • 删除周围的<pre>标签，留下[woocomerce_cart]
   • 更新/发布！

对不起，还不能嵌入图片...

Image showing issue

Image showing manual solution

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

Answer 3

您可能有不必要的pre标签作为包装器，从而导致表格拉伸：

<pre>[woocommerce_cart]</pre>

要删除它，您可以安装“禁用Gutenberg”插件，然后在“文本”标签中编辑购物车页面，仅保留：

[woocommerce_cart]