Title: Replace quickview
Last modified: July 12, 2021

---

# Replace quickview

 *  Resolved [sigmas55](https://wordpress.org/support/users/sigmas55/)
 * (@sigmas55)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/replace-quickview/)
 * Hi,
 * I’m trying to replace the quickview design that came with Woolentor archive page
   with this plugin’s design, theme used is Astra, is there a code to do that?
 * Thanks in advance
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Freplace-quickview%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 14 replies - 1 through 14 (of 14 total)

 *  Plugin Author [WPClever](https://wordpress.org/support/users/wpclever/)
 * (@wpclever)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14679283)
 * Hi [@sigmas55](https://wordpress.org/support/users/sigmas55/)
 * Yes, you can do that!
 * To add a quick view feature, please add a button/link like that:
 * `<a class="woosq-btn" data-id="<?php echo esc_attr( $product_id ); ?>">Quick 
   View</a>`
 * It must include the CSS class “woosq-btn” and attribute data-id. The rest can
   be changed to match your theme.
 * Currently, you already have the quick view button [https://www.screencast.com/t/lbhGFGYLwUJd](https://www.screencast.com/t/lbhGFGYLwUJd).
   Please change it to:
 * `<a href="javascript:void(0);" class="woolentorquickview woosq-btn" data-id="
   40" data-quick-id="40">...</a>`
 *  Thread Starter [sigmas55](https://wordpress.org/support/users/sigmas55/)
 * (@sigmas55)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14680133)
 * Many thanks for your help 🙂
 *  [sna1234](https://wordpress.org/support/users/sna1234/)
 * (@sna1234)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14691727)
 * Hello,
    I am encountering the same problem : I’d like to replace the quick view
   from a product slider (came from Woolentor plugin) to the WPC quick view.
 * I tried to put the class **woosq-btn** in the devtool from my browser, like this:
 * `<a href="javascript:void(0);" class="woolentorquickview woosq-btn" data-id="
   40" data-quick-id="40">...</a>`
 * With this class added, the quick view button only opens a transparent black js
   windows. Not the product.
 * Am I surely missing something..
 * [@sigmas55](https://wordpress.org/support/users/sigmas55/) How did you managed
   to do it ?
 * Thank you for your time
    -  This reply was modified 4 years, 10 months ago by [sna1234](https://wordpress.org/support/users/sna1234/).
 *  Plugin Author [WPClever](https://wordpress.org/support/users/wpclever/)
 * (@wpclever)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14691867)
 * Hi [@sna1234](https://wordpress.org/support/users/sna1234/)
 * Please send me your website link and I can check it first.
 *  [sna1234](https://wordpress.org/support/users/sna1234/)
 * (@sna1234)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14694774)
 * Hello,
    thank you for your quick reply.
 * Here is my website : [parentcalme.fr](https://parentcalme.fr/)
    The Wololentor
   slider is on this homepage, second section.
 * When putting the CSS class woosq-btn and inspecting the javascript window, I 
   noticed that the CSS class=”mfp-content” has no child under it. Which is not 
   the case when I inspect it when I normally open the WPC quick view (see in my
   all-products page [parentcalme.fr/catalogue](https://parentcalme.fr/catalogue/)
    -  This reply was modified 4 years, 10 months ago by [sna1234](https://wordpress.org/support/users/sna1234/).
 *  Plugin Author [WPClever](https://wordpress.org/support/users/wpclever/)
 * (@wpclever)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14700711)
 * When adding the class “woosq-btn” for the button, it works fine but has two quick
   view popups [https://www.screencast.com/t/0WqSCpjqA](https://www.screencast.com/t/0WqSCpjqA)(
   screen record video).
 * We need to disable the quick view function from the theme by changing this button
   like that [https://www.screencast.com/t/OsKNyE5Xr](https://www.screencast.com/t/OsKNyE5Xr)
 *  [sna1234](https://wordpress.org/support/users/sna1234/)
 * (@sna1234)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14703697)
 * Thank you for your explanation in video, really helpfull. It helped me to see
   my error : the attribute is `data-id` and not `data-quick-id`.
 * Can you please tell me how I can change permanently the class and attribute. 
   I am a beginner in web languages and this is something I don’t know how to do.
 * Can I use in someways an addfilter(?); function to make the changes ?
 *  Plugin Author [WPClever](https://wordpress.org/support/users/wpclever/)
 * (@wpclever)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14713019)
 * Yes, you can add below snippet ([How to add custom code?](https://wpclever.net/faqs/add-custom-code)):
 *     ```
       add_action( 'wp_footer', 'woosq_replace_woolentor_quick_view', 99 );
       function woosq_replace_woolentor_quick_view() {
       	?>
           <script type="text/javascript">
             jQuery(document).on('ready', function() {
               setTimeout(function() {
                 jQuery('.woolentorquickview').each(function() {
                   jQuery(this).attr('data-id', jQuery(this).attr('data-quick-id'));
                   jQuery(this).addClass('woosq-btn').removeClass('woolentorquickview');
                 });
               }, 1000);
             });
           </script>
       	<?php
       }
       ```
   
 *  [sna1234](https://wordpress.org/support/users/sna1234/)
 * (@sna1234)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14716398)
 * I Thank you so much.
 * WPC is definitly incredible. Making good and usefull plugins, with free versions
   almost as powerfull as paid ones. Moreover, users receive the best answers to
   their questions thanks to the support team.
 * I will buy some of your plugins for sure (I use for now Fly Cart and Variations
   Radio Buttons).
 * PS: you should programm an upsell post-checkout plugin 🙂
    -  This reply was modified 4 years, 10 months ago by [sna1234](https://wordpress.org/support/users/sna1234/).
    -  This reply was modified 4 years, 10 months ago by [sna1234](https://wordpress.org/support/users/sna1234/).
 *  Plugin Author [WPClever](https://wordpress.org/support/users/wpclever/)
 * (@wpclever)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14718217)
 * You’re welcome! 🙂
 * Thanks for that idea! We’ll add it to our plan <3
 *  [sna1234](https://wordpress.org/support/users/sna1234/)
 * (@sna1234)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14725075)
 * Hello again,
    I am trying to add some classes to the quickview window with a 
   js snippet using jQuery. Here below is the code I used. I also tryed a lot of
   other test, targeting other classes and using other basic function as after(),
   before(), append(). The goal is just to put some text before or after the product
   title.
 *     ```
       jQuery(document).ready(function( $ ){
           $("#woosq-popup .summary-content").prepend($("<div class='myclasstext'>  <span>this is a text after title</span></div>"));
       });
       ```
   
 * I don’t understand why it does not work. Because this code worked at other places(
   at home page, below the title of a product silder).
 * Thank you for reading.
 *  Plugin Author [WPClever](https://wordpress.org/support/users/wpclever/)
 * (@wpclever)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14730704)
 * To do something after opening the quick view popup, please use below code:
 *     ```
       jQuery(document.body).on('woosq_loaded', function() {
           // do something
           jQuery("#woosq-popup .summary-content").prepend(jQuery("<div class='myclasstext'><span>this is a text after title</span></div>"));
       });
       ```
   
 *  [sna1234](https://wordpress.org/support/users/sna1234/)
 * (@sna1234)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14734003)
 * Fully working. Thank you a lot 🙂
 * PS: only worked inside the script, inside fn woosq_replace_woolentor_quick_view(),
   in the .php snippet.
    (Does not work in a simple js custom code)
 *  [zaoyao](https://wordpress.org/support/users/zaoyao/)
 * (@zaoyao)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14775568)
 * How to generate the short code with dynamic product id?

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Replace quickview’ is closed to new replies.

 * ![](https://ps.w.org/woo-smart-quick-view/assets/icon-128x128.png?rev=1857803)
 * [WPC Smart Quick View for WooCommerce](https://wordpress.org/plugins/woo-smart-quick-view/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woo-smart-quick-view/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woo-smart-quick-view/)
 * [Active Topics](https://wordpress.org/support/plugin/woo-smart-quick-view/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woo-smart-quick-view/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woo-smart-quick-view/reviews/)

 * 14 replies
 * 4 participants
 * Last reply from: [zaoyao](https://wordpress.org/support/users/zaoyao/)
 * Last activity: [4 years, 9 months ago](https://wordpress.org/support/topic/replace-quickview/#post-14775568)
 * Status: resolved