WooCommerce pages looks unstyled

Question

I'm playing with woocommerce to customize the store aspect. I've noticed that If I open a product link, the page looks unstyled. I need to integrate the shop with my bootstrap 4 based theme. After reading the docs, I'm not sure how to proceed, this because it's written that the best way is to use the hooks. I want to use hooks and override the default templates, but inside the templates all the code is call the do_action function, amd there's only a bit of html markup. How I can customize the aspect with hooks and templating override?

Answer 1

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' );