Changing display of product image and product summary

You’ll need to study:
plugins/woocommerce/templates/content-single-product.php
unless your theme has a template override, in which case study:
themes/your-theme/woocommerce/content-single-product.php

The left bits use:
woocommerce_before_single_product_summary

and the right bits use
woocommerce_single_product_summary

So, for example, to move the sale flash from left to right you would write:`
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
The “10” priority parameter whatever must be the same as the add_action() that put it there. Then:
add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

There are 10 bits to swap over.

Your next issue is likely to be that the bits are now inside the wrong divs, so the styling will be a mess. There’s 3 ways forward from here:

1. get real good at styling using custom css

2. remove all 10 bits from where they are now, then put all 10 bits on the left, but in a different order which you can control with the priority parameter. The current right div will remain where it is but empty. Some css may still be needed but not so much.

Where you need to insert a div into the sequence, use something like:

add_action( 'woocommerce_before_single_product_summary', add_custom_div', 30 );
function add_custom_div() {
  print '<div class="summary entry-summary">';
}

You’ll need a similar snippet to close this div after what is currently the right bits.

3. Make a child theme and create your own page template at:
themes/your-child-theme/woocommerce/content-single-product.php

Whatever you decide, you’ll need to maintain it if Woo ever changes their relevant code.

Your removes and adds go in functions.php for your child theme or you can use the “My Custom Functions” plugin.

Thank you so much for the response! When you mean ‘bits’ are you talking about 10 different add_actions on the content-single-product page?

Also, how would I actually move the functions around on this page. I see that each of them is commented out and looks like this

/**
/**
 * woocommerce_single_product_summary hook.
 *
 * @hooked woocommerce_template_single_title - 5
 * @hooked woocommerce_template_single_rating - 10
 * @hooked woocommerce_template_single_price - 10
 * @hooked woocommerce_template_single_excerpt - 20
 * @hooked woocommerce_template_single_add_to_cart - 30
 * @hooked woocommerce_template_single_meta - 40
 * @hooked woocommerce_template_single_sharing - 50
 * @hooked WC_Structured_Data::generate_product_data() - 60

Thanks again I really appreciate the help!

• This reply was modified 7 years, 4 months ago by sethbahookey.

Yes, the bits are the add_actions(), one for each element of the page.

To move the bits, you need to remove them from one position and add them to another. A position is defined by both the hook and the priority of the action.

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

The hookr plugin will show where each hook fires in a page.

Thanks lorro! So do I have to move all of them for a change to take place? I tried copying in what you’ve posted to my functions page but when testing on my local machine, nothing was happening ??

Those two lines were just to move the sale flash. Did you look at a sale item? Check the markup, it may have been moved into the other div in the markup without actually showing on the page. Maybe the styles need adjustment as I mentioned in my earlier post. I’m sorry, I can’t debug it via a forum answer. This is not a project to start with if you are new to PHP & CSS.

Somebody here will code that pronto. Bids are likely to be very competitive.
https://jobs.wordpress.net/

Sweet thanks! I got it to work ??