Below, you’ll find a detailed guide on how to add the WPC Smart Quick View for WooCommerce Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WPC Smart Quick View for WooCommerce Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the WPC Smart Quick View for WooCommerce Plugin and the shortcodes it provides:
"WPC Smart Quick View for WooCommerce is a handy plugin that enhances the shopping experience by allowing customers to preview products without leaving the current page. Ideal for any WooCommerce store."
- [woosq]
WPC Smart Quick View for WooCommerce [woosq] Shortcode
The Woo Smart Quick View shortcode is a powerful tool that generates a ‘Quick View’ button for WooCommerce products. It allows customers to view product details in a popup without leaving the current page. This shortcode takes several attributes: ‘id’, ‘text’, ‘type’, ‘effect’, ‘context’. If no ‘id’ is provided, it defaults to the current product. The ‘text’ attribute specifies the button label, defaulting to ‘Quick View’. The ‘type’ attribute can be either ‘link’ or ‘button’, and ‘effect’ controls the popup animation style. The shortcode also supports customization of button appearance, including adding an icon to the button. It checks if the product belongs to selected categories before displaying the button. The generated button can either be a hyperlink or a button element, based on the ‘type’ attribute. This shortcode provides a seamless shopping experience, enhancing user engagement and potentially boosting sales.
Shortcode: [woosq]
Parameters
Here is a list of all possible woosq shortcode parameters and attributes:
id– Unique identifier for the WooCommerce producttext– Custom text displayed on the quick view buttontype– Determines whether the output is a link or a buttoneffect– Defines the animation effect for the quick view popupcontext– Specifies the context in which the shortcode is used
Examples and Usage
Basic example – A simple shortcode to display the Quick View button for a specific product using its ID.
[woosq id=123 /]Advanced examples
Display the Quick View button with custom text. This shortcode will change the default “Quick view” text on the button to “View Product”.
[woosq id=123 text="View Product" /]Display the Quick View button with a custom effect. This shortcode will use the ‘mfp-zoom-in’ effect for the Quick View popup.
[woosq id=123 effect="mfp-zoom-in" /]Display the Quick View button with a custom context. This shortcode will set the context to ‘sidebar’.
[woosq id=123 context="sidebar" /]Display the Quick View button with a custom type. This shortcode will change the button to a link.
[woosq id=123 type="link" /]Using the shortcode with multiple parameters. This shortcode will display the Quick View button for a specific product with custom text, effect, context, and type.
[woosq id=123 text="View Product" effect="mfp-zoom-in" context="sidebar" type="link" /]PHP Function Code
In case you have difficulties debugging what causing issues with [woosq] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'woosq', [ $this, 'shortcode_btn' ] );Shortcode PHP function:
function shortcode_btn( $attrs ) {
$output = '';
$attrs = shortcode_atts( [
'id' => null,
'text' => null,
'type' => self::get_setting( 'button_type', 'button' ),
'effect' => self::get_setting( 'effect', 'mfp-3d-unfold' ),
'context' => 'default',
], $attrs, 'woosq' );
if ( ! $attrs['id'] ) {
global $product;
if ( $product && is_a( $product, 'WC_Product' ) ) {
$attrs['id'] = $product->get_id();
}
}
if ( $attrs['id'] ) {
// check cats
$selected_cats = self::get_setting( 'cats', [] );
if ( is_array( $selected_cats ) && ! empty( $selected_cats ) && ( $selected_cats[0] !== '0' ) ) {
if ( ! has_term( $selected_cats, 'product_cat', $attrs['id'] ) ) {
return '';
}
}
// button text
if ( ! empty( $attrs['text'] ) ) {
$button_text = $attrs['text'];
} else {
$button_text = self::localization( 'button', esc_html__( 'Quick view', 'woo-smart-quick-view' ) );
}
// button class
$button_class = trim( 'woosq-btn woosq-btn-' . esc_attr( $attrs['id'] ) . ' ' . esc_attr( self::get_setting( 'button_class', '' ) ) );
if ( ( $button_icon = self::get_setting( 'button_icon', 'no' ) ) !== 'no' ) {
$button_class .= ' woosq-btn-has-icon';
$icon = apply_filters( 'woosq_button_normal_icon', self::get_setting( 'button_normal_icon', 'woosq-icon-1' ) );
if ( $button_icon === 'left' ) {
$button_class .= ' woosq-btn-icon-text';
$button_text = '<span class="woosq-btn-icon ' . esc_attr( $icon ) . '"></span><span class="woosq-btn-text">' . esc_html( $button_text ) . '</span>';
} elseif ( $button_icon === 'right' ) {
$button_class .= ' woosq-btn-text-icon';
$button_text = '<span class="woosq-btn-text">' . esc_html( $button_text ) . '</span><span class="woosq-btn-icon ' . esc_attr( $icon ) . '"></span>';
} else {
$button_class .= ' woosq-btn-icon-only';
$button_text = '<span class="woosq-btn-icon ' . esc_attr( $icon ) . '"></span>';
}
}
$button_class = apply_filters( 'woosq_button_class', $button_class, $attrs );
if ( $attrs['type'] === 'link' ) {
$output = '<a href="' . esc_url( '?quick-view=' . $attrs['id'] ) . '" class="' . esc_attr( $button_class ) . '" data-id="' . esc_attr( $attrs['id'] ) . '" data-effect="' . esc_attr( $attrs['effect'] ) . '" data-context="' . esc_attr( $attrs['context'] ) . '" rel="' . esc_attr( apply_filters( 'woosq_button_rel', 'nofollow' ) ) . '">' . $button_text . '</a>';
} else {
$output = '<button class="' . esc_attr( $button_class ) . '" data-id="' . esc_attr( $attrs['id'] ) . '" data-effect="' . esc_attr( $attrs['effect'] ) . '" data-context="' . esc_attr( $attrs['context'] ) . '">' . $button_text . '</button>';
}
}
return apply_filters( 'woosq_button_html', $output, $attrs['id'] );
}
Code file location:
woo-smart-quick-view/woo-smart-quick-view/wpc-smart-quick-view.phpConclusion
Now that you’ve learned how to embed the WPC Smart Quick View for WooCommerce Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply