Hello Elementor主题下WooCommerce单品页样式定制（数量+加购按钮）求助

一、数量控件样式定制代码 #

将以下代码添加到「外观 → 自定义 → 额外CSS」中，可实现类似参考图的数量选择器样式（可根据需求调整颜色、尺寸参数）：

/* 单个产品页面数量控件布局 */
.single-product .quantity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
}

/* 加减按钮样式 */
.single-product .quantity .plus,
.single-product .quantity .minus {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  background: #f8f8f8;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.single-product .quantity .plus:hover,
.single-product .quantity .minus:hover {
  background: #e0e0e0;
  border-color: #999;
}

/* 数量输入框样式 */
.single-product .quantity input.qty {
  width: 60px;
  height: 40px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  padding: 0;
}

.single-product .quantity input.qty:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33,150,243,0.2);
}

二、Add to Cart按钮样式定制代码 #

同样添加到额外CSS中，可自定义按钮的外观：

/* 单个产品页面加购按钮基础样式 */
.single-product button.single_add_to_cart_button {
  background: #2196f3;
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

/* 按钮 hover 效果 */
.single-product button.single_add_to_cart_button:hover {
  background: #1976d2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33,150,243,0.3);
}

/* 按钮点击激活效果 */
.single-product button.single_add_to_cart_button:active {
  transform: translateY(0);
}

三、解决CSS不生效的问题 #

1. 提升选择器优先级：如果默认主题样式优先级更高，可在选择器前追加body，比如body.single-product .quantity；迫不得已时可在属性后加!important（如background: #2196f3 !important;）
2. 清除缓存：
   • 清除浏览器缓存（Ctrl+Shift+R强制刷新）
   • 进入Elementor后台「工具 → 重新生成CSS与数据」
   • 清除WordPress缓存插件（若有）的缓存
3. 检查代码语法：确保CSS没有括号未闭合、分号遗漏等语法错误
4. 确认选择器准确性：用浏览器F12开发者工具，直接定位数量控件和按钮的实际类名，替换代码中的选择器

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