WP-E-Commerce Tip: Change the path to the add to cart image

You’re using the theme named iShop.
You’ve moved your themes to the /wp-content/uploads/wpsc directory.
Now you want to get the add to cart image from /wp-content/uploads/wpsc/iShop instead of /wp-content/plugins/wp-e-commerce/themes/iShop
Once this is done, upgrading the plugin won’t get rid of your add to cart image.

products_page.php /wp-content/uploads/wpsc/themes/iShop/products_page.php
Please backup your files before editing!

Find lines 231 to 233

[php]
<?php else: ?>
<input type=’image’ src='<?php echo WPSC_URL; ?>/themes/iShop/images/buy_button.gif’
id=’product_<?php echo wpsc_the_product_id(); ?>_submit_button’
class=’wpsc_buy_button’ name=’Buy’ value="<?php echo __(‘Add To Cart’, ‘wpsc’); ?>" />
<?php endif; ?>[/php]

Change to:

[php]
<?php else: ?>
<?php $upload_dir = wp_upload_dir(); ?>
<input type=’image’ src='<?php echo $upload_dir[‘baseurl’];?>
/wpsc/themes/iShop/images/buy_button.gif’
id=’product_<?php echo wpsc_the_product_id(); ?>_submit_button’
class=’wpsc_buy_button’ name=’Buy’ value="<?php echo __(‘Add To Cart’, ‘wpsc’); ?>" />
<?php endif; ?>[/php]

single_product.php
Find lines 180 to 183
[php]
<?php else: ?>
<input type=’image’ src='<?php echo WPSC_URL; ?>/themes/iShop/images/buy_button.gif’
id=’product_<?php echo wpsc_the_product_id(); ?>_submit_button’
class=’wpsc_buy_button’ name=’Buy’ value="<?php echo __(‘Add To Cart’, ‘wpsc’); ?>" />
<?php endif; ?>[/php]

Change to
[php]
<?php else: ?>
<?php $upload_dir = wp_upload_dir(); ?>
<input type=’image’ src='<?php echo $upload_dir[‘baseurl’];?>
/wpsc/themes/iShop/images/buy_button.gif’
id=’product_<?php echo wpsc_the_product_id(); ?>_submit_button’
class=’wpsc_buy_button’ name=’Buy’ value="<?php echo __(‘Add To Cart’, ‘wpsc’); ?>" />
<?php endif; ?>[/php]

Now all you have to do is upload your add to cart image to the images folder of your theme in your theme’s new location.
If you’re using a .png or .jpg image file type or an image with a different file name than buy_button.gif you have to make sure to edit the code to use the image file name or type.

Marketplace
products_page.php at lines 235 to 238
single_product.php at lines 182 to 184
Tip about the Marketplace theme: it uses atc.gif as the add to cart image, not buy_button.gif.

Default
Tip about the default theme: it uses input type=’submit’ instead of input type=’image’ which is what the 2 other themes use.
So if you’re already using some CSS to style the button I would leave this code alone since upgrading won’t affect your theme.
But if you want to use an image go ahead and edit the files:
products_page.php at lines 233 to 235
single_product.php at lines 179 to 181

New WP-E-Commerce Site Just Finished Today

This is for Tagsmith, a custom leather luggage tag maker in Los Angeles,CA. I’m going to be going on a trip soon myself (yay!) and it makes perfect sense to get a hot pink leather luggage tag for my bag so it will stand out amongst the kazillion other black bags on the baggage carousel…So check out his new site and buy some tags. Also that little plastic window that covers your address won’t turn yellow. Very important.

**Edit Alert** Wednesday, May 12

Turned out that was a premature announcement. After I posted this my client asked me to revise the design… It’s not uncommon to be asked for revisions and its not uncommon to miss the design mark on the first or second try. Luckily I got it right on the second try. Check out the results:

www.tagsmithoriginals.com

Securing a WordPress Page with SSL

Oh, this again?
Yes, this again. You know its important so just be patient with me. In fact, not much is more important when running an online shop than making sure the page where folks will be submitting their credit card numbers is secure.
The 1st thing to do is check if your host sells SSL Certificates. Bluehost and Hostmonster as well as many others not only sell you an SSL certificate they also install it for you. You may need to purchase a Dedicated IP Address as well. The costs are negligible considering having this security will translate into more sales. So cough up some $ for overhead, will you.

If you run an online shop and use WordPress you probably also use WP-E-Commerce. So after you have bought the SSL Certificate go to Products>>Settings>>Admin.
Find this: “The location of the shopping cart: ” In the text field next to this line of text will be a URL that starts with http. Add an “s” to the end of http. Click Update.

Install HTTPS FOR WORDPRESS plugin. Activate.

