WordPress has become the most widely used content management system (CMS) with 60 percent market share. It’s no surprise that the WooCommerce plugin has become one of the most widely used e-commerce solutions which now rivals other major standalone ecommerce solutions such as Magento, Shopify, Zen Cart and many others.

Not only is WooCommerce an e-commerce component that easily integrates into WordPress but it also works efficiently if you’re looking to run a basic product catalog to showcase products or run an affiliate based website.

On two separate websites I’ve added the following code which is an accordion based contact form which is displayed on WooCommerce product pages. The code works to display the contact form on the same page rather than having them click a button and be redirected to a new page.

I’ll admit this code can be more elegantly written but for all intensive purposes it offers a solution that many would find useful. I’ve also searched other WordPress and PHP forums for a similar solution similar however none seem to exist so I decided to share my own solution which is derived from some code I found posted on JSFiddle.


Default state:


When button is clicked:

woocommerce product page accordion button

Add the following code below to your functions.php file:

/* the hook below adds the CTA call to action on the single product page */
add_action( 'woocommerce_single_product_summary', 'wc_add_cta_info', 35 );

function wc_add_cta_info() { 
echo '
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".accordion .accord-header").click(function() {
} else {
$(".accordion .accord-content").slideUp("slow");

echo '

<div class="accordion"> 
<div class="accord-header" STYLE="">BOOK AN APPOINTMENT</div>
<div class="accord-content" STYLE="float:left;width:100%;">' . 

// Add your form's short code between the single quotes ('') in the line below
do_shortcode( '
  • This field is for validation purposes and should be left unchanged.
' ) . '</div></div>'; }

There are two places you may want to make changes to the code above:

1.  If you wish to rename the button text, rename BOOK AN APPOINTMENT

2. Replace the Gravity Form short code seen below with your own form’s short code which can also be generated from Contact Form 7, Ninja Forms, etc.

  • This field is for validation purposes and should be left unchanged.

In the themes CSS (style.css) you can customize the form styling as you wish. In order to keep the accordion closed by default and hide the default WooCommerce add to cart button add the following 2 lines below:

/* hide woocommerce ad to cart button */ 
.woocommerce #wrapper .single_add_to_cart_button { display:none; }

/* hide default accordian content */
.accord-content { display: none; }


You can see the above script in action by visiting the following product page for a Toronto jewelry website I developed:


If you have any questions or comments regarding this blog feel free to leave a comment below. If you are looking to hire a WordPress developer to help you implement  the following code or help you build a professional website email NexToronto WordPress Development at info@nextoronto.com or call 416.893.3231.