CSS Customizations of a Premium WordPress Theme

When you buy a website theme or template the most common issue is that you still want to customize it further.  Depending on which theme you buy can heavily depend of the amount of customization that you need to do.  A client of mine had some tweaks that they needed done recently on a theme that was purchased called Moderno developed by bavotasan.  Have a look at the original design below…

Original Theme

Normally when you have a website theme the CSS is all in one nice and neat place however that wasn’t the case with this theme and simple knowledge of CSS is not enough.  For this theme, I had to get into the PHP and is smartly coded to stop newbies and novices from really customizing this theme.  The first thing that I did was edit the CSS for the sidebar and image used for the shadow effect and flipped it over to the other side.  Have a look…

The next and final thing that needed editing for this styling was to have the top dark grey bar so that it would align with the post area on the left hand side and give the layout a cleaner look.  Check it out…

This was a fun and easy project that took a few hours of work to accomplish but the redesign of the visual layout of the page looks great too!

How to Hide Pricing on Product and Category templates using Shopp

This is a pretty common problem that someone came to me with to help them solve their issue with using the Shopp plugin and not being able to hide pricing on products that had a “$0.00″ value associated to them.  Some common use cases that you can address by using this workaround include…

  • Having “Call for Pricing” field visible
  • Hiding or all together removing the price from a product
  • If you have special or bulk pricing options in an item – normally this means that you want people contacting you for bulk order pricing or a wholesale price

I’ll show you the logic that you can use to implement on both of these use cases involving the Shopp plugin for WordPress so I hope that you enjoy this “how-to” article.

I wanted to address a problem that I helped solve for a client of mine recently where they wanted to remove (aka hide) the price of a $0.00 product.  They were using the Shopp plugin for WordPress which I’ve blogged about a few times before on here.  Feel free to read my articles about customizing for the Shopp plugin…

  1. Using “tagged” tags on the Product.php Template in Shopp
  2. How to Add Descriptions to Category Layouts in Shopp
  3. How to Customize the Shopp Checkout.php Template for WordPress

… Okay, so getting back to the issue, I had to find a way to disable price if the amount was for a $0.00 product.  Normally there are a number of reasons why a product would be marked as $0.00 on an ecommerce website including…

All of these are good reasons as to why you might want a price to be hidden or unavailable on your ecommerce site.  One option that was initially suggested was to use the “tagged” tag and for all intensive purposes this would have been a good workaround except that you cannot write logic in the “tagged” tag to accommodate this.  I wrote an article about using the tagged tag when working with the Shopp ecommerce plugin for WordPress so please read it if you are interested in more information about using this functionality.

The “tagged” tag would be a good option if you want to tag a product as “callforprice” and it would spit out “Call for pricing” on the product however in this case because we are looking at prices themselves this simply wouldn’t work because the support for using conditional statements like “if then else”.  I came up the following code to look at the price to determine if a $0.00 product existed and if it did then apply a certain behaviour to it depending on the condition that was met…

//Looks to see if the price is equal to $0.00

