WooCommerce pages looks unstyled

In my experience with woocommerce, there are two ways.

1 – Add some extra css to your current theme.

For example I want to modify the title of the product :

I open the chrome inspector, I see that the product page has a class css for body.single-product.

The product container has a class css div.product (create by woocommerce itself <div id = "product - <? php the_ID ();?>" <? php wc_product_class ('', $ product);? >>).

so, I can apply my own style, (for example my theme displays the title in an h1 tag of css class product-title)

So ; i cann override by :

body.single.single-product div.product h1.product-title {
  color: #13345f;
  font-size: 1.5em;
  font-weight: 800;
}

and so for the other elements in my product page.

2 – Second method, and that you create your own templates: your-theme/woocomerce / , and use wc_get_template_part() .

For example : I want to create a custom product details .

In my theme, I create the folder woocomerce, and a template named single-produt.php, and in the same level a template named content-single-product-custom.php .

and inside single-produt.php , i call it by : wc_get_template_part( 'content', 'single-product-custom' );