侧边栏添加WooCommerce相关产品轮播显示异常求解决方案

• 修正短代码参数格式
  你当前短代码中的"是HTML转义字符，需替换为普通双引号，正确短代码为：
  [related_products per_page="3" columns="1"]
  注意在文本编辑器中直接输入双引号，避免编辑器自动转义。

• 确保移除动作执行时机正确
  把移除默认相关产品的代码挂到init钩子上，保证在合适时机执行：

  add_action( 'init', 'remove_default_related_products' );
  function remove_default_related_products() {
      remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
  }
  

• 修复主题样式冲突
  显示异常多由主题CSS布局不兼容导致，添加以下自定义CSS调整单列布局：

  .related.products ul.products {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }
  .related.products ul.products li.product {
      width: 100% !important;
      margin: 0 !important;
  }
  

  将上述代码添加到「外观→自定义→额外CSS」中。

• 排查插件冲突
  暂时禁用所有非WooCommerce插件，验证是否恢复正常。若恢复，逐个启用插件定位冲突源。

内容的提问来源于stack exchange，提问作者Miya