<?php if (shopp(‘product’, ‘price’,'return=true’) == “$0.00″) {

//Shows nothing

echo “”;

} else {

//Else, if the $0.00 price is not met then show price

shopp(‘product’,'saleprice’,'starting=from’,'return=true’);

}

?>

As you can see it’s pretty straight forward and you can see it in action below with some before and after screenshots for customizing the product.php template for Shopp…

Before adding the coding

After adding in the code

Some other things that this logic could also address are looking at products between a specific range of prices or greater then a specific value like high value items that you want to have people call you about before selling to your customers.  There are a number of scenarios where it would make sense to use logic like this on your ecommerce store.  Now, for the other part of this article I wanted to talk about how you can apply similar logic to the category.php template in Shopp to do the same thing because chances are if you wanted to hide the price on the products you’d want to hide them in the category view as well.

Customizing the Category.php template to hide the price in Shopp

Customizing the Category.php file for the Shopp Plugin was a little trickier because you need to use if statements and do nested if statements inside to get it working just right.  Check out the coding below to see what I am talking about…

//Looks to see if the price is equal to $0.00

<?php if (shopp(‘product’, ‘price’, ‘return=true’) == “$0.00″) {

//Shows nothing

echo “”;    }

else {

//Else, show the pricing on categories

shopp(‘product’,'saleprice’,'starting=from’);    } ?>
<?php if (shopp(‘product’,'has-savings’)): ?>

<p>Save <?php shopp(‘product’,'savings’,'show=percent’); ?></p>

<?php endif; ?>

Have a look at the finished product below to see what the finished look is like when customizing the Category.php template in the Shopp plugin for WordPress

Before adding the coding

After applying the coding

If you’ve bought the Shopp ecommerce plugin for WordPress what I can tell you is that there are many ways to accomplish a lot of functionality requests if you have the time, ability to code and patience but if you’ve got questions feel free to post them below and we’ll see if we can’t answer a some of them.

Customizing ecommerce websites is sometimes not the easiest thing you can do but regardless of what your ecommerce website runs on whether its the Shopp ecommerce plugin for WordPress, Magento or something else, if you know enough about coding or know someone who can help you then you can accomplish almost anything!

 

Mia’s Innovative Gifts

Click here to view the live website

Project Bio:

Mia’s innovative Gifts approached us with plans to launch a new website by December 2010 to build its ecommerce business.  They were looking for a website that allowed them to accept payments using Credit Cards including VISA, MasterCard, AMEX and PayPal for selling their gift baskets using the PayPal Pro payment gateway.

The client also wanted a website that was unique, stylish and reflected their business’ vision, values and branding among their competitors.  They give us a color palette of blues, pinks and soft tones that we used to design a website that properly reflected their gift basket business.

We also developed the functionality of their site using HTML and CSS for styling and layouts, PHP and mySQL to develop the architecture of the website, customized the checkout process to suite their business’ specific needs, SSL (Secure Socket Layer) encryption to make sure the website is secure for people and content and images to develop the content for the website.

Timeline: 4 weeks

Type of Project: ecommerce web development, payment gateway integration

Technologies used: PHP/mySQL, WordPress, Photoshop, HTML, CSS, JavaScript, PayPal Pro, SSL Encryption

Additional Screenshots:


MiasInnovativeGifts.com Logo


Product Page Layout


Category Page Layout


Shopping Cart Page Layout


Checkout Page Layout

Arnold Sinden & Roth

Visit Live Website

Background: When Arnold Sinden and Roth approached us about having a website built for their needs to have a web presence available they had said that they wanted a website that was neutral, fresh and had minimal graphics.  The main goal of the website was to provide information about how Arnold Sinden & Roth does business, who they’ve worked with and the services they provide.  With some revision and further discussions we finalized a design that met their needs as an organization.

Timeline: 9 weeks from start to finish

Type of Project: website development and design, corporate/information design, mySQL database development

Purpose: To increase the exposure of their human resource consulting business online and provide information about their business quickly, cleanly and concisely

Technologies used: PHP, mySQL, CSS, HTML/XHTML, JavaScript, mockups, content development, navigational usability

Synergetic Technologies Inc.

FP_Synergetic_project01

View the live site

Background: When this organization approached us their current website needed a new and fresh look but also a web design that was focused on the company’s goals of promoting and providing information about their services which meant that we had to learn about their business and understand the terms and nature of this business to produce a website that was inline with this company.  Through detailed communication and meetings we were able to understand and develop a website that had their business in mind.

Timeline: 6 weeks from start to finish

Type of Project: business analysis of online business presence, website redesign, corporate/information design

Purpose: To increase the goal lead generation in the form of email and phone calls and act as an information brochure for interested parties that the company can use to promote their Furnace and Process Heating solutions effectively.

Technologies used: PHP, mySQL, CSS, HTML/XHTML, JavaScript, grayscreen prototyping, content development