Seahawksean

@ninnetje,

I found a solution that worked for me!!!

It involves simply making your own custom sidebar just for the Woocommerce pages. You can find the answer here in this forum thread.

Again, as long as you have the shop template files in your child theme folder and unhooked the Woocommerce container div and the woocommerce sidebar in the single-product.php, etc. files you can just follow the steps in this thread.

Good luck. I hope this is what you were looking for.

Oh, and a note: When making the sidebar-shop.php file be sure to add <?php to the beginning of the code provided in the thread. It was mistakenly omitted. The upload this file to your theme directory on the same level as your functions.php file.

@ninnetje,

I think I’m having the exact same issue as you using the Customizr theme. I’m currently trying to find a solution. I’ll let you know if I do.

I’m assuming you’ve moved the woocommerce product/category/archive templates into your child theme woocommerce folder and created you custom template. If not, see here for more info.

Also, so you know I’ve tried the Woosliders plugin to solve this problem but it had no affect.

Hope some of this helps.

@miocene22 and @rhonz10,

Could you please elaborate on how you fixed this issue?

I have my single product page laid out the way I want to by altering a copy of the single-product.php in my theme folder. The only problem is that the sidebar is displaying the “search for:” search bar, pages, categories, and archives widgets, yet none of these widgets are currently placed in any of my theme’s sidebars. I can’t figure out what file these are being called from.

https://www.biologydesign.com/SarahCHanson/product/accretion-1/

I’ve unhooked the woocommerce sidebar and tried adding a hook for my theme’s sidebar, tried calling the sidebar in the single-product.php file, everything. Everything works as it should, except this sidebar issue.

If I could just get one of my theme’s sidebars to display, I could work with that. I’m just not 100% sure how the two of you went about fixing this issue with adding “shop sidebars into your function.php file”.

And I completely agree that Woocommerce should include their own sidebar within the plugin. That was first thing I looked for after installing the plugin and was stunned that their wasn’t one. I knew I was going to cause me more work.

Thank you in advance for any assistance you can provide.

NEVERMIND!!! I figured it out. So we want to be web designers? LOL. All that lack of proper rendering was because of one little } that I forgot to include in my child css. That has got to be the most frustrating part of web design.

I would like to be able to do it for larger browser sizes (non-mobile). I understand that the purpose of this functionality is for mobile use, which makes perfect sense. But I figured there has got to be some workaround using jQuery or js which would toggle between desktop and mobile mode.

If it’s a simple solution, I’d use it. If it’s more complicated and don’t feel the time spent to implement is worth it, I can certainly live with the original functionality.

Yeah, I know what browser/screen sizes he has in his media queries and figured out that issue per my “explaination” above, but I was trying to confirm the default width in the native css. The largest .container size I see is 1170px and the suggested slider image size is 1170×500 per the dashboard instructions. However, I also saw on the customizr website (or somewhere else) that suggested slider image size is 1200×500. So not sure which one is the true default width. I was just wanting to set a max-width for the wrapping container, so I’m not having to design for browser resolutions 1900 and above.

@joethebaker, it looks like your main menu is in the site-description. Not sure if that was intentional on your part, but in the default theme the main menu has it’s own container which only needs to be moved by styling it in your CSS.

<div class="nav-collapse collapse">

                    <?php wp_nav_menu( array( 'theme_location' => 'main' , 'menu_class' => 'nav' , 'fallback_cb' => array( $this , 'tc_link_to_menu_editor' ), 'walker' => tc__ ( 'header' , 'nav_walker' )) );  ?>

                  </div><!-- /.nav-collapse collapse -->

Try opening the default copy of the class-header-menu.php file and looking at the arrangements of the div and seeing where the above php code is located.

