Boutique makes for a great foundation as an affiliate website. The problem is that it's set up as an eCommerce site. The following edits will re-structure Boutique into an affiliate site. This includes setting a currency symbol for all products, individual prices and affiliate links for each product, and changing the shopping cart options to affiliate links. This is all done without installing any eCommerce plugins. There are quite a few changes that need to be made in this tweak but if you want a beautiful affiliate theme, it's well worth the time.

Boutique uses posts to display products. To set up our first product, either edit the 'hello world' post or create a new one. Enter the name of the product in the title of the post. Beneath that, add a product description in the text area. Add a picture of the product using the Featured Image in the sidebar. Now we will start customizing. Scroll down to the Custom Fields section. We will be adding two custom fields: Affiliate_link and Price. Under Name, type 'Affiliate_link'. Under Value, enter the url of your affiliate link for this product. Example: 'http://www.amazon.com/product-id/affiliate-id'. This will be different for every product. Click the Add Custom Field button and now we'll enter the second custom field. Under Name, type 'Price'. Under Value, enter the cost of the product. Example: '6.99'. DO NOT enter the currency symbol ($). This will be added later. Click the Add Custom Field button and save or publish the post. The rest of the edits will be done in PHP and CSS files.

PHP

Locate the loop-single.php file in /themes/boutique/

Save an exact copy of this file to /themes/boutique-child/

Locate the following code near line 47:

</div> <!-- #et-slides-items -->
<span class="price-tag"><span><?php echo boutique_currency_sign(); ?></span><?php echo boutique_price(); ?></span>
<a id="et-single-left-arrow" href="#"><?php esc_html_e('Previous','Boutique'); ?></a>
<a id="et-single-right-arrow" href="#"><?php esc_html_e('Next','Boutique'); ?></a>
</div> <!-- #et-slides -->

Change it to this:

</div> <!-- #et-slides-items -->
<span class="price-tag"><span><?php echo '$'; ?></span><?php echo get_post_meta($post->ID, 'Price', true); ?></span>
<a id="et-single-left-arrow" href="#"><?php esc_html_e('Previous','Boutique'); ?></a>
<a id="et-single-right-arrow" href="#"><?php esc_html_e('Next','Boutique'); ?></a>
</div> <!-- #et-slides -->

This will add the '$' and include our custom price values on the product page. Next we'll change the 'Add to Cart' button to an affiliate link.

In the same file, locate the following code near line 57:

<?php the_excerpt(); ?>
<a class="single-addtocart et-shop-item" href="#<?php echo boutique_product_name('entry'); ?>"><?php esc_html_e('Add To Cart', 'Boutique'); ?></a>
<?php do_action('boutique_product_entry'); ?>
</div> <!-- end .item-description -->

And change it to this:

<?php the_excerpt(); ?>
<a class="single-addtocart" href="<?php echo get_post_meta($post->ID, 'Affiliate_link', true); ?>" target="_blank"><?php esc_html_e('Buy on Amazon', 'Boutique');?></a>
<?php do_action('boutique_product_entry'); ?>
</div> <!-- end .item-description -->

This will change the text and link on the 'Add to cart' button to 'Buy on Amazon', using the affiliate custom field we added earlier in the post to point to the affiliate link. You'll notice the words run off the end of the button. We'll fix that later with CSS.

If you have multiple affiliates like Amazon, iTunes, etc. you could do a few different things to output button text for the proper affiliate. For example, below I created an if statement that outputs button text based on the category. Any products under the category 'Apps' would output a "Buy on iTunes" button.

<?php the_excerpt(); ?>
<a class="single-addtocart" href="<?php echo get_post_meta($post->ID, 'Affiliate_link', true); ?>" target="_blank"><?php if (in_category('Apps')) {esc_html_e('Buy on iTunes', 'Boutique');}
else {esc_html_e('Buy on Amazon', 'Boutique');}?></a>
<?php do_action('boutique_product_entry'); ?>
</div> <!-- end .item-description -->

You could also create a custom field on each post with name 'Affiliate_name', enter "itunes" or "amazon" in the value field, and create an if statement based on that. 

Our next step will add the currency and custom field price values to other views.

Locate the functions.php file in /themes/boutique/

Locate the following code near line 270:

