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