Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車

梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車
  先前已分享過Woocommerce的架設與金流的串接,與佈景主題的修改套件,透過該外掛就可清楚知道每個頁面是由那些php所組合而成的,再加上Woocommerce是架構在WordPress下,因此Woocommerce的購物畫面,也會使用到WordPress的佈景主題,因此當不用Woocommerce所提供的佈景主題,而是用自己所設計的佈景主題時,則會發現啟用的佈景主題上方會出現一段警告訊息,因此這時只需手動將Woocommerce的購物畫面,加到自己所設計的佈景主題中後,立即就可讓佈景主題支援Woocommerce了。

Step1
當佈景主題不支援時,進到Woocommerce的購物畫面版型就會大跑版。
梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車
Step2
首先,將原來佈景中的page.php複製一份,並重新命名為woocommerce.php
梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車
Step3
接著再複製wp-content/plugins/woocommerce/templages目錄到佈景主題中。
梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車
Step4
再重新命名為woocommerce。
梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車
Step5
都將檔案複製完畢後,開啟woocommerce.php,將原來迴圈的地方,改為以下的語法。
<?php if (have_posts()):?>
  <?php woocommerce_content(); ?>
<?php endif;?>
梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車
Step6
接著再開啟functions.php,加入以下的語法。

<?php /* woocommerce */
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
echo '<section id="main">';
}

function my_theme_wrapper_end() {
echo '</section>';
}
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}
?>

梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車
Step7
都完成後,再重新整理後台的佈景主題,這時原先的警告訊息已消失了。
梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車
Step8
接著再回到前台看一下,哈~畫面終於正常啦!
梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車
Step9
就連結帳畫面也ok了,因此有在用woocommerce的朋友,也可將現有的佈景主題,支援woocommerce。
梅問題-WordPress教學-Woocommerce佈景教學-如何讓佈景主題支援Woocommerce購物車

相關文章

WordPress外掛-「Admin Menu Editor」自訂WP後台選單的項目與名稱

WordPress外掛-「Admin Menu Editor」自訂WP後台選單的項目與名稱

Woocommerce與Every8d大整合,當有新訂單立即傳送簡訊通知

Woocommerce與Every8d大整合,當有新訂單立即傳送簡訊通知

「Open Live Writer」微軟專為部落格而生!離線編輯器(支援WordPress、Blogger、痞客邦)

「Open Live Writer」微軟專為部落格而生!離線編輯器(支援WordPress、Blogger、痞客邦)

WordPress外掛-「WP Editor」強化後台編輯器,讓原始碼支援HighLight的高光效果

WordPress外掛-「WP Editor」強化後台編輯器,讓原始碼支援HighLight的高光效果

Woocommerce修正中文化不完全與字詞修改 (附完整繁中包)

Woocommerce修正中文化不完全與字詞修改 (附完整繁中包)





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    請問 說道:

    請問梅大
    現役(21060727)的敗家梅購物王 是用什麼系統做的呢? Opencart還是woocommerence

    回應:
    目前是使用wordpress加第三方金流
  • 第1梅
    猴嗯架按呢 說道:

    這一招真的是太棒了