So here comes the tedious bit. Go to the check out page of your shop. Does the addressbar turn blue? Does the lock icon in the lower right hand of your desktop remain unbroken?
You are all set.
**Sorry, this info is completely Firefox-centric ( dear, dear Firefox…). Ahem. OK, In Safari nothing happens to the addressbar and there is no lock icon in the lower right hand of the location bar unless you have paid a lot of money for an extended validation certificate and then chances are you are not using it on a wp-e-commerce shop. If you use the lower cost certificate just be happy that you get to the secure page without Safari yelling at you that it is not using a valid certificate.

If there is no blue addressbar(Firefox) or Internet Explorer tells you the page contains secure and insecure items and then asks you if you want to show the insecure items,
we will have to view the source of our page. We’re looking for any URL that isn’t https. For me it was the stylesheet of the NextGen Gallery plugin, the stylesheet for the WP-Slimbox2 plugin and its .JS files and the Sociable stylesheet. You can copy the links and paste them into a text file to save for later.

So what I did next was turn off the stylesheet for the Sociable plugin (you can do this on its Options page) and wrote my own style and put it in my main theme stylesheet. One less URL to worry about. Then I went to Plugins>>Editor and I brought up NextGen to edit. I commented out everything to do with loading the stylesheet for the Gallery Plugin like this :
[php]function load_styles() {

// check first the theme folder for a nggallery.css
//if ( nggGallery::get_theme_css_file() )
//wp_enqueue_style(‘NextGEN’, nggGallery::get_theme_css_file() , false, ‘1.0.0’, ‘screen’);
//else if ($this->options[‘activateCSS’])
//wp_enqueue_style(‘NextGEN’, NGGALLERY_URLPATH.’css/’.$this->options[‘CSSfile’], false, ‘1.0.0’, ‘screen’); [/php]

Then I pasted the link into my header.php file like this ( a good place is right after the link to your theme stylesheet) :

[html]<link rel=’stylesheet’ id=’NextGEN-css’ href=’/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0′ type=’text/css’ media=’screen’ />[/html]

And now there was one more less URL to worry about.

Next I opened WP-Slimbox2 in the Plugin Editor. I found this:
[php]echo ‘<script type=’text/javascript’ src=’/blog/wp-content/plugins/wp-slimbox2/javascript/slimbox2.js?ver=2.02′></script>’;
if($options->get_option(‘resizeEasing’) != ‘swing’) wp_enqueue_script(‘jquery_easing’);
//wp_enqueue_script(‘slimbox2_autoload’);[/php]

Where it says echo I deleted the link. Then it just read:
[php]echo ”></script>’;
if($options->get_option(‘resizeEasing’) != ‘swing’) wp_enqueue_script(‘jquery_easing’);
//wp_enqueue_script(‘slimbox2_autoload’);[/php]
I pasted the link to the script into my header.php before the < / head> tag.

[html]<script type=’text/javascript’ src=’/blog/wp-content/plugins/wp-slimbox2/javascript/slimbox2.js?ver=2.02′></script>[/html]

**Seems like WP-Slimbox2 doesn’t do anything if used with the wp-e-commerce plugin. Its a javascript conflict, I guess.

So that was the hard part. Then I went back to the check out page and refreshed the page. The addressbar stayed blue and the lock icon did not break.
Out of 13 active plugins, 3 had calls to scripts or stylesheets in header.php that were not made https. That’s pretty lucky. You may have many more plugins to edit before your page will remain secure. Hopefully even though this is tedious it will be worth it to be able to have a secure page.

Admin SSL/HTTPS for WP
I used to recommend the Admin SSL plugin for WP. Because it used to turn all links to https and if you clicked away from the secure page it used to redirect back to regular http.
Well, it doesn’t seem to working that well anymore and it can cause a bit of a headache if you de activate it then re activate it depending on your host environment/settings. I’m talking about those endless redirection loops errors that rendered your website inoperable. They were fun. So on one side we have kind of a heavy duty plugin that can render your site useless but that doesn’t do what we need it to do. And on the other side we have a plugin that doesn’t quite do everything we need it to do (transform all links to https)
but will not adversely effect your website. *HTTPS for WORDPRESS didn’t used to be able to redirect back to regular http if you clicked away from the secure page. Now it does.

*This is still true, unfortunately. The plugin cannot redirect links out of SSL. My 1st writings were based on results from only one site – a mistake to make assumptions based on only one site.

After testing on 2 other websites I’ve concluded that the 1st site is the exception, not the rule.

A workaround is to make sure that at least the home link (which is usually added in a theme above the page menu function) or any other links for navigation, like in the sidebar, if you’re not using the wp page menu function, use full paths for links: i.e.: http://www.domain.com/ instead of /page. So that if someone chooses not to check out or send the form and clicks another link to leave the page that link will be http. That’s a definite way to get out of SSL. My further tests showed me I don’t have to make all links use https. Just CSS JS and images need to use https for the browser to show the secure page is ok.

This seems to be ok with at least Firefox,will test in IE. I had tested in IE but not with full path linkage in my menus.

But it still doesn’t cause any problems if you deactivate it. So it gets my current vote.

Note:
If you ever upgrade any of the plugins you edited you’ll have to do this all over again. So save copies of the files you edited so you can find where to edit more easily.
Of course you could say that neither plugin really “works” because you have to do stuff like this to get them to secure a page. But that’s life.

Redesign Your Product Pages For WP-E-Commerce.

Update!

If you are experiencing issues in IE7 or 8 – product boxes display in a vertical row instead of side by side it is because div.productdisplay_group is set to [css]height:auto;width:100%;margin:0;padding:0;[/css] Since this is the containing div for the following 2 divs: textcol_group & imagecol_group it is width:100% causing the vertical display.

TRY THIS (Proven Fix):

[css]
/*Group Style*/
/*Feel free to make the boxes shorter or wider or taller.*/
div.productdisplay_group {
float: left;
position: relative;
/*Feel free to make the boxes shorter or wider or taller.*/
width: 205px;
height: 460px;
margin: 0 4px 0 8px;
padding: 10px 4px 0 4px;
}
/*Group Style*/
div.textcol_group {
width:100%;
margin:0;
padding:0;
}
/*Group Style*/
div.imagecol_group {
text-align: center;
display: block;
margin: 5px auto 5px auto;
}
[/css]

I have tested this fix on a user’s site who asked me for help -in IE7 because that is the version I have on my Windows box. If you still see issues after trying this fix on IE8 Please let me know.

Read Original Post:

When the fabulous creators of wp-e-commerce released version 3.7+ they added the template engine to each theme making it possible to style the multiple products page and single products page independently of each other.

This makes it really easy for me and you to write our own styles for the multiple product page while keeping the single product page structure intact.
The Objective: To leave the single products page style intact while restyling the multiple product page.

To follow this tutorial please be using wp-e-commerce version 3.74 or higher. I don’t want to get blamed if you try this on an incompatible version. Thank you.

To follow this tutorial you must have a text editor. I like Crimson Editor (PC) and Textwrangler (MAC) because they show line numbers and have Search capability.

BEFORE YOU START
Please make copies of the files you are going to edit, especially if you have already made changes you quite like. If something goes very wrong you can then delete the problem files and re load the intact ones and we can all walk away from this a little sadder but perhaps a bit wiser.

Files we will be editing:
Your_theme.css (either marketplace.css, iShop.css or default.css)
Products_page.php

Open products_page.php.

Search for productdisplay
Rename to productdisplay_group

Search for textcol
Rename to textcol_group

Search for imagecol
Rename to imagecol_group

Save and re upload with ftp. Or use your filemanager in your cpanel..

Let’s start writing our own styles.
Open either default.css, iShop.css or marketplace.css. Find @ line 209
(assuming you have not edited before and the line #’s are still intact)

Find div.productdisplay {} Copy & Paste & rename to div.productdisplay_group {}
Find div.imagecol{} Copy & Paste & rename to div.imagecol_group{}
Find div.textcol{} Copy & Paste & rename to div.textcol_group{}

Remember the idea is to add more classes not to delete existing ones. We don’t want to wreck the single product page style.
Also we aren’t deleting the style rules in between the brackets,either. I just didn’t feel like copying it all here.

Your style sheet should now have :
div.productdisplay{}

/*Group Style*/
div.productdisplay_group {}

div.textcol{}

/*Group Style*/
div.textcol_group{}

div.imagecol{}

/*Group Style*/
div.imagecol_group{}

A very basic design:
[css]
/*Group Style*/
div.productdisplay_group {
height:auto;width:100%;margin:0;padding:0;
}

/*Feel free to make the boxes shorter or wider or taller.*/
/*Group Style*/
div.textcol_group {
float: left;
position: relative;
/*Feel free to make the boxes shorter or wider or taller.*/
width: 205px;
height: 460px;
margin: 0 4px 0 8px;
padding: 10px 4px 0 4px;
}

/*Group Style*/
div.imagecol_group {
text-align: center;
display: block;
margin: 5px auto 5px auto;
}
[/css]
Save. Re upload with ftp. Or use your filemanager in your cpanel.
Now look at your shop page. (Refresh the page.) A lot of corrective tweaks can be made by making textcol_group wider, shorter, taller or narrower.

Continue reading Redesign Your Product Pages For WP-E-Commerce.