Support » Plugin: WooCommerce » Sidebar sitting below content on product page.

  • Resolved imtylerporter


    I am using the Lucid Theme from .

    After installing woocommerce to my theme my sidebar dropped into my footer. With a little research I was able to use hooks to raise my side bar back into the proper space. However, the styling in my footer is now not showing properly. This is the code I placed into my functions.php file:

    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', create_function('', 'echo "<div id=\"main-area\">";'), 10);
    add_action('woocommerce_before_main_content', create_function('', 'echo "<div class=\"container\">";'), 10);
    add_action('woocommerce_before_main_content', create_function('', 'echo "<div id=\"content-area\">";'), 10);
    add_action('woocommerce_before_main_content', create_function('', 'echo "<div class=\"clearfix\">";'), 10);
    add_action('woocommerce_before_main_content', create_function('', 'echo "<div id=\"left-area\">";'), 10);
    add_action('woocommerce_after_main_content', create_function('', 'echo "</div>";'), 10);

    With this code the page is still showing a little screwy.

    Here is how it should look:

    Here is how the shop page looks now with the messed up footer:

    Any help is greatly appreciated!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Roy Ho


    Not too sure what you mean “messed up”? I clicked both links and they look identical to me?

    There are actually not identical. As the products do not sit in the content body properly.

    I ended up deleting all code out of my functions.php then I duplicated my page.php file, renamed it woocommerce.php and uploaded it to my theme folder.

    I then Deleted the code:
    ‘<?php get_template_part(‘loop’, ‘page’); ?>’

    and added:
    ‘<?php woocommerce_content(‘loop’, ‘page’); ?>’

    That is where both links currently stand. It’s not pretty, but it functions.

    Roy Ho


    I am confused…You asked us to look at the footer…That’s what I was referring to.

    Right, at which point I wasn’t getting anywhere with the code I had originally posted so I updated it with the code above. As instructed on the Woocommerce support docs, I tried both methods, first the hooks now the duplicate of the page.php.

    Now, it’s not sitting in the body properly.

    Roy Ho


    Ok can you point out exact what the issue is so I can see what you’re seeing so I can help you?

    You bet, I appreciate the help!

    Here is a screenshot:

    I would like to be have my products sitting in the body like my video is in my about section. I believe the div id for that area is “left-area.” This is the code I have plugged in on my woocommerce.php

    ‘<?php get_header(); ?>

    <div id=”content-area” class=”clearfix”>

    <div id=”left-area”>
    <?php get_template_part(‘includes/breadcrumbs’, ‘page’); ?>

    <?php woocommerce_content(‘loop’, ‘page’); ?>

    <?php if ( ‘on’ == et_get_option(‘lucid_show_pagescomments’) ) comments_template(”, true); ?>
    </div> <!– end #left-area –>

    <?php get_sidebar(); ?>
    </div> <!– end #content-area –>

    <?php get_footer(); ?>’

    Thanks again!

    Roy Ho


    Assuming what you want is that box around the content like the one with the video, then it is because you’re missing <article> tag with the class of “entry”. The class “entry” is what is giving that style.

    So in your case all you need is wrap the “LOOP” with either <article class=”entry”> or a <div class=”entry”> and don’t forget to close it after the “LOOP”.

    That’s exactly the class that I was missing! Thank you for you help!




    can you give me the exact code u used to make is usable.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sidebar sitting below content on product page.’ is closed to new replies.