👋🏼Welcome to my WP-Host blog where I am excited to share my knowledge and expertise on WordPress hosting and website construction tutorials with you. Let’s connect and learn from each other! You can reach me at info@yrshare.com.
(如果你会中文，可以点击微信图标与我联系。)
注：因个人英文水平有限，所以暂时只能为懂中文的朋友提供wordpress建站服务
微信：18200592859 或 yrwordpress
Add an inquiry popup to the Woocommerce product page (using the plugin): The previous wordpress tutorial shared with you how to add an inquiry button to woocommerce, but the style is relatively simple. So today I will share with you another method, using a plug-in to add an inquiry pop-up effect to woocommerce.
【WP-Host/悦然wordpress建站】Add an inquiry button to the Woocommerce product page
https://yrshare.com/add-an-inquiry-button-to-the-woocommerce-product-page/
Continue to share the wordpress website building tutorial.
Similarly, the wordpress tutorial shared in this article is also used in the actual wordpress website building project of 【WP-Host/悦然wordpress建站】.
Let’s take a look at the effect first. As shown in the picture above, the product page of this woocommerce plugin has only one [Inquiry] button.
After clicking this button, it will pop up a product inquiry window.
This requires two plug-ins, one is [Contact Form 7] form plug-in (wpforms is also available), and the other is [WooCommerce Quote or Inquiry Contact Form 7] shopping button replacement plug-in, these two plug-ins can cooperate with each other to achieve the above picture in the effect.
Contact Form 7
https://wordpress.org/plugins/contact-form-7/
Add an inquiry form after enabling the plugin, you can refer to my settings below:
<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>WooCommerce Quote or Enquiry Contact Form 7
https://wordpress.org/plugins/woo-quote-or-enquiry-contact-form-7/
After installing and enabling the plug-in, enter the plug-in settings, as shown in the figure above, this plug-in can automatically identify the form created in the Contact Form 7 plug-in, select the form, then set the color and text of the inquiry button, and finally save it to take effect.
继续分享wordpress建站教程。同样本文分享的wordpress教程还是【WP-Host/悦然wordpraess建站】在实际wordpress建站项目中用到的。
先来看看效果，如上图所示，这个woocommerce插件的产品页只有一个Inquiry询盘按扭。
点击这个按扭之后它会弹出一个产品询盘的窗口。这是怎么实现的呢？
这需要用到两个插件，一个是【Contact Form 7】表单插件，一个是【WooCommerce Quote or Enquiry Contact Form 7】购物按扭替换插件，这两个插件相互配合可以实现上图中的效果。
操作步骤如下：
1.安装Contact Form 7插件。
Contact Form 7
https://wordpress.org/plugins/contact-form-7/
启用插件后添加一个询盘表单，可以参考我下面的设置：
<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://wordpress.org/plugins/woo-quote-or-enquiry-contact-form-7/
安装并启用插件后，进入插件设置，如上图所示，这个插件可以自动识别Contact Form 7插件中创建的表单，选中表单，然后设置询盘按钮的颜色和文字，最后保存即可生效。
