wordpress建站教程：給woocommerce產品頁面添加詢盤彈窗

繼續分享wordpress建站教程。同樣本文分享的教程還是悅然建站在實際wordpress建站項目中用到的，這里分享給大家，同樣我自己也做個記錄，以免后面忘記了。

先來看看效果，如上圖所示，這個woocommerce插件的產品頁只有一個Inquiry詢盤按扭。

點擊這個按扭之后它會彈出一個產品詢盤的窗口。這是怎么實現的呢？

這需要用到兩個插件，一個是【Contact Form 7】表單插件，一個是【WooCommerce Quote or Enquiry Contact Form 7】購物按扭替換插件，這兩個插件相互配合可以實現上圖中的效果。

操作步驟如下：

1.安裝Contact Form 7插件。

下載地址

https://downloads.wordpress.org/plugin/contact-form-7.5.5.6.zip

啟用插件后添加一個詢盤表單，可以參考我下面的設置：

<p class="cols col-wide">[text* your-name-company placeholder="Your Name Or Company"]</p>
<p class="cols col-1">[email* your-email placeholder="Your Email"]</p>
<p class="cols col-2">[tel* your-phone placeholder="Your Phone"]</p>
<p class="cols col-wide">[textarea your-message placeholder="Message"]</p>
<p>[submit "SUBMIT"]</p>

2.接下來安裝WooCommerce Quote or Enquiry Contact Form 7插件。

WooCommerce Quote or Enquiry Contact Form 7

https://downloads.wordpress.org/plugin/woo-quote-or-enquiry-contact-form-7.2.2.zip

安裝并啟用插件后，進入插件設置，如上圖所示，這個插件可以自動識別Contact Form 7插件中創建的表單，選中表單，然后設置詢盤按鈕的顏色和文字，最后保存即可生效。