WooCommerceのチェックアウトページを変更してください

Question

私はWordPressとWooCommerceプラグインを備えた電子商取引Webサイトを開発しました。すべてが完了しましたが、私はチェックアウトページの完全なレイアウトを変更したいと思います。私はそれを行うにはプラグインを見つけようとしましたが失敗しました。

チェックアウトページのレイアウトやデザインを変更する方法はありますか？

Answer 1

EDITED：

WOOCOMMERCEテンプレート：

あなたはあなたのテーマ（または子テーマ）フォルダに（woocoommerceプラグインフォルダ内にある） " テンプレート" フォルダをコピーして名前を変更することができます

」 woocommerce "。
次に、必要なフィートに編集するファイルを選択することができます。

あなたの場合、「チェックアウト」という名前のフォルダ内にあります。この「チェックアウト」フォルダ内のすべてのファイルは、チェックアウトページレイアウトのさまざまなコンポーネントです。チェックアウトページ/フォーム上のコンポーネントの責任

異なるファイル

form-checkout.phpチェックアウトページを呼びかけプライマリファイルです。
form-login.phpはログインフォームをレンダリングします。
form-coupon.phpは、クーポンフォームをレンダリングします。
form-billing.phpは請求書をレンダリングします。
form-shipping.phpは出荷フォームをレンダリングします。
review-order.php順レビューブロックをレンダリングします。
payment.php（異なるアドレスチェックボックスがチェックされていると、」船が時にこれが表示されている）は支払いオプションをブロックするレンダリング。
payment.php各有効支払方法のために別のファイル>payment-method.phpが呼び出されるループを持っています。
cart-errors.php表示カート誤差。
thankyou.phpを順番を表示するため呼び出され、確認を受けた。（ "受注" エンドポイント）

簡単なテーマ変更のために子供向けのスタイルシートを追加
いくつかの特定のWooCommerceスタイルをオーバーライドすることは非常に困難です。

ステップ1 - 一般的なwoocommerce.cssファイルを無効にします。

あなたのアクティブなテーマの機能ファイル（functions.php）に、このPHPのコードを追加します。STEP.2

add_filter('woocommerce_enqueue_styles', 'wooc_dequeue_styles'); 

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

- 「woocommerce」（それならばという名前のアクティブなテーマのフォルダ内に新しいフォルダを作成します。まだ存在しません）。

STEP.3 - あなたのアクティブなテーマのフォルダにこの新しく作成したフォルダwoocommerceにwoocommerce.cssファイルをコピーします。
woocommerce.cssファイルは、plugins/woocommerce/assets/css/woocommerce.cssにあります。

STEP.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'); 
} 

オプション：

- あなたはまた、cssファイルwoocommerce他人を有効/無効にすることができます。see this snippet at woo themes

- 一度にすべてのWoocommerceスタイルシートを無効にすることができます：

add_filter('woocommerce_enqueue_styles', '__return_false');