如何设定 WooCommerce 县市 / 乡镇市的下拉菜单？

在现在几乎无电不商的趋势下，电商网站建置 是许多想经营网络商店的人，开始网上生意的第一步。 搭配强大的 WooCommerce 开店插件，简单设定一下很快就能建置成功。

在电商的结账页面，很常看到地址下拉菜单，也就是选择县市后，系统会自动带入下面的乡镇市给顾客选择，并且最后带入邮递区号。

这是满贴心的设计，一来可以防止顾客打字打错，二来可简化购买流程，对顾客体验有很好的提升。

这篇文章，我会用简单的流程带大家实现WooCommerce县市栏下拉菜单功能，如下。

• 1. RY WC City Select 是什么？
• 2. 插件使用教程
• 3. 定制化结账窗体+样式调整
• 常见问题
• WordPress 学习资源

---

1. RY WC City Select 是什么？

RY WC City Select 这款插件，只要安装后在「 结帐页面的账单&运送地址 」、「 会员中心的地址维护页面 」，就会自动套上县市、乡镇市的下拉菜单。 更多 RY WC City Select 完整教程。

动作流程：在选择县市后，就会自动带入以下的乡镇市，在选择乡镇市之后的邮递区号也会自动带入号码，是不是非常方便！

---

2. 插件使用教程

前往 WordPress 插件 > 安装插件，搜索 RY WC City Select 插件，然后安装+启用它即可。

前往结账页面，观看成果

接着，前往 WordPress 前台，随意选购一个商品并进入结帐页面。

就会发现结账表单，多出了地址的下拉菜单，是不是很简单快速。

前往我的账户，观看成果

前往 WooCommerce 默认的「我的帐户」页面，也称为顾客的会员专区。

点击地址选项，并编辑任一个地址。

同样会看到地址下拉菜单（县市 / 乡镇市 / 邮递区号），已经顺利出现啦。 这样顾客就能简单改地址啰。

---

3. 定制化结账窗体+样式调整

WooCommerce 结帐表单默认值不太符合亚洲的输入习惯，所以有些字段可能是多余的，或是有些站长也可能想调整表格排序。

在简单调整字段&顺序之后，接着可以来处理 RY WC City Select 的下拉菜单默认是全宽的展示，我们可把它改为各一半显示，会变的比较直觉&美观。

因为这涉及到 CSS 程序码的简单调整，但由于大家使用的主题、插件都不太一样，所以比较无法统一教程。

但你可以前往 WordPress 自定义 > 附加的 CSS，并输入下面的 CSS 程序码，储存后再前往前台刷新结账表单页面，看是否能生效。

/** 账单资讯（地址下拉选）**/
#billing_city_field, #billing_state_field {
  display: inline-block;
  width: 50%;
}

/** 运送到不同地址（地址下拉选）**/
#shipping_city_field, #shipping_state_field {
  display: inline-block;
  width: 50%;
}

小提醒：

1. 有时候没生效可能是读到旧缓存问题，可在浏览器内把旧缓存删除，或是如果你有用 WordPress 缓取插件，有些有内置缓存删除按钮，也可用它来删除。

2. 如果有使用 WordPress 结账窗单设计的插件，像是 Checkout Field Editor 之类的，有些插件套用后会把地址字段的 ID 或是 Classname 更改，会导致上面的程序码失效。

需确保地址字段跟上面程序码的 ID 或是 Classname 名称相同（举例：#billing_city_field / #billing_state_field / #shipping_city_field / #shipping_state_field），程序码才能正常运作唷。

最后看一下显示的成果

---

常见问题

原文链接：https://www.itaoda.cn/blog/11443.html，转载请注明出处。