如何在 Shoptimizer 中仅禁用移动设备上的滑动购物车？

2024-04-08 10:15:23

禁用 Shoptimizer 中的滑动购物车，仅适用于移动设备

简介

作为一名电子商务店主，你希望为你的顾客提供最佳的购物体验。不过，使用 WooCommerce Shoptimizer 主题时，每当你将商品添加到购物车时，都会弹出一个滑动购物车抽屉。尽管设置中有一个选项可以禁用此功能，但它会完全禁用该功能。这可能会对你的业务产生负面影响，因为你希望保留 AJAX 添加商品的功能。本文将指导你如何仅在移动视图中禁用滑动购物车，同时保留 AJAX 添加商品功能。

问题

滑动购物车抽屉在台式机上很方便，但在移动设备上却会占用宝贵的屏幕空间，阻碍用户浏览产品和进行购买。

解决方案：自定义 CSS 代码

为了解决这个问题，你可以添加以下自定义 CSS 代码：

@media (max-width: 767px) {
  .slide-cart {
    display: none !important;
  }
}

步骤：添加 CSS 代码

登录你的 WordPress 仪表盘。
导航到“外观”>“自定义”。
在左侧面板中，单击“附加 CSS”。
将提供的 CSS 代码粘贴到文本框中。
单击“发布”按钮以保存更改。

代码解释

@media (max-width: 767px)：此媒体查询仅适用于屏幕宽度小于或等于 767 像素的设备，这通常被认为是移动设备的宽度。
.slide-cart：此选择器定位具有类“slide-cart”的元素，该元素是滑动购物车抽屉的容器。
display: none !important;：此样式将滑动购物车抽屉的显示设置为“none”，从而有效地将其隐藏。!important 声明可确保覆盖任何其他样式规则。

其他注意事项

确保你已启用 Shoptimizer 主题中的 AJAX 添加商品功能。
如果代码不起作用，请检查是否正确粘贴了代码，并且浏览器未缓存旧版本。
你可以根据需要调整媒体查询以匹配你网站上的移动设备宽度。

常见问题解答

问：此代码会影响台式机上的滑动购物车吗？
答：不，它只会在移动设备上隐藏滑动购物车。
问：如何调整移动设备上的隐藏宽度？
答：你可以根据需要更改媒体查询中的“767px”值。
问：添加此代码会影响 AJAX 添加商品功能吗？
答：不，它只会隐藏滑动购物车抽屉。
问：我如何检查媒体查询是否正在运行？
答：在 Chrome DevTools 中，导航到“媒体”选项卡以查看活动媒体查询。
问：此代码适用于其他 Shoptimizer 主题吗？
答：可能不适用于其他 Shoptimizer 主题，因为它特定于 Shoptimizer 的滑动购物车实现。