hosting tutorials WeChat Top

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

Email Me

(如果你会中文,可以点击微信图标与我联系。)

扫一扫加我

注:因个人英文水平有限,所以暂时只能为懂中文的朋友提供wordpress建站服务

微信:18200592859 或 yrwordpress

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

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.

Add an inquiry button to the Woocommerce product page

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

2023032309251032

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.

2023032309252835

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/
2023032309255329

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

2023032309251032

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

2023032309252835

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

这需要用到两个插件,一个是【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/
2023032309255329

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

WordPress Hosting / 悦然wordpress建站

WordPress Hosting / 悦然wordpress建站

【WordPress Hosting / 悦然wordpress建站】I am a WordPress hobby from China, and I like to communicate with friends from all over the world to learn WordPress website building and maintenance related knowledge.