Storefront Themes, “Elegance” theme, move cart and search to top of the page
Ok about time I wrote some step by step instructions for this I guess. You will end up with this http://thecraftcircle.com.au/
You will need to maintain the PHP file when there are theme updates so keep a copy of it and what changes you made. If you have never done this see the Tools note at the end of this post.
This will move Your Cart AND Search
On to the good stuff, you need to edit header.php which is in your theme folder. The following is for the 1.4.2 version of the theme but it should be very similar in other versions. First make a backup copy of this file somewhere!
You are going to do a CUT and PASTE.
<body <?php body_class(); ?>>
<div id="wrapper">
<div id="header" class="container_24">
<div id="logo" class="grid_24">
<?php if ( $storefront_options['storefront_logo'] ) { ?>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>"><img src="<?php echo $storefront_options['storefront_logo']; ?>" /></a>
<?php } else { ?>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>"><img class="title" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a>
<?php } ?>
</div><!-- /#logo -->
<div class="general-divider nav-top-general-divider"></div>
<div id="main-nav-container" class="grid_24">
<div id="main-nav-starter"></div>
<?php storefront_mainnav(); ?>
<?php if ($storefront_options['storefront_nav_cart'] == 'true' && function_exists('wpsc_cart_item_count') ) { ?>
<div id="main-nav-cart">
<a href="<?php echo get_option('shopping_cart_url'); ?>">
<div class="shopping-cart-wrapper-before"><span class="storefront-icon storefront-cart-icon">\</span><?php _e('Your Cart', 'storefrontthemes'); ?> (</div>
<div class="shopping-cart-wrapper"><span class='cartcount'><?php echo wpsc_cart_item_count(); ?></span></div>
<div class="shopping-cart-wrapper-after">)</div><div class="clear"></div>
</a>
</div>
<?php } ?>
<?php if ($storefront_options['storefront_nav_search'] == 'true') { ?>
<div id="main-nav-search">
<div id="main-nav-search-wrap">
<?php $searchterm = $_GET['s'];?>
<form role="search" method="get" id="navsearchform" action="<?php bloginfo('url'); ?>/" >
<div>
<input type="text" value="<?php if(isset($searchterm)) {echo $searchterm;} else {_e('Search anything...', 'storefrontthemes');}?>" onfocus="if
(this.value==this.defaultValue) this.value='<?php the_search_query(); ?>';" name="s" id="s" />
</div>
</form>
</div>
</div>
<?php } ?>
</div>
<div class="clear"></div>
<div class="general-divider nav-bottom-general-divider"></div>
</div><!-- /#header -->
Find line 75, highlight that line and everything else up to and INCLUDING line 97. Cut that code block.
Note:
If you just want to move Cart cut line 75 to 83. If you just want to move Search cut line 84 to 97.
Go to this line which in this version is line 60
<div id="header" class="container_24">
At the end hit return 3 times to give yourself 3 blank lines after it. On the first add this
<div class="menu2-top-right">
On the next line paste the code you cut.
You should have one more blank line AFTER the code you pasted, close that new div you added there by adding this code
</div><!-- end menu2-top-right-->
If you did it right the line after that should be
<div id="logo" class="grid_24">
Close and save the file.
Elegance 1.4.5 Update
If you read the code above you will be able to make this work, none of the lines have changed. Their location has. So do a little searching in your code editor when you have a different theme version folks. For 1.4.5 you will cut lines 64 to 85. Then add the first new line of code after line 49, paste the cut code on the next line and finally add the second new line of code. The css is really up to you but to stick with the example styling for 1.4.5 you will need to add the 2 lines of addendum CSS below.
Now you need to style it.
The details of that are up to you of course. Here is some styling from the example site which you could alter to what you want. Add it to your custom.css file which is in your theme folder. If you have never done this see the Custom CSS note at the end of this post.
.menu2-top-right{
width:280px;
height:35px;
margin-left:8px;
margin-right:4px;
border: solid 0px 1px 1px 1px #000;
-moz-border-radius-bottomright: 10px 10px;
border-bottom-right-radius: 10px 10px;
-moz-border-radius-bottomleft: 10px 10px;
border-bottom-left-radius: 10px 10px;
float:right;
background-color:#CCC;
-moz-box-shadow: 3px 3px 6px #7f7f7f, 8px -10px 10px #7f7f7f;/*solid color shadow, no transparency for performance, works OK over solid color*/
-webkit-box-shadow:3px 3px 6px #7f7f7f, 8px -10px 10px #7f7f7f;
box-shadow:3px 3px 6px #7f7f7f, 8px -10px 10px #7f7f7f;
}
#main-nav-cart a:link, #main-nav-cart a:active, #main-nav-cart a:visited{color:#fff;}
span.storefront-cart-icon{color:#fff;}
/* remove border from shopping cart div in menu, remove right margin so it goes all the way to right edge of nav container */
#main-nav-cart {
list-style-position:outside;
position:relative;
z-index:100;
right:0;
float:right;
text-align: right;
margin-right:0px;
border:none;
}
Thanks to Shaun Doughty for some of the CSS contributed at Storefront Themes Forums.
Addendum CSS for version 1.4.5
/* remove border from cart link */
#main-nav-cart a {border:none;}
/* remove border from search form */
#navsearchform{border:none !important;}
Custom CSS:
This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes.
Tools:
Edit the PHP file with a code editor. You may also edit custom.css outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/
9 Comments
Pierre
September 6, 2013Hi Mark
Elegance 1.5.8 has a header.php that looks like it’s become shorter, and the “missing” code seems to deal with the cart.
do you know which file it’s moved to?
mgason
September 7, 2013Hi,
the code seems OK in 1.5.8. The cart code has been moved into a file but it seems to me you need only change header.php. I have not tested this but I believe you cut the lines from 62 to 75, including those 2 lines.
Then follow the instructions adding the 3 blank lines after line 47, and adding the 2 lines of code, then pasting what you cut in between. If you did it right the line after should be the one it says in the post.
The CSS should work. If you need to see the cart code ou will find it in a sub folder includes/theme-functions.php starting at line 507 but the wp-e-commerce relevant bit is at line 521 to 530
Pierre
September 17, 2013Thanks for the reply Mark. The last request from client before go-live is to change “Your Cart (n)” to “Your Bag(n)” but just changing header.php does not seem to do anything. I have opened quite a few other files and searched for “cart” but i’m not coming right.
I did this: I already had some code in my header.php to show “Your Cart (n)” in the header section. However, client wants it to say “Your Bag (n)”. i was able to change “cart” to “bag” in other places of the site but not the header. i found the following code in header.php and i changed the word cart to bag. see below where i put the word “Bag”
<a href="”>
\ (
)
If you could help i would really appreciate it. When i look and the site and click “inspect element” using chrome i can see the term “Your Cart (” and when i change it the site shows correctly. However, header.php isn’t changing it. where else should i be looking? this is driving me mad…
mgason
September 17, 2013Did you sort this out Pierre? I have been on vacation.
You can not post code in comments I am afraid, makes my site too vulnerable to attack.
The line of code you are looking for is in theme-functions.php which is in the sub folder “includes” in the storefront theme folder. In the original file for Elegance version 1.5.8 it is line 524.
Caitlin Everett
September 23, 2012Hey! Thanks so much for posting this! Great idea!!!
Have started to implement the php part of this, but am not seeing the text “search anything” in the search box anymore. Did you encounter this difficulty when editing yours?
mgason
March 2, 2012Ok folks when you read these remember it is for a particular version. Line numbers will change. I give enough code for you to identify what you need to do. If I say line 75 and it is not the same, then get that line and search for it in your code. Read the code even if you do not understand it do not just blindly cut and paste by line numbers.
Pierre
March 2, 2012Hey Mark
Thanks for this
Trying this on elegance 1.4.5 but things seem to be going wrong. i get 2 headers after the header.php change and after the css it goes even more wrong.
could you help with an 1.4.5 update please?
thanks
Pierre
Anonymous
March 2, 2012Hi,
I will try and put one together soon.
Neil Warren
December 5, 2011I really appreciate what you post. You have a new subscriber now.