Product Page Layout Modification

[SmallDogCreative]

Howdy Team SwiftIdeas!

In reading some related posts, I realize this may be outside of the scope of normal support however, if you could point me in the right direction, I would be eternally grateful (even more than I already am for all the good you guys do).

I simply want to swap the order of the product image and product content on the single product page but for the life of me, I can’t figure out how to do it.

I’ve attached two reference images:

1) Is the current (default) layout.
2) Is the desired (target) layout.

I’m using a child-theme, and have copied the parent woocommerce (templates) directory into the child-theme, and had a look at both single-product.php and content-single-product.php. From what I gather, I may have to change the hook?

Your input and guidance is greatly appreciated, if you have the time.

Attachments:

You must be logged in to view attached files.

[SmallDogCreative]

OK, working this out (in public, I guess). I found two theoretical ways of doing it. First, adding the following to child-theme/functions.php:

remove_action( 'woocommerce_before_single_product_summary','woocommerce_show_product_sale_flash', 10 );
remove_action( 'woocommerce_before_single_product_summary','woocommerce_show_product_images', 20 );  
  
add_action( 'woocommerce_after_single_product_summary','woocommerce_show_product_sale_flash', 10 );
add_action( 'woocommerce_after_single_product_summary','woocommerce_show_product_images', 20 );

Second, simply overwriting sf-woocommerce.css lines 1270 and 1278 respectively with:

.woocommerce div.product div.images {
	float: right;
}

.woocommerce div.product div.summary {
	float: left;
}

effectively swapping their float values. What is the preferred method?

[Mohammad – SUPPORT]

Hi,
Please use this custom css code.

.woocommerce div.product div.images {
    float: right !important;
}

.woocommerce div.product div.summary {
    float: left !important;
}

Its the best way to make this change.
Thanks
Mohammad