Skip to content
Addonify

Addonify

Documentation & knowledge based site

  • Docs
    • Quick View
    • Compare Products
    • Floating Cart
    • EDD 2Checkout Inline Gateway
  • Plugins
  • Themes
  • Support
  • Blog
Addonify store
  • Docs
    • Quick View
    • Compare Products
    • Floating Cart
    • EDD 2Checkout Inline Gateway
  • Plugins
  • Themes
  • Support
  • Blog

Getting started [2]

  • Installation
  • Access Setting Page

Developer [4]

  • Using Hooks
  • Overwriting Quick View Templates
  • Custom Quick View Button
  • Changelogs

Support [1]

  • Support & Discussion
  • Home
  • Kb
  • WooCommerce Quick View
  • Developer
  • Custom Quick View Button

Custom Quick View Button

  • Updated on: June 27, 2022

Addonify Quick View also supports custom quick view button. Below is the markup of the custom quick view button:

<button class="addonify-qvm-button" data-product_id="{product_id}">{button_label}</button>

You can add custom CSS classes, but addonify-qvm-button is a necessary CSS class that is used to fire the quick view popup modal.

You also need to provide ID of WooCommerce product in the attribute data-product_id.

You can have your own button label. But if you wish to have the button label from the Addonify Quick View plugin’s setting page, use the code below:

get_option( 'addonify_qv_quick_view_btn_label' );

Disable on a mobile device

We have added the option to disable quick view on a mobile device since version 1.1.1. If the disable option for a mobile device is checked in the addonify quick view dashboard setting page, addonify-quick-view-disabled class is added to the body.

You can easily hide it with the help of CSS. Below is the example code snippet.

/* Example 1: only devices <= 575px */
@media ( max-width: 575px ) {

    .addonify-quick-view-disabled .your-custom-quick-view-button {

        display: none; /* Hide */
    }
}

/* Example 2: or even globally */
.addonify-quick-view-disabled .your-custom-quick-view-button {

  display: none; /* Hide */
}

Hence, except custom button, none of the addonify quick view public assets gets initialized when disable on mobile is enabled & mobile user agent is detected. We are using this open source library to detect the mobile device.

Didn't find what you looking for? Try sending your questions from our contact page.

Your feedback matters to us. Was this article helpful to you?

Copyright © 2022 addonify.com. All rights reserved.

Project by 💖 CreamCode.Org