Replace quick view button with magnify icon

  • Resolved gharchi

    (@gharchi)


    2 years, 7 months ago

    Hello and thank you for this great plugin. I love your plugins and I am currently using multiple of them.

    I am currently trying to replace the “Quick View” button with a magnify or eye icon. I am using the code below. It works well but it automatically redirects to the product page once you click on the icon. This never happens when I use quick view button.
    Anytime you click on the icon, the popup will open but it goes to product page automatically.

    Thank you in advance.

    add_filter( 'woosq_button_html', 'replace_quick_view_button_text_with_icon', 99, 2 );
function replace_quick_view_button_text_with_icon( $output, $product_id ) {
	$button_text = get_option( 'woosq_button_text' );
	if ( empty( $button_text ) ) {$button_text = esc_html__( 'Quick view', 'woosq' );}

	$output = '<a href="' . get_permalink( $product_id ) . '"><i class="fa fa-search"></i><span></span></a>';

	return $output;
}
    • This topic was modified 2 years, 7 months ago by gharchi.
    • This topic was modified 2 years, 7 months ago by gharchi.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter gharchi

    (@gharchi)

    Just for anyone who has same problem. You can replace text “Quick view” with an eye icon using the code below. 

    add_filter( 'woosq_button_html', 'replace_quick_view_button_text_with_icon', 99, 2 );
function replace_quick_view_button_text_with_icon( $output, $product_id ) {
	$button_text = get_option( 'woosq_button_text' );
	if ( empty( $button_text ) ) {$button_text = esc_html__( 'Quick view', 'woosq' );}
	$output = '<a href="' . get_permalink( $product_id ) . '"><i class="fa fa-search"></i><span></span></a>';
	return $output;
}

    But the code above will automatically redirect to product or archive page based on your settings. Just in case if you want the quick popup stay on same page without redirect then you need to change HTML a tag to a button. Sample code below. 

    add_filter( 'woosq_button_html', 'replace_quick_view_button_text_with_icon', 99, 2 );
function replace_quick_view_button_text_with_icon( $output, $product_id ) {
	$button_text = get_option( 'woosq_button_text' );
	if ( empty( $button_text ) ) {$button_text = esc_html__( 'Quick view', 'woosq' ); }
	$output = '<button class="woosq-btn woosq-btn-'.esc_attr($product_id).' '.get_option('woosq_button_class').'" data-id="'.esc_attr($product_id).'" data-effect="'.esc_attr(get_option('woosq_effect','mfp-3d-unfold')).'" data-context="default"><i class="far fa-eye"></i></button>';
	return $output;
}

    Feel free to edit and improve. Let me know if you have any suggestions

Viewing 1 replies (of 1 total)
  • The topic ‘Replace quick view button with magnify icon’ is closed to new replies.