如何解决购物车边框问题并优化 WooCommerce 购物车片段

在运行 WooCommerce 网站时，商家可能会遇到一些界面问题，例如购物车图标周围出现不必要的边框。与此同时，WooCommerce 购物车片段的 Ajax 请求虽然能动态更新购物车内容，但在低配的主机上可能会影响页面加载速度。本文将为你提供移除购物车边框和禁用购物车片段的详细步骤，帮助优化网站性能，提升加载速度，确保更流畅的用户体验。

移除购物车边框

Astra 提供了自定义选项，可用于调整购物车图标的样式。如果你发现购物车图标周围有边框，可以按以下步骤移除边框：

• 进入自定义设置：从 WordPress 仪表盘，进入 外观 > 自定义。
• 打开页眉构建器：在自定义面板中，点击 页眉构建器。

• 选择购物车选项：在页眉构建器中，点击 购物车 元素。

• 进入设计选项卡：在设计选项卡下，找到 边框半径 选项，将其设置为 0，或者使用滑块手动输入数值。

这样可以移除购物车图标的边框，恢复页面简洁的设计。

禁用 WooCommerce 购物车片段

WooCommerce 购物车片段是 Ajax 请求，用于动态显示购物车内容。当用户将商品添加到购物车并点击购物车图标时，页面会显示购物车中的商品。如果主机速度较慢，这些请求可能导致页面加载时间延长。

为什么禁用购物车片段？

WooCommerce 默认启用购物车片段功能，以动态更新购物车内容，但在低配主机上，使用此功能可能会增加页面加载时间。禁用此功能可以提升网站加载速度。

禁用 WooCommerce 购物车片段

按照以下步骤禁用 WooCommerce 购物车片段脚本：

• 进入 WooCommerce 设置：从 WordPress 仪表盘，进入 WooCommerce > 设置，点击 产品。
• 禁用 Ajax 添加到购物车按钮：取消勾选 启用产品归档页面的 Ajax 添加到购物车按钮。

• 启用购物车页面重定向：勾选 添加成功后跳转到购物车页面。

这可以帮助绕过已安装的缓存插件。

• 移除 JavaScript：要完全禁用购物车片段，可以将以下代码片段添加到子主题的 functions.php 文件中。

进入 外观 > 主题文件编辑器，点击子主题的 functions.php 文件，并将以下代码粘贴到文件底部：

/** 禁用 WooCommerce 的 Ajax 调用 */
function sert_dequeue_woocommerce_cart_fragments() { 
    wp_dequeue_script('wc-cart-fragments'); 
}
add_action( 'wp_enqueue_scripts', 'sert_dequeue_woocommerce_cart_fragments', PHP_INT_MAX); 
/** 禁用 WooCommerce 的 Ajax 调用 */
function sert_dequeue_woocommerce_cart_fragments() { 
    wp_dequeue_script('wc-cart-fragments'); 
}
add_action( 'wp_enqueue_scripts', 'sert_dequeue_woocommerce_cart_fragments', PHP_INT_MAX); 
/** 禁用 WooCommerce 的 Ajax 调用 */
function sert_dequeue_woocommerce_cart_fragments() { 
    wp_dequeue_script('wc-cart-fragments'); 
}
add_action( 'wp_enqueue_scripts', 'sert_dequeue_woocommerce_cart_fragments', PHP_INT_MAX); 

这段代码将取消加载 WooCommerce 购物车片段脚本，从而提升你的网站加载速度。

总结

通过调整设置，你可以轻松移除购物车图标的边框，并禁用 WooCommerce 购物车片段功能。禁用购物车片段特别适用于较慢主机的站点，帮助提升整体加载速度和性能。

相关文章