Basically I'm trying to make woocommerce work with my theme.


Header doesn't show up on product page and the css is kinda bad

I'm sorry if the post is long, when I ask something people always ask for more detail.

So far what I've done: -Declared support in functions.php

function satelite_add_woocommerce_support() {
    add_theme_support( 'woocommerce' );
add_action( 'after_setup_theme', 'satelite_add_woocommerce_support' );

-Used hooks to hook into content (possible mistake here)

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

add_action('woocommerce_before_main_content', 'satelite_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'satelite_wrapper_end', 10);

function satelite_wrapper_start() { 
    echo '<div id="post">';
function satelite_wrapper_end() {
    echo '</div>';

I said possible mistake here because of this line

echo '<div id="post">';

In the official documentation it said to adjust the markup so it fist my theme, me not really knowing what to do and seeing as "main" as suggested didn't work tried a bunch of options and concluded that "post" kinda works. When I say didn't work I mean that none of the css worked as expected, the page had no margins, etc.

The Main Problem

On my products page, when I use define the product type as a normal woocommerce one, the header shows, although some of the css still doesn't work, for example the header overlaps the image. Now we come to the main problem, when I define the product as a rental type it has some of the same problems as before and the header doesn't show. Here are the examples:

[https://bosniabayti.com/product/audi-a6-copy/][1] - Normal woocommerce product type [https://bosniabayti.com/product/audi-a6/][2] - RnB woocommerce extension product type

I've noticed when using inspect element that header-visible class is missing on the second type but I don't know how to add it and I want to know if I implemented woocommerce right by using "post".

If anyone needs and further files, feel free to ask.


Your observation is correct. If you add "header-visible" class to body of https://bosniabayti.com/product/audi-a6/, then the header is visible similar to https://bosniabayti.com/product/audi-a6-copy/

Screenshot of "header-visible" class added to <body> tag

| improve this answer | |
  • Thank you for the quick reply, do you know where and how to add? – sai Jun 14 at 10:52
  • You should search for "<body" tag in your code and append " header-visible" class before the tag ends ">". – ViralP Jun 14 at 11:01
  • Thanks a lot :) – sai Jun 14 at 14:19

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.