WooCommerce - Product Page | "No suitable preview area found..."

[xbsmarketing]

Hello!

I recently migrated from X Theme to Pro and just activated WooCommerce on my staging site. Whenever I try to edit a product page with Pro I get the following error message:

No suitable preview area found. This could happen when a third party plugin is overrinding the content area.

Any ideas or suggestions?

Thanks!

[ruenel]

Hello ComDoc,

Thanks for writing in! Before editing the product page, please go to X > Theme Options > WooCommerce > Single Product. Make sure that Product tabs is enabled and most important, the description tab is turn ON because this is where the content description will display when you edit the product page.

Please let us know how it goes.

[xbsmarketing]

@RueNel

Thanks very much! That seems to be letting do what I need to do.

One last question:

Is it possible to edit the single-product template to be full width rather than boxed?

[ruenel]

Hello ComDoc,

Thanks for updating in! The single product template can be edited to be fullwidth with a custom css. You cannot use Cornerstone to edit the template. Would you mind to provide the url of your single product page so that we can provide you a tailored solution for your site?

Kindly let us know.

[xbsmarketing]

Thanks, @RueNel!

I’d love to be able to have one full width section, as indicated by the blue box on this page:

https://comdocstaging.wpengine.com/product/test/

That content is Cornerstone content that is sitting in a slightly CSS modified WooCommerce description tab.

[ruenel]

Hello ComDoc,

To achieve what you have in mind, you will need to do the following:

1.) Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-product .x-container.max.width.offset {
    width: 100%;
    max-width: 100%;
}

2.) And then, please add the following code in your child theme’s functions.php file

function add_container_start(){
	echo '<div class="x-container max width">';
}
add_action('woocommerce_before_single_product_summary', 'add_container_start', 5);

function add_container_end(){
	echo '</div>';
}
add_action('woocommerce_after_single_product_summary', 'add_container_end', 5);

We would love to know if this has worked for you. Thank you.

[xbsmarketing]

@RueNel!

I think that did it! Thank you so much as always!

Take care!

[nabeel]

Glad we could help.

Cheers!