How to place features content below shop content

Question

I have some features content that I want to place after my shop content, but the shop content is generated in a php file and the features content is written in static html in the wordpress page. The features content appears before the shop content and I need to switch it.

The webpage is at: http://www.bolistylus.com/shop/

Here is what the page looks like currently:

Here is the php code for the shop content:

<?php
/**
 * Loop shop template
 *
 * DISCLAIMER
 *
 * Do not edit or add directly to this file if you wish to upgrade Jigoshop to newer
 * versions in the future. If you wish to customise Jigoshop core for your needs,
 * please use our GitHub repository to publish essential changes for consideration.
 *
 * @package    Jigoshop
 * @category   Catalog
 * @author     Jigowatt
 * @copyright  Copyright (c) 2011 Jigowatt Ltd.
 * @license    http://jigoshop.com/license/commercial-edition
 */
?>

<?php
global $columns, $per_page;

do_action('jigoshop_before_shop_loop');

$loop = 0;

if (!isset($columns) || !$columns) $columns = apply_filters('loop_shop_columns', 4);
//if (!isset($per_page) || !$per_page) $per_page = apply_filters('loop_shop_per_page', get_option('posts_per_page'));

//if ($per_page > get_option('posts_per_page')) query_posts( array_merge( $wp_query->query, array( 'posts_per_page' => $per_page ) ) );

ob_start();

if (have_posts()) : while (have_posts()) : the_post(); $_product = &new jigoshop_product( $post->ID ); $loop++;

    ?>
    <li class="product <?php if ($loop%$columns==0) echo 'last'; if (($loop-1)%$columns==0) echo 'first'; ?>">

        <?php do_action('jigoshop_before_shop_loop_item'); ?>

        <a href="<?php the_permalink(); ?>">

            <?php do_action('jigoshop_before_shop_loop_item_title', $post, $_product); ?>

            <strong><?php the_title(); ?></strong>

            <?php do_action('jigoshop_after_shop_loop_item_title', $post, $_product); ?>

        </a>

        <?php do_action('jigoshop_after_shop_loop_item', $post, $_product); ?>

    </li><?php

    if ($loop==$per_page) break;

endwhile; endif;

if ($loop==0) :

    echo '<p class="info">'.__('No products found which match your selection.', 'jigoshop').'</p>';

else :

    $found_posts = ob_get_clean();

    echo '<ul class="products">' . $found_posts . '</ul><div class="clear"></div>';

endif;

do_action('jigoshop_after_shop_loop');

Here is the html for the features content:

<div class="entry-content">
<h1 class="description-title">WHY IS BOLI BETTER?</h1>
<div class="feature feature-item-248"><img class="main" src="http://www.bolistylus.com/wp-content/uploads/uclaproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">

Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.

</div>
</div>
</div>
<div class="feature feature-item-252"><img class="main" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PEN-LIKE PRECISION</h2>
</div>
<div class="feature_description_content">

Your stylus should be as sharp as your ideas. The thin and clear disc gives you the accuracy you want in a digital pen.

</div>
</div>
</div>
<div class="feature feature-item-254">

<img class="main" src="http://www.bolistylus.com/wp-content/uploads/blueproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">BALL POINT</h2>
</div>
<div class="feature_description_content">

Hold your stylus at the angle you’re most comfortable with. Jot gives you the freedom to write or sketch like you’re used to.

</div>
</div>
</div>
<div class="feature feature-item-256">

<img class="main" src="http://www.bolistylus.com/wp-content/uploads/greenproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">HEAVY METAL</h2>
</div>
<div class="feature_description_content">

Once Jot is in your grip, the quality is unmistakable. The durable aluminum and steel gives Jot superior conductivity and craftsmanship comparable to any luxury pen.

</div>
</div>
&nbsp;

</div>
</div>

Answer 1

This line creates the products lists:

echo '<ul class="products">' . $found_posts . '</ul><div class="clear"></div>';

which is the shop content. If you inspect your page using Firebug, you'll notice ul.products which contains the 5 products being showcased (shop content).

What you can do to show the feature content after is create an HTML string for your static data and append it to the echo statement above. For eg.

$product_string = "";
$product_string = "<ul class='products'>" . $found_posts . "</ul><div class='clear'></div>";
$product_string .= "<div class='entry-content'><h1 class='description-title'>WHY IS BOLI BETTER?</h1>";

/* First Product */
$product_string .= "<div class='feature feature-item-248'><img class='main' src='http://www.bolistylus.com/wp-content/uploads/uclaproduct.png' alt='' /><div class='feature_description'><div class='feature_description_header'><h2 class='descript-heading'>PERFECTLY WEIGHTED</h2></div><div class='feature_description_content'>Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.</div></div></div>";

$product_string .= "</div>";

Likewise you can create strings for the other products and append them to the string above. Once you have all the strings appended, you only need to echo the variable;

echo $product_string;

Obviously, this is not the neatest solution, but it should get the job done. Ideally, you'd want to pull your features content through a database as well.

Additionally, you could create a function which, depending on the feature-item ID passed to it, retrieves the relevant information. You could loop through the products and invoke the function to generate the HTML strings for you, instead of having to manually create them.