Display only one price for grouped products – WooCommerce

This is a handy little function to control what price is displayed for a range of products that have been grouped in WooCommerce. Often the grouped products all have different prices and by default WooCommerce will display a range such as £50 – 1000. Which is not ideal. This function allows you to display the maximum price.

* Returns max price for grouped products
function wc_grouped_price_html( $price, $product ) {
$all_prices = array();

foreach ( $product->get_children() as $child_id ) {
$all_prices[] = get_post_meta( $child_id, ‘_price’, true );

if ( ! empty( $all_prices ) ) {
$max_price = max( $all_prices );
} else {
$max_price = ”;

$price = ‘<span class=”from”>’ . _x(‘From:’, ‘max_price’, ‘woocommerce’) . ‘ </span>’ . woocommerce_price( $max_price );

return $price;
add_filter( ‘woocommerce_grouped_price_html’, ‘wc_grouped_price_html’, 10, 2 );

NB: This is not originally my code, but unfortunately I can no longer find the website that published it to reference it correctly.


Extending Quick View to show on thumbnail click – WooCommerce

Quick View allows you to add the ability to click on a product in your WooCommerce shop and display some basic details about that product in light box without the need to load a new page. Amazon does something similar as does some of the other bigger online retailers.

Out of the box this plugin gives you the option to add a “quick view” button to each product or select any “non-ajax” buttons to trigger the light box. However, for the store I was building I needed the light box to be triggered when you clicked on the thumbnail image instead.

Step 1: Modifying the plugin

As with any WooCommerce files, in order to modify them without your changes being overwritten the next time there is an update available, all you need to do is copy the file you want to edit into your theme folder. For this plugin I needed to modify the main woocommerce-quick-view.php file, so I created a new folder in my theme titled the same as the plugin and copied the file into that.

Step 2: Creating the option

Once installed and activated, Quick View gives you some new settings under the Settings > General tab in WooCommerce. By default these are ‘Quick View Button’ and ‘Any non-ajax add to cart button’. We need to add a third option for product thumbnail.

To do this, open woocommerce-quick-view.php in your theme and go to approximately line 99. At the time of writing this there was already an option here for thumbnail that has been commented out. Un comment it so that your code now looks like this and save it:

$settings[] = array(
‘id’ =’quick_view_trigger’,
‘name’ = __( ‘Quick View Trigger’, ‘wc_quick_view’ ),
‘desc’ = __( ‘Choose what event should trigger quick view’, ‘wc_quick_view’ ),
‘type’ = ‘select’,
‘options’ = array(
‘button’ = __( ‘Quick View Button’, ‘wc_quick_view’ ),
‘thumbnail’ = __( ‘Product Thumbnail’, ‘wc_quick_view’ ),
‘non_ajax’ = __( ‘Any non-ajax add to cart button’, ‘wc_quick_view’ )

Step 3: Adding the quick view URL to the product thumbnail

Once the option in the admin has been created you need it to actually do something when selected. To do this we will add an action depending on what has been selected.

Move to approximately line 125 in woocommerce-quick-view.php, where you should find

switch ( $this->quick_view_trigger ) {

We need to add a new trigger, which when fired overwrites the default permalink to the full product details and instead loads the quick view. To do this, in the Switch we add a new case for our thumbnail option that we created:

case ‘thumbnail’ :
$selector = “‘a.quick-view-image'”;
if (is_shop() || is_product_category() ) :
add_filter( ‘the_permalink’, array( $this, ‘get_quick_view_url’ ) );

Here we’ve created a new trigger, an <a> tag with the class of ‘quick-view-image’. We’ve then added a filter that replaces the permalink for every <a> with that class with the new quick view url created by the plugin. And, as an added measure we’ve added conditional tags to make sure the permalink is only applied to shop archives and product category archives.

Step 4: Amending your product template

The last step is to amend each product listing to use the new options created as well. To do this all we need to do is add the class ‘quick-view-image’ to each product link.

As before in Step 1, copy the correct file from the WooCommerce plugin to our theme file so that we can make changes to the template without it being over written. In this case these are the product listings on the main shop page so we need to edit content-product.php like so:

<li <?php post_class( $classes ); ?>>

<?php do_action( ‘woocommerce_before_shop_loop_item’ ); ?>

<a href=”<?php the_permalink(); ?>” class=”quick-view-image”>

* woocommerce_before_shop_loop_item_title hook
* @hooked woocommerce_show_product_loop_sale_flash – 10
* @hooked woocommerce_template_loop_product_thumbnail – 10
do_action( ‘woocommerce_before_shop_loop_item_title’ );

* woocommerce_shop_loop_item_title hook
* @hooked woocommerce_template_loop_product_title – 10
do_action( ‘woocommerce_shop_loop_item_title’ );

* woocommerce_after_shop_loop_item_title hook
* @hooked woocommerce_template_loop_rating – 5
* @hooked woocommerce_template_loop_price – 10
do_action( ‘woocommerce_after_shop_loop_item_title’ );



* woocommerce_after_shop_loop_item hook
* @hooked woocommerce_template_loop_add_to_cart – 10
do_action( ‘woocommerce_after_shop_loop_item’ );



And thats it! Happy coding 🙂

NB: It is possible to do this without having to edit the WooCommerce product template as well by being more specific about your trigger in the plugin, instead of relying on a new class. However, this was easier for me at the time as I planned to edit other areas of the product template as well.

Full details about the Quick View add on for WooCommerce and documentation can be found here: https://docs.woothemes.com/document/woocommerce-quick-view/