How to Move Components Within the Quickview Modal
It’s possible to move, remove, and add components within the Quickview modal. In this article, we’ll explain how to move them.
The following is a list of each component that’s hooked into the modal, where it’s hooked, and at what priority. We’ll use this information to move a few components around.
Hook | Component | Priority |
jck_qv_summary | modal_part_sale_flash | 5 |
modal_part_title | 10 | |
modal_part_rating | 15 | |
modal_part_price | 20 | |
modal_part_desc | 25 | |
modal_part_add_to_cart | 30 | |
modal_part_meta | 35 | |
jck_qv_images | modal_part_styles | 5 |
modal_part_images | 10 | |
jck_qv_after_summary | modal_part_close | 5 |
modal_part_adding_to_cart | 10 |
So let’s say we wanted to move the product meta before the price output. Currently, the meta is displayed here in the modal:
In order to move this above the price, we want to unhook the current implementation and re-hook it with a higher priority (higher, in this case, is a lower number).
You can add this code using the Code Snippets plugin, or using your preferred method.
function iconic_move_quickview_components() {
global $jckqv;
remove_action( 'jck_qv_summary', array( $jckqv, 'modal_part_meta' ), 35 );
add_action( 'jck_qv_summary', array( $jckqv, 'modal_part_meta' ), 19 );
}
add_action( 'init', 'iconic_move_quickview_components' );
You can see we’ve set the priority to 19, as the price is queued up at priority 20. Now the modal will look like this:
When you move items around, you may want to add some additional CSS to fix any spacing issues.
You can remove and add any number of actions in that same function. Just make sure when removing an action that you set the priority (the third parameter; 35 in our example) to be the same value as in the table above; you can obviously change this when re-adding the action.
WooCommerce Quickview
Quickly view any product from the catalog, without reloading the page. Encourage sales with easy and efficient product browsing.
Was this helpful?
Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.