Docs

[Kelsey L]

URL: http://orgess.com/wordpress/wp/product/flower-butters/
WordPress Version: 4.6.1
X Version: 4.6.4
Cornerstone Version: 1.3.3

My client would like to have the tabs currently appearing below the image/description (Additional Information, Reviews, Ingredients) instead appear as part of the right-hand column, next to the picture instead of below it. What is the best way to accomplish this, and is it possible to only implement this on certain products? My client has different types of products and some will look best with the tabs below, and some floating to the right. Any help you can provide would be greatly appreciated.

Thank you.

[Kelsey L]

This reply has been marked as private.

[Kelsey L]

I have some additional questions as well – this client is very specific about what she wants, which is both helpful and not helpful at the same time. Rather than flood the forum with different posts, I figured it would be better to keep them all here.

These are all for the same URL, as above.

The Footer: The client would like to add an image appearing above the footer, as on this demo site: http://wavedemo.com/organicessence/product/flower-butters/. She would also like the footer layout to be altered to be all on one line, as on the WaveDemo site. Is this possible to recreate, or approximate?

(Actually, for now that’s just one additional question, but I’m sure there will be more. Thank you!)

[Kelsey L]

Another question:

I would like to be able to adjust the ratio of the columns on the WooCommerce products page – i.e., have the image portion take up less than half of it. What is the best way to accomplish this?

[Kelsey L]

This is the product page that the client is trying to emulate: http://nourishorganic.com/collections/body/products/organic-body-wash

[Lely]

Hello Kelsey,

Thanks for posting in.
Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Then add the following on your child theme’s functions.php file:

add_action( 'wp', 'move_tab_position' );
function move_tab_position() {
	if ( is_single( 151 ) ) {
		remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
		add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60 );
	}
}

From this line :if ( is_single( 151 ) ) { replace 151 with your product ID where you want to move the tabs. For multiple product pages update to this:
if ( is_single( 151 ) || is_single( 152 ) ) {

To adjust the footer in one line, please add the following on Appearance > Customize > Custom > Edit Global CSS:

.x-colophon.bottom .x-nav {
    float: left;
    display: inline-block;
    width: auto;
    border: thin solid red;
}
.x-colophon.bottom .x-colophon-content {
    float: right;
    display: inline-block;
    margin-top: 0;
}

To reduce the column width of the product image, please use this custom CSS:

.woocommerce div.product .images {
    width: 40%;
}
.woocommerce div.product .summary {
    width: 58%;
}

Adjust the values accordingly.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Kelsey L]

Thank you!

[Rahul]

You’re most welcome!

Feel free to ask us again.

Thank you for choosing the X-theme.

[Author]

Posts