I used the site-description element to hold my search bar since I’m not using the tagline on my site. (https://www.biologydesign.com/SarahCHanson).

This is the code for the tag-line:

<h2 class="span7 inside site-description"><?php bloginfo( 'description' ); ?></h2>
                  </div>

All you have to do is replace <?php bloginfo( 'description' ); ?> in the above code with, `<form method=”get” id=”search_form” action=”<?php bloginfo(‘home’); ?>”/>
<input type=”text” class=”text” name=”s” value=”SEARCH” >
<input type=”submit” class=”submit” value=”” />
</form>`

@mgazzar, my search bar is working fine (just double-checked it), so not sure why yours is not. And just in case, remember, you need to have content to search for.

If you could include a link to your site, then myself and others trying to help you could search for the problem via Firebug.

In the meantime, what file did you put the above code in and is it in your child theme?

You’ll find a very easy to follow explanation how to incorporate Woocommerce into any theme here:
https://docs.woothemes.com/document/third-party-custom-theme-compatibility/

I forgot to mention that I did also organize the queries smallest max-width to largest, from top to bottom. This did force some changes in the right direction as well.

However, there were still some queries that were being overridden and discovered that there is a rhyme and reason to the order of the queries in the original skin css. It’s because of the cascading.

At max-width 980px, the mobile styling kicks in. My code was

@media screen and (min-width: 768px) and (max-width: 979px) {
    .navbar-inner .social-block {
        padding-left: 45.5%;
    }
}
@media screen and (max-width: 980px) {
     .navbar-inner .social-block {
        padding-left: 35.6%;
    }
}
@media screen and (min-width: 981px) and (max-width: 1024px) {
    .navbar-inner .social-block {
        padding-left: 38.5%;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1169px) {
     .navbar-inner .social-block {
        padding-left: 46.5%;
    }
}

but was still applying the (max-width: 980px) query. I realized that padding-left: 46.5% in (max-width: 979px) was now higher than (max-width: 979px). So, because of the cascading and the window was smaller that 980px, it was rendering the (max-width: 980) query. So, I just had to move a copy of the (max-width: 979px) query between (max-width: 1024px) and (max-width: 1169px) so that the values are still in descending order.

@media screen and (max-width: 980px) {
     .navbar-inner .social-block {
        padding-left: 35.6%;
    }
}
@media screen and (min-width: 981px) and (max-width: 1024px) {
    .navbar-inner .social-block {
        padding-left: 38.5%;
    }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
    .navbar-inner .social-block {
        padding-left: 45.5%;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1169px) {
     .navbar-inner .social-block {
        padding-left: 46.5%;
    }
}

Now it makes perfect sense.

Thanx ElectricFeet. I think that did the trick. I should have just done that from the get go since I was going to have to eventually anyway. Not sure why there were overlaps though, since I just copied and pasted the queries over from the skin css. Granted it was like 2 AM when I did it and maybe I duplicated a couple in my haze.

Also, I noticed there were a couple of different sets of queries in the skin css and I did copy all of them so perhaps a couple conflicted with each other.

Also, just to make sure, the default width is 1170px, whereas the main native css is coded for that width. Correct? The largest px width of an element I could find in the skin css was 1170px, so I’m assuming that’s right.

Ahoetomo,

I think I have the information you’ve been looking for.

If you want to change or remove the copyright information in the white footer section (main-footer) you will find the code you need to change in the class-main-footer.php file. Copy this file (found in ../customizr/parts/) and paste it in a “parts” folder that you create within your child theme and edit said copy.

At the bottom you will see this code:

<div class="span4 credits">
	    	<?php
		    	$credits =  sprintf( '<p> &middot; &copy; %1$s <a href="%2$s" title="%3$s" rel="bookmark">%3$s</a> &middot; Designed by %4$s &middot;</p>',
					    esc_attr( date( 'Y' ) ),
					    esc_url( home_url() ),
					    esc_attr(get_bloginfo()),
					    '<a href="https://www.biologydesign.com">BIODesign</a>'
				);
				echo apply_filters( 'footer_credits', $credits );
			?>
		</div>

If you want to just change the “Designed by” company info by changing '<a href="https://www.themesandco.com">Themes &amp Co</a>' to include your URL and company name.

Also, if you want to add your email you can just add another a tag behind the original. Be sure to keep in within the one set of ‘ ‘ you see above.

Lastly, if you want to get rid all the copyright info you can just delete this line:
add_action( '__credits' , array( $this , 'tc_footer_credits' ) , 10 , 2); which is at the top of this same file.

Hope this helps.

Thank you all for the replies!.

@rdellconsulting, I use Firebug and it’s indicating that the styling is being pulled from blue.css. And yes, I really don’t want to use the Custom CSS. There’s something glitchy about it.

@andrew Nevins, I was even using long strings of selectors trying to give it more specificity but there was still no result.

@electricfeet, thank you! It helps to have a noobie’s eyes sometimes! That’s why I encourage them to participate in these forums even if they are still learning. You found the issue! I forgot // sometimes doesn’t work. I changed the comment to enclose them in /* */ and it is now rendering the code from the child style.css. Thank you again!!!

Hi Mgazzar,

Today I just started a website using Customizr theme and also wanted to replay the tagline with a search bar and figured it out.

Do the following:

1. Go to Appearance > Editor from you Dashboard.

2. Assuming you are using a child theme, step #1 will direct you to your child css stylesheet. You will have to access the parent php files by selecting Customizr from the “Select theme to edit” dropdown. This will pull up all the parent files.

3. Open the class-header-menu.php file. You will see the elements for your social icons and the tagline.

4. Remove <?php bloginfo( 'description' ); ?> from between withing the h2 tag.

5. Replace it with the following code:

<form method="get" id="search_form" action="<?php bloginfo('home'); ?>"/>
       <input type="text" class="text" name="s" value="SEARCH" >
       <input type="submit" class="submit" value=""  />
</form>

6. Then make any styling changes in your child css.

Hope this helps.

Thank you for the reply Brad. If my theme isn’t verifying whether comments are enabled or not then why does the Comments field appear on some badges (plugin examples) but not on others (one I’ve created)? That’s the most confusing part for me.

And if it turns out that I do need to include a Discussion metabox to the badges do I do that in the metaboxes.php file within the BadgeOS plugin?

Thanks again.

Thanks Michael for the reply. I don’t see any option for enabling or turning off commenting (other than adding the “submission” form which works fine) in the badge settings. All the settings are the same in the ones I create and the examples that came with the plugin, yet mine don’t show the comments field while the examples do.