👋🏼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

给Woocommerce产品页面添加询盘弹窗(使用插件)

给Woocommerce产品页面添加询盘弹窗(使用插件):上一篇wordpress教程给大家分享了如果给woocommerce添加询盘按扭,但是样式比较简陋。所以今天再给大家分享其它的方法,使用插件给woocommerce添加询盘弹窗效果。

给Woocommerce产品页面添加询盘按扭

https://yrshare.com/add-an-inquiry-button-to-the-woocommerce-product-page/
【WP-Host/悦然wordpress建站】

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建站】.

Effect

Add an inquiry popup to the Woocommerce product page (using the plugin)-WP-Host

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.

Add an inquiry popup to the Woocommerce product page (using the plugin)-WP-Host

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.

Steps

1.Install the Contact Form 7 plugin

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>

2.Install WooCommerce Quote or Inquiry Contact Form 7 plugin.

WooCommerce Quote or Enquiry Contact Form 7

https://wordpress.org/plugins/woo-quote-or-enquiry-contact-form-7/
Add an inquiry popup to the Woocommerce product page (using the plugin)-WP-Host

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建站项目中用到的。

Add an inquiry popup to the Woocommerce product page (using the plugin)-WP-Host

先来看看效果,如上图所示,这个woocommerce插件的产品页只有一个Inquiry询盘按扭。

Add an inquiry popup to the Woocommerce product page (using the plugin)-WP-Host

点击这个按扭之后它会弹出一个产品询盘的窗口。这是怎么实现的呢?

这需要用到两个插件,一个是【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/
Add an inquiry popup to the Woocommerce product page (using the plugin)-WP-Host

安装并启用插件后,进入插件设置,如上图所示,这个插件可以自动识别Contact Form 7插件中创建的表单,选中表单,然后设置询盘按钮的颜色和文字,最后保存即可生效。

WordPress Hosting / 悦然wordpress建站

WordPress Hosting / 悦然wordpress建站

【WordPress Hosting / 悦然wordpress建站】我是来自中国的wordpress爱好,喜欢与世界各地的朋友一起交流学习wordpress建站和维护相关知识。