Remove button and use product image

Resolved dineintec
(@dineintec)

6 years ago

Hello, I am currently using your plugin and so far impressed.

I would like to remove the “Quick view” button completely and instead have the quick view called up when the user clicks on the product image. Is this possible?

I would also like to the “Select options” button to call quick view up too for my variable products, or at at least change this to a drop down bar on the category page. Is this also possible?

Would prefer to use custom CSS if this is powerful enough, as I have so far managed to customise my the website without editing php or creating child themes.

Thanks,
Paul

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

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

Plugin Author

WPClever

(@wpclever)

6 years ago

Hi @dineintec,

Thanks for contacting us.

In order to request a customization service, you can kindly contact our developers via this page.

Since the features you are requesting is additional, not a report of inherent issues in our plugin, I’ll mark this as Resolved.

Best regards.

liloo93120

(@liloo93120)

6 years ago

Hi there,

+1, I would like it too (quick view called up when the user clicks on the product image).

Regards

Thread Starter

dineintec

(@dineintec)

6 years ago

I realise this could be achievable with a snippit. I have following snippet to remove the current product image link and to disable single product pages:

// remove single product page link
remove_action( 'woocommerce_before_shop_loop_item','woocommerce_template_loop_product_link_open', 10 );
remove_action( 'woocommerce_after_shop_loop_item','woocommerce_template_loop_product_link_close', 5 );

// hide single product page completely
add_filter( 'woocommerce_register_post_type_product','hide_product_page',12,1);
function hide_product_page($args){
  $args["publicly_queryable"]=false;
  $args["public"]=false;
  return $args;
}

But would not know what code to extract from your plugin’s function.php and how I would implement it into the above snippet. What would I need to extract from here:

add_action( 'init', array( $this, 'woosq_init' ) );

// menu
add_action( 'admin_menu', array( $this, 'woosq_admin_menu' ) );

// enqueue scripts
add_action( 'wp_enqueue_scripts', array( $this, 'woosq_wp_enqueue_scripts' ) );

// ajax
add_action( 'wp_ajax_woosq_quickview', array( $this, 'woosq_quickview' ) );
add_action( 'wp_ajax_nopriv_woosq_quickview', array( $this, 'woosq_quickview' ) );

// link
add_filter( 'plugin_action_links', array( $this, 'woosq_action_links' ), 10, 2 );
add_filter( 'plugin_row_meta', array( $this, 'woosq_row_meta' ), 10, 2 );

…and how would I use this in my snippet?

Thread Starter

dineintec

(@dineintec)

6 years ago

I’ve removed the quick view button:

// remove single product page link
remove_action( 'woocommerce_before_shop_loop_item','woocommerce_template_loop_product_link_open', 10 );
remove_action( 'woocommerce_after_shop_loop_item','woocommerce_template_loop_product_link_close', 5 );

// remove quick view button
add_filter( 'woosq_button_position', function() {
    return '0';
} );

// hide single product page completely
add_filter( 'woocommerce_register_post_type_product','hide_product_page',12,1);
function hide_product_page($args){
  $args["publicly_queryable"]=false;
  $args["public"]=false;
  return $args;
}

Now just need to change the link for the product image and “select options” button (for variable products) if any one can assist?

I’m guessing it would be something along the lines:

add_action( 'woocommerce_before_shop_loop_item','**SOMETHING TO GO HERE**', 10 );
add_action( 'woocommerce_after_shop_loop_item','**AND SOMETHING TO GO HERE**', 5 );

This reply was modified 6 years ago by dineintec.

Plugin Author

WPClever

(@wpclever)

6 years ago

Hi @dineintec @liloo93120

Please add below code to current theme (or child-theme) / functions.php

// remove quick view button
add_filter( 'woosq_button_position', function () {
	return '0';
} );

// remove default link open and close
remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );

// add quick view link open
add_action( 'woocommerce_before_shop_loop_item', 'woosq_before_shop_loop_item', 9 );
function woosq_before_shop_loop_item() {
	global $product;
	echo '<div class="woosq-btn" data-id="' . $product->get_id() . '" style="cursor: pointer">';
}

// add quick view link close
add_action( 'woocommerce_after_shop_loop_item', 'woosq_after_shop_loop_item', 99 );
function woosq_after_shop_loop_item() {
	echo '</div>';
}

// change the add to cart button
add_filter( 'woocommerce_loop_add_to_cart_link', 'woosq_loop_add_to_cart_link', 99, 2 );
function woosq_loop_add_to_cart_link( $link, $product ) {
	return '<span class="button">' . esc_html( $product->add_to_cart_text() ) . '</span>';
}

Thread Starter

dineintec

(@dineintec)

6 years ago

Thank you for your help – this half works as I expected to now. I removed:

// change the add to cart button
add_filter( 'woocommerce_loop_add_to_cart_link', 'woosq_loop_add_to_cart_link', 99, 2 );
function woosq_loop_add_to_cart_link( $link, $product ) {
	return '<span class="button">' . esc_html( $product->add_to_cart_text() ) . '</span>';
}

As I want the add to cart button to function as normal. It is just the “Select Option” button I wanted to change which still works when removing this code which is great.

But now my quantity increment buttons (and text field in between) activate the quick view which I do not wish and would like them to remain the same action as before.

Also, when clicking on “add to cart” the quick view flashes on and off quickly – I would like this to operate as normal please.

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

The topic ‘Remove button and use product image’ is closed to new replies.