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:
- Using a shortcode – this method can be used with page builders or can be added to a WordPress post or page.
- Using PHP – this method works well if you have coding knowledge and access to your theme files.
- 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.
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:
Parameter | Default | Options | Description |
---|---|---|---|
product-id | The ID of the product you want to open in Quickview. | ||
icon | Same as your settings. | none search eye plus | Which icon to use. |
style | true | true false | Whether to use the button styling from your settings. For example, set tofalse and you can change the content to an image. |
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 ); ?>
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.