add_action('boutique_product_entry','boutique_product_entry_options');
function boutique_product_entry_options(){
global $post, $boutique_active_plugin_name;
boutique_popup_info('entry'); ?>
<div class="boutique_description_border">
<div class="boutique_description">
<h4 class="description-title"><?php the_title(); ?></h4>
<span class="price"><?php echo boutique_currency_sign() . boutique_price(); ?></span>
<div class="clear"></div>
<div class="entry-item-ratings clearfix"><?php et_boutique_display_rating(); ?></div>
<?php
if ( $boutique_active_plugin_name == 'wp_ecommerce' ) {
if(wpsc_the_product_additional_description())
echo wpsc_the_product_additional_description();
else
echo wpsc_the_product_description();
} else { ?>
<p><?php truncate_post(400); ?></p>
<?php } ?>
</div> <!-- end .boutique_description -->
</div> <!-- end .boutique_description_border -->
<?php
}

And change it to this:

add_action('boutique_product_entry','boutique_product_entry_options');
function boutique_product_entry_options(){
global $post, $boutique_active_plugin_name;
boutique_popup_info('entry'); ?>
<div class="boutique_description_border">
<div class="boutique_description">
<h4 class="description-title"><?php the_title(); ?></h4>
<span class="price"><?php echo '$' . get_post_meta($post->ID, 'Price', true); ?></span>
<div class="clear"></div>
<div class="entry-item-ratings clearfix"><?php et_boutique_display_rating(); ?></div>
<?php
if ( $boutique_active_plugin_name == 'wp_ecommerce' ) {
if(wpsc_the_product_additional_description())
echo wpsc_the_product_additional_description();
else
echo wpsc_the_product_description();
} else { ?>
<p><?php truncate_post(400); ?></p>
<?php } ?>
</div> <!-- end .boutique_description -->
</div> <!-- end .boutique_description_border -->
<?php
}

Next locate the following code near line 691:

if ( ! function_exists( 'boutique_display_product' ) ) :
function boutique_display_product( $post_iterator, $template_name ){
global $post; ?>
<div class="main-product<?php if ( $post_iterator % 4 == 0 ) echo ' last'; ?>">
<?php
$width = 113;
$height = 96;
$titletext = get_the_title();
$thumbnail = get_thumbnail($width,$height,'',$titletext,$titletext,false,'Entry');
$thumb = $thumbnail["thumb"];
?>
<a href="<?php the_permalink(); ?>">
<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?>
<span class="price-tag"><span><?php echo boutique_currency_sign(); ?></span><?php echo boutique_price(); ?></span>
</a>
<h4 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<div class="et-links clearfix">
<a href="#<?php echo boutique_product_name('entry'); ?>" class="add-to-cart et-shop-item"><?php esc_html_e('Cart','Boutique'); ?></a>
<a href="<?php the_permalink(); ?>" class="more-info"><?php esc_html_e('Info','Boutique'); ?></a>
</div> <!-- end .et-links -->
<?php do_action('boutique_product_entry'); ?>
</div> <!-- end .main-product -->
<?php if ( $post_iterator % 4 == 0 ) echo '<div class="clear"></div>'; ?>
<?php
}
endif;

And change it to this:

if ( ! function_exists( 'boutique_display_product' ) ) :
function boutique_display_product( $post_iterator, $template_name ){
global $post; ?>
<div class="main-product<?php if ( $post_iterator % 4 == 0 ) echo ' last'; ?>">
<?php
$width = 113;
$height = 96;
$titletext = get_the_title();
$thumbnail = get_thumbnail($width,$height,'',$titletext,$titletext,false,'Entry');
$thumb = $thumbnail["thumb"];
?>
<a href="<?php the_permalink(); ?>">
<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?>
<span class="price-tag"><span><?php echo '$'; ?></span><?php echo get_post_meta($post->ID, 'Price', true); ?></span>
</a>
<h4 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<?php do_action('boutique_product_entry'); ?>
</div> <!-- end .main-product -->
<?php if ( $post_iterator % 4 == 0 ) echo '<div class="clear"></div>'; ?>
<?php
}
endif;

This will add the '$' and include our custom price values. We also deleted the <div class="et-links clearfix">, which removes the "Add To Cart" and "More Info" bar from below the products. This will only affect the category section of the homepage, category pages and the popup windows. 

