How to Manually Insert the Quickview Button

If you’re looking to manually add the Quickview button to your site, there are three different methods you can use:

  1. Using a shortcode – this method can be used with page builders or can be added to a WordPress post or page.
  2. Using PHP – this method works well if you have coding knowledge and access to your theme files.
  3. Using HTML – again, this method works well if you have coding knowledge and access to your theme files.

We’ll go through each of these methods below.

Add the Quickview button using a shortcode

If you’re using a page builder or want to add your Quickview button to a page or post, this method will work well for you.

You can display the Quickview button anywhere on your site using the shortcode:

[quickview-button product-id="42"]

The number 42 is the ID of the product you’d like to display.

You can change the text of the Quickview button like so:

[quickview-button product-id="42"]Custom Text[/quickview-button]

There are a few other parameters you can adjust, including:

ParameterDefaultOptionsDescription
product-idThe ID of the product you want to open in Quickview.
iconSame as your settings.none search eye plusWhich icon to use.
styletruetrue falseWhether to use the button styling from your settings. For example, set to
false and you can change the content to an image.

Add the Quickview button using PHP

To insert the Quickview button into your product loop using PHP, simply add the following to the top of the file where you are inserting the button:

<?php global $jckqv; ?>

Then, to display the button in your loop (or anywhere if you pass the correct Product ID), use the following code:

<?php echo $jckqv->display_button( $product_id ); ?>

Add the Quickview button using HTML

To Insert a button anywhere on your WooCommerce site using HTML, simply use the following code:

<a href="http://www.yourdomain.com/yourproduct" data-jckqvpid="42">Your Link Text</a>
  • The href will be used in the unlikely event that a user has javascript disabled.
  • 42 is the ID of your product to open in the popup.
  • You can use any text, icon or image as the link.

WooCommerce Quickview will work on any element with the data-jckqvpid attribute. For example, you could use a span tag rather than an anchor.

WooCommerce Quickview

Quickly view any product from the catalog, without reloading the page. Encourage sales with easy and efficient product browsing.

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.