[BUG] Edit single product page

[akvrmvlakis]

Describe the bug

Hello Basti and team! What I am trying to achieve here is to edit the single product page in order to give it a specific view with a fullwidth product image, the product description above the image, and the breadcrumb below. I have made a local copy of the woocommerce template files on my child theme and everything is smooth by just re-arranging the hooks I can give them a different order. I have managed to remove the sidebar by removing <?php get_sidebar(); ?> from woocommerce.php since I don't want it anywhere but when it comes to editing the columns so that I can have a fullwidth single product image and a fullwidth single product description above the image I am having issues. This is my main issue:

I understand that the column structure lies within <?php woocommerce_content(); ?> but I am unable to locate it on the theme in order to modify it. Would you recomment making a new woocommerce.php from scratch based on the official wordpress documentation and using bootstrap column structure as needed?

I don't work with gutenberg blocks maybe I am missing something important here. I would appreciate it if you can point me to the right direction.

Thanks in advance and always grateful for your time and help.

Steps to reproduce

No response

Screenshots and Additional Info

No response

Website link

https://woodgal.tech/product/brava/

[crftwrk]

Hi Alexandros,

you simply want to remove the sidebar in Woo pages, correct? If so, two ways:

The main col is dynamic. If there a widget in sidebar is active main col is set to col-md-8 col-lg-9 if no sidebar widget is active main col is set to col-12. This is done by

<?= bootscore_main_col_class(); ?>

in woocommerce.php. You can use simply a plugin like https://wordpress.org/plugins/widget-context/ and hide sidebar-widgets in Woo pages, then the main col there is set to col-12.

If you do not want to use a plugin, then remove <?php get_sidebar(); ?> as you did and replace <?= bootscore_main_col_class(); ?> with col-12.

Solved?

[akvrmvlakis]

Partly solved my dear friend what I basically want to achieve is to be able to put in a col-12 each element of the single product page e.g put the single product image in a col-12 to make full width and also put the product description in a col-12 to make it fullwidth. I'd be very happy if I could achieve this with code if I knew where to look or perhaps a plugin that can help me with that if not achievable with code thanks so much for your time bro. Screenshot comes attached.

[crftwrk]

This files are not inside our theme. If you want to add row and cols to them you must copy the files from WooCommerce to your child. For example the product image https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/templates/single-product/product-image.php.

But instead overriding the template files, you can roughly override WooCommerce's CSS:

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
  float: none;
  width: 100%;
}

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
  float: none;
  width: 100%;
}

[akvrmvlakis]

Thanks so much for your help Basti that will do it! Have a lovely weekend.