个性化阅读
专注于IT技术分析

在WooCommerce中更改结帐页面

我开发了一个带有WordPress和WooCommerce插件的电子商务网站。一切都已完成, 但我想更改结帐页面的完整布局。我试图找到一个插件来做到这一点, 但失败了。

有什么方法可以更改结帐页面的布局或设计?


#1


编辑:

WOOCOMMERCE模板:

你可以将”模板”文件夹(位于woocoommerce插件文件夹中)复制到主题(或子主题)文件夹, 并将其重命名为” woocommerce”。

然后, 你可以在其中选择要编辑的文件, 以适应需要。

在你的情况下, 你将在一个名为” checkout”的文件夹中找到。此” checkout”文件夹中的所有文件都是检出页面布局的不同组件。

负责结帐页面/表单form-checkout.php上的组件的不同文件是称为结帐页面的主要文件。 form-login.php呈现登录表单。 form-coupon.php呈现优惠券形式。 form-b​​illing.php呈现开票表格。 form-shipping.php呈现运输表格。 (当”运送到其他地址的复选框被选中时显示。” review-order.php呈现订单审查块。payment.php呈现付款选项块。payment.php包含一个循环, 其中对于每种启用的付款方式, 另一个文件>付款-method.php被调用。cart-errors.php显示购物车错误。thankyou.php被调用来显示订单接收确认(” order-received”端点)

在儿童主题中添加WOCOMERCE样式表, 以便轻松修改

因为有时很难覆盖某些特定的WooCommerce样式。

步骤1-禁用常规woocommerce.css文件。

将此PHP代码添加到活动主题的功能文件(functions.php)中:

add_filter( 'woocommerce_enqueue_styles', 'wooc_dequeue_styles' );

function wooc_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );
    return $enqueue_styles;
}

步骤2-在活动主题的文件夹” woocommerce”中创建一个新文件夹(如果尚不存在)。

步骤3-将woocommerce.css文件复制到活动主题文件夹中的这个新创建的文件夹woocommerce中。

woocommerce.css文件位于:plugins / woocommerce / assets / css / woocommerce.css。

步骤4-在活动主题中启用(入队)常规woocommerce.css文件。

将此PHP代码添加到活动主题的功能文件中:

add_action('wp_enqueue_scripts', 'woocommerce_style_sheet');

function woocommerce_style_sheet() {
    wp_enqueue_style( 'woocommerce', get_stylesheet_directory_uri() . '/woocommerce/woocommerce.css' );
}

选项:

—你还可以启用/禁用其他woocommerce CSS文件:请参见woo主题中的此片段

—你可以一次禁用所有Woocommerce样式表:

add_filter( 'woocommerce_enqueue_styles', '__return_false' );
赞(0) 打赏
未经允许不得转载:srcmini » 在WooCommerce中更改结帐页面
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