Our next step will tweak the 'Special Offers' section of the homepage.

Locate the home.php file in /themes/boutique/

Save an exact copy of this file to /themes/boutique-child/

Locate the following code near line 45:

<a href="<?php the_permalink(); ?>">
<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?>
<span class="price-tag"><span><?php echo boutique_currency_sign(); ?></span><?php echo boutique_price(); ?></span>
</a>
<h4 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<div class="et-links clearfix">
<a href="#<?php echo boutique_product_name('offer'); ?>" class="add-to-cart et-shop-item"><?php esc_html_e('Add to cart','Boutique'); ?></a>
<a href="<?php the_permalink(); ?>" class="more-info"><?php esc_html_e('More Info','Boutique'); ?></a>
</div> <!-- end .et-links -->
<?php do_action('boutique_special_offer'); ?>
</div> <!-- end .special-item -->
<?php endwhile; endif; wp_reset_postdata(); ?>
</div> <!-- end #special-items -->
<?php } ?>

And change it to this:

<a href="<?php the_permalink(); ?>">
<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?>
<span class="price-tag"><span>$</span><?php echo get_post_meta($post->ID, 'Price', true); ?></span>
</a>
<h4 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<?php do_action('boutique_special_offer'); ?>
</div> <!-- end .special-item -->
<?php endwhile; endif; wp_reset_postdata(); ?>
</div> <!-- end #special-items -->
<?php } ?>

This will add the '$' and include our custom price fields to the 'Special Offers' section on the homepage. We also deleted the <div> again, removing the bar from the 'Special Offers' section. 

The only thing left is the featured slider and a little CSS.

Locate the featured.php file in /themes/boutique/includes/

Save an exact copy of this in /themes/boutique-child/includes/

Locate the following code near line 70:

<div class="featured-image">
<a href="<?php echo esc_url( $featured_link ); ?>"><?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?></a>
<?php if ( 'false' == $featured_use_pages ) { ?>
<div class="featured-price">
<a href="#<?php echo boutique_product_name('featured'); ?>" class="add_cart et-shop-item"><?php esc_html_e('Add To Cart','Boutique'); ?></a>
<a href="<?php echo esc_url($featured_link); ?>" class="more_info"><?php esc_html_e('More Info','Boutique'); ?></a>

<span class="price"><?php echo boutique_price(); ?></span>
<span class="currency_sign"><?php echo boutique_currency_sign(); ?></span>
</div> <!-- end .featured-price -->
<?php } ?>
</div> <!-- end .featured-image -->
<div class="featured-description">
<h2 class="featured-title"><a href="<?php echo esc_url($featured_link); ?>"><?php the_title(); ?></a></h2>
<p><?php truncate_post(190); ?></p>
<a href="<?php echo esc_url($featured_link); ?>" class="readmore"><span><?php esc_html_e('More Info', 'Boutique'); ?></span></a>

Change it to this:

<div class="featured-image">
<a href="<?php echo esc_url( $featured_link ); ?>"><?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?></a>
<?php if ( 'false' == $featured_use_pages ) { ?>
<div class="featured-price">

<span class="price"><?php echo get_post_meta($post->ID, 'Price', true); ?></span>
<span class="currency_sign">$</span>
</div> <!-- end .featured-price -->
<?php } ?>
</div> <!-- end .featured-image -->
<div class="featured-description">
<h2 class="featured-title"><a href="<?php echo esc_url($featured_link); ?>"><?php the_title(); ?></a></h2>
<p><?php truncate_post(300); ?></p>
<a href="<?php echo esc_url($featured_link); ?>" class="readmore"><span><?php esc_html_e('Read More', 'Boutique'); ?></span></a>

This will add our currency and price to the featured slider on the homepage and remove the 'Add to cart' and 'More Info' from the ribbon.

Now we just need to add a little CSS to keep the 'Buy from Amazon' text from running off the side of the button on the product pages.

CSS

Locate your style.css file in /themes/boutique-child/

Add this code:

a.single-addtocart {
font-size: 200%;
}

As you can see there are a lot of edits needed to make this tweak work. But once they're done, adding products and their corresponding prices and affiliate links are a breeze with the custom fields. You'll be happy you took the time to do it right.