0

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?

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

  • Thanks for the help. I have two more question about, I will use the templating option because I want to customize at all the layout. When I call the wc_get_template_part function I need to be inside a loop right and I need to create first the php templates right? Also for the templates, I saw that they are using hook, I need also to modify them or the templates overriding will work fine ? – sialfa Jan 16 at 16:50
  • yes. for the hooks do_action you can overwrite theme by add_filter . here you can find a full List and Examples – Younes.D Jan 17 at 2:46
  • I can also remove the do_action and use loops and pure markup? – sialfa Jan 17 at 9:35
  • Thanks for the help – sialfa Jan 17 at 9:35
  • the function only calls the components to mount the Product page, you can: remove, modify each part of the product page . function custom_woocommerce_before_cart(){ // Your Custom content} add_action( 'woocommerce_before_cart', 'custom_woocommerce_before_cart', 10, 1 ); – Younes.D Jan 17 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.