怎样修改网站内容(Wordpress 建站教程：修改 Woocommerce 结账页面表单 )

　　怎样修改网站内容(Wordpress 建站教程：修改 Woocommerce 结账页面表单

)

　　（此处已添加小程序，请到今日头条客户端查看）

　　继续与大家分享WordPress建站教程。关于WordPress商城网站的搭建，在之前的项目中也遇到过，觉得很有用，所以分享给大家，也留个记录。

　　​我在使用wordpress+woocommerce创建商城网站时，发现商品的结账页面不符合国内用户的浏览习惯。例如，在国外，名在前，姓在后，而在中国则相反。如上图所示，不仅是姓名，其他地址的填写顺序也与国内用户的习惯有很大不同。

　　接下来悦然网络工作室将与大家分享如何修改和简化woocommerce结账页面表单项。

　　方法一：使用代码

　　具体原理我就不说了，直接上代码吧。在当前使用的wordpress建站主题的functions.php文件中添加如下代码：

　　/**

* 调整结算默认字段

* 包括删除默认字段，修改字段，以及添加字段

*/

add_filter( 'woocommerce_default_address_fields', 'wordpresskt_mod_default_checout_fields' );

function wordpresskt_mod_default_checout_fields($fields) {

// 删除默认字段

unset(

$fields['last_name'], // 删除默认字段中的last_name成员

$fields['company'],

$fields['country'],

$fields['address_1'],

$fields['address_2'],

$fields['city'],

$fields['state'],

$fields['postcode']

);

// 修改字段

$fields['first_name'] = array(

'label' => '姓名', // 字段标记，会在字段前面展示

'required' => true,

'class' => array( 'form-row-wide' ), // 宽字段，会占满整行

'autocomplete' => 'given-name',

'autofocus' => true,

'priority' => 10,

);

// 添加字段

$fields['ad'] = array(

'label' => '地址',

'required' => true, // 一个必填字段

'class' => array( 'form-row-wide' ),

'autocomplete' => 'given-qq',

'autofocus' => true,

'priority' => 11,

);

// 添加字段

$fields['qq'] = array(

'label' => 'QQ',

'required' => true, // 一个必填字段

'class' => array( 'form-row-wide' ),

'autocomplete' => 'given-qq',

'autofocus' => true,

'priority' => 5,

);

return $fields; // 修改字段后一定要返回

}

　　​修改后的效果如上图，简单多了。

　　方法2：使用插件

　　这里为您推荐的插件是：checkout-field-editor-and-manager-for-woocommerce。插件的使用非常简单，免费版可以满足我们的要求。安装后，您可以在产品结账页面上随意拖动表单项，不需要的项可以隐藏起来。

　　下载链接

　　​使用插件修改之间的产品结账页面表单如上图所示。这里使用了woocommerce自带的表单元素。可以直接选择省份。它比直接使用代码功能更多，使用起来更方便。悦然之后根据网络工作室的实测，这个插件基本不会拖慢网站的速度，大家可以放心使用。

　　总结

　　WordPress建站和woocommerce商城插件可以创建各种类型的商城网站，也可以在原有的基础上修改定制各种页面。这是一个非常实用的商城网站建设方案，有很多外贸自建站商城都是这样制作的。

　